CODEWITHSUNDEEP
attributesgetonclickkineticjs
Nurlan
Nurlan

Reputation: 2960

kinetic javascript get value on click

I have an array of points(pair of x,y) and I draw circles by these points

for (var i = 0; i < points.length;i++){         

            var circle = new Kinetic.Circle({
                x: points[i].x,
                y: points[i].y,
                radius: 7,
                fill: "green",
                stroke: "black",
                name:i,
                strokeWidth: 2
            });

            circle.on("click", function() {
                alert(name); //here I want to get name of circle 
            });

            layer.add(circle);                                              
        }

I added new attribute name to each circle, like ID and I want to alert name of circle when mouse is clicked at it.

I am not sure that adding new attribute name to circle is correct.

So,how to add new attribute "name" to circle so that when clicking at circle it alerts its value of name?

Upvotes: 1

Views: 611

Answers (1)

Palani Kumar
Palani Kumar

Reputation: 1137

Try this below code

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body onload="displaycircle()">
    <div id="container">
    </div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <script>
        function displaycircle() {
            var stage = new Kinetic.Stage({
                container: 'container',
                width: 578,
                height: 200
            });
            var layer = new Kinetic.Layer();
            for (var i = 0; i < 10; i++) {
               var circle = new Kinetic.Circle({
                    x: Math.random() * stage.getWidth(),
                    y: Math.random() * stage.getHeight(),
                    radius: 30,
                    fill: "green",
                    stroke: "black",
                    name: i,
                    strokeWidth: 2,
                    draggable: true
                });
                layer.add(circle);
                stage.add(layer);
                circle.on("click", function() {
                    alert(this.attrs.name); //here you can get name of circle 
                });
            }
        }
    </script>

</body>
</html>

Upvotes: 2

Related Questions