1

ポイントの配列（x、yのペア）があり、これらのポイントで円を描きます

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);                                              
        }

ID などの新しい属性名を各円に追加し、マウスがクリックされたときに円の名前を警告したいと考えています。

サークルに新しい属性名を追加することが正しいかどうかはわかりません。

では、新しい属性「名前」をサークルに追加して、サークルをクリックしたときに名前の値を警告する方法は?

4

1 に答える 1

2

以下のコードを試してください

<!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>
于 2012-11-27T10:01:48.880 に答える