How to use properties, members and methods in kineticjs

Folks,

We have multiple properties like width,height,listening etc etc as shown below

width Number <optional>
height Number <optional>
visible Boolean <optional>
listening Boolean <optional> whether or not the node is listening for events

In the same manner we do even have methods like dragDistance,offsetX,dash,clone etc along with methods like dragDistance

Now my question is how to use this in efficient way? Thinking why questioning u 😉 even myself has same question 😛

I am a new bee, don’t scold me if i go wrong somewhere 😉

Properties can be used inside method like

var circle = new Kinetic.Circle({
                radius: 40,
                fill: 'blue',
                stroke: 'green',
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                strokeWidth: 3
 
            });

Members can be used like

            circle.dash([10, 5]);
            circle.dashEnabled(true);
            circle.draggable(true);
            circle.dragDistance(30);


Methods can be used like this

Kinetic.dragDistance = 3;

Just run the below example in a notepad file to see a circle with outlined dash and even you can drag it.

Code:

<!DOCTYPE html>
 
<html lang="en">
    <head>
        
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="newcont"></div>
        <script src="kScript.js"></script>
        <script>
             //stage class
            var stage = new Kinetic.Stage({
                container: 'newcont', // container property
                width: 500, //width property
                height: 500 //height property
            });
            Kinetic.dragDistance = 30; // dragDistance method
            //layer class
            var layer = new Kinetic.Layer();
            // var node = new Node();
            // var dragDistance = circle.dragDistance();
 
            var circle = new Kinetic.Circle({
                radius: 40,
                fill: 'blue',
                stroke: 'green',
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                strokeWidth: 3
 
            });
            circle.dash([10, 5]); //calling dash method
            circle.dashEnabled(true);
            circle.draggable(true);
            circle.dragDistance(30);
            layer.add(circle); // calling add method
            stage.add(layer);
        </script>
    </body>
</html>

Output:

24-06-2014 19-08-53

 

If u want to append a rectangle to the same layer of your stage, you can do that by adding child to add method like shown below..

layer.add(shape1, shape2, shape3);

In my example:
add rect in scrpits tags like

<script>
var rect = new Kinetic.Rect({
width: 100,
height: 50,
fill: ‘red’,
stroke: ‘black’,
strokeWidth: 5
});
</script>
finally modify layer.add method with “layer.add(circle,rect);”. Thats it. You can see both shapes in your stage like shown below..

24-06-2014 19-22-08

Advertisements

One thought on “How to use properties, members and methods in kineticjs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s