在kineticJS中對形狀進行分組的另一種方式 - 而不是使用組？

我有兩個組（group1，group2）都包含矩形。每個組都是可拖動的。當我移動一個形狀（在我的情況下爲組或矩形）並且與另一個重疊時，我觸發一個事件並將這兩個組添加到另一個組（超級組），這個組也可以拖動。我現在這樣做的權利的方式是通過創建包含兩組如下超羣：在kineticJS中對形狀進行分組的另一種方式 - 而不是使用組？

group1.add(cube1); 
group2.add(cube2); 
superGroup.add(group1); 
superGroup.add(group2);

即使這似乎添加的簡單的情況下工作，對於較複雜的情況下，這變得繁瑣，效率低下。

所以我的問題是：

有分組的形狀將其添加到組，而不是任何其他方式？

來源

2014-04-30 Mike B

而不是創建第三個超級組，如何將group1合併到group2（反之亦然）。

這可以通過調整所有group1兒童的x/y值然後將它們移動到group2來完成。

示例代碼和演示：http://jsfiddle.net/m1erickson/BkfkC/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 350, 
    height: 350 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

var g1=new Kinetic.Group({x:10,y:10,draggable:true});layer.add(g1); 
var g2=new Kinetic.Group({x:60,y:60,draggable:true});layer.add(g2); 

var circle1a = new Kinetic.Circle({ 
    x:20, 
    y:20, 
    radius: 30, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
}); 
g1.add(circle1a); 

var circle1b = new Kinetic.Circle({ 
    x:120, 
    y:120, 
    radius: 30, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4, 
}); 
g1.add(circle1b); 

var circle2 = new Kinetic.Circle({ 
    x:20, 
    y:20, 
    radius: 30, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 4, 
}); 
g2.add(circle2); 

layer.draw(); 


function mergeG1intoG2(g1,g2){ 
    var g2pos=g2.position(); 
    var g1Children=g1.getChildren(); 
    n=g1Children.length-1; 
    while(n>=0){ 
     var child=g1Children[n--]; 
     var pos=child.getAbsolutePosition(); 
     child.x(pos.x-g2pos.x); 
     child.y(pos.y-g2pos.y); 
     child.moveTo(g2); 
    }; 
    g1.destroy(); 
    layer.draw(); 
} 

    $("#myButton").click(function(){ 
     mergeG1intoG2(g1,g2);  
    }); 


}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <button id="myButton">Merge red+green group into blue group</button> 
    <div id="container"></div> 
</body> 
</html>

來源

2014-04-30 17:20:57 markE

感謝您的答案，因爲你的代碼是非常有用的。我沒有提到的問題是，我仍然希望在創建新組時保留有關子組的信息。我正在考慮爲每個矩形添加一個屬性，以聲明它屬於哪個組。所以即使我將它移動到一個新的組中，該屬性仍然是子組信息。 –

沒問題 - 您可以使用節點名稱來保留每個節點的先前組信息。爲所有group1節點分配名稱：「g1」。然後，您可以使用layer.find（「。g1」）來獲取過去在g1中的所有節點的集合。 – markE

在kineticJS中對形狀進行分組的另一種方式 - 而不是使用組？

回答

相關問題