在KineticJS中創建具有不同圖層形狀的組

Question

我會盡可能準確地解釋我的問題。

我的項目有2組（[Group1]，[Group2]） 我想要[Button]，它切換[Group1]的可見性。 （setOpacity爲1或0） 我希望[Group1]，[Group2]可拖動並彼此固定。

I've tried this way: 
I've created 2 layers [Layer1] and [Layer2]. 
I've added [Group1] to [Layer1] 
I've added [Group2] to [Layer2] 
When i click [Button], i toggle Opacity of [Layer1] 
I've created [MainGroup] and set it to draggable. 
I've added [Group1,2] to [MainGroup]. To make them anchored to each other, and i could drag them. 

但是，如果使用的不是MainGroup [組別1] .getParent（）我得到[層1]，這是爲什麼？我應該使用不同的邏輯嗎？我需要[Group1] .getParent（）返回[MainGroup]，所以我可以在其中找到另一個[Group2]組並添加一些形狀。

我KineticJS版本：4.7.2

Answer 1

您可以嵌套組這樣的：http://jsfiddle.net/m1erickson/YmAdJ/

• 創建一個層上的containerGroup。
• 創建Group1並將其添加到containerGroup。
• 創建Group2並將其添加到containerGroup。
• 使容器組可拖動。

嵌套組會是這個樣子：

// make a container group to hold group1 and group2 

var containerGroup=new Kinetic.Group({ 
    x:20, 
    y:20, 
    width:225, 
    height:100, 
    draggable:true 
}); 
layer.add(containerGroup); 

// create group1 and group2 inside containerGroup 

var group1=new Kinetic.Group({ 
    id:"g1", 
    x:0, 
    y:0, 
    width:125, 
    height:100, 
}); 
containerGroup.add(group1); 

var group2=new Kinetic.Group({ 
    id:"g2", 
    x:126, 
    y:0, 
    width:100, 
    height:100, 
}); 
containerGroup.add(group2); 

對於這兩個組別1 &組2，你可以得到一個參考containerGroup像這樣：

group1.on(「click」,function(){ 
     var myContainerGroup=this.getParent(); 
}); 

group2.on(「click」,function(){ 
     var myContainerGroup=this.getParent(); 
}); 

您可以使用該容器組的引用來獲取對子組l的引用ike this：

var myGroup1 = myContainerGroup.get("#g1")[0]; 

var myGroup2 = myContainerGroup.get("#g2")[0];