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

Question

我想能夠點擊var textradie文本「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

你必須新圈和circlered對象添加到組。

您可以使用clone（）方法來做到這一點：

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

[加法：示例代碼]

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

假設你有：

• 一組，
• 該組中的文本元素。文本元素被命名爲「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();