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,并且我想在单击鼠标时提醒圆圈的名称。

我不确定将新属性名称添加到 circle 是否正确。

那么,如何向圆圈添加新属性“名称”,以便在单击圆圈时提醒其名称值?

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 回答