0

我使用 KineticJS 和 HTML5 迭代地绘制圆圈。我想在任何圆圈上检测 mousemove 并获取所选圆圈的 ID。我知道您可以按名称或 ID 选择元素，但是如何按类型（圆圈）选择元素？使用下面的代码，它只响应最后一个圆圈（因为它是最后一个声明的“圆圈”），但我不确定如何更改它以响应所有圆圈。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

    <div id="container"></div>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
        <script>
            var startX = 200;
            var startY = 100;
            var radius = 10;

            var stage = new Kinetic.Stage({
                container: 'container',
                width:400,
                height:500
            });

            for(i=0; i<10; i++){
                window['circle'+i];
            }

            var layer = new Kinetic.Layer();

            for (i=0; i<10;i++){
                var circle = new Kinetic.Circle({
                    x: startX,
                    y: startY,
                    radius: radius,
                    fill: '#CCCCCC',
                    stroke: '#999',
                    strokeWidth: 4,
                    name: 'step'+i
                });

                layer.add(circle);

                var stepName = new Kinetic.Text({
                    x: startX + radius*2.5,
                    y: startY-7.5,
                    text: "circle"+i,
                    fontSize: 15,
                    fontFamily: 'Calibri',
                    fill: 'black'
                });

                layer.add(stepName);
                stage.add(layer);

                startY = startY + radius*3.5;
            }

            circle.on('mousemove', function(){
                var shapeName = this.getName();
                console.log(shapeName);
            })

        </script>
</body>
</html>
4

1 回答 1

0

我通过将所有圆圈元素的名称设置为“圆圈”来解决这个问题，然后做了

var shapes = stage.get('.circle')
for(i=0;i<shapes.length;i++){
console.log(shapes[i].getId());
}
于 2013-02-14T17:06:36.267 回答