Question

我想能够点击var textradie text“Show radie”，然后添加两个圆圈kinGroups [index] .add（circle）;和kinGroups [index] .add（circlered）;.我在我的Group kinGroups [index]上添加了两个圆圈。我所有的jsonObjects [i] .radie == false，所以我不知道为什么kinGroups [index]中只有一个对象有两个圆圈。我的三个对象应该有两个圆，但只有一个对象有两个圆。

var textradius = new Kinetic.Text({

    x: 1000,
    y: 500,
    fontFamily: 'Calibri',
    fontSize: 18,
    text: 'Show radius',
    fill: 'black'
});

kinGroups[index].add(textradie);

textradius.on('click', function() {

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

        console.log("testing");

        if(kinGroups[index].getName() == jsonObjects[i].name) {

            if(jsonObjects[i].radie == false) {

                    kinGroups[index].add(circle);
                    kinGroups[index].add(circlered);
            }
        }
    }
});

Answer 1

您必须将新圈子和圈选对象添加到群组中。

您可以使用clone（）方法执行此操作：

kinGroups[index].add(circle.clone());
kinGroups[index].add(circlered.clone());

[添加：示例代码]

演示：http://jsfiddle.net/m1erickson/4uAdc/

假设你有：

一个小组，
该组中的文字元素。文本元素名为“One”。
该组中的其他元素。其他一些元素被命名为“One”。

如果单击名为“One”的文本，这里是如何围绕名为“One”的其他元素绘制双圈。

// define a circle that can be cloned
var circle=new Kinetic.Circle({
    stroke: 'black',
    strokeWidth: 2,
});

// get all children with the same name as the clicked text

var children=group.find("."+text.getName());

// iterate those children and add cloned circles

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


    // get the x,y of the other elements with the same name as the text

    var child=children[i];
    var x=child.getX();
    var y=child.getY();

    // add cloned circles around those other elements

    var red =circle.clone({x:x,y:y,radius:10,stroke:"red"});
    var blue=circle.clone({x:x,y:y,radius:15,stroke:"blue"});
    text.group.add(red);
    text.group.add(blue);

}
layer.draw();

如何在Kineticjs Text onclick上添加Kineticjs shape Circle？

1 个答案: