在 kineticJS 中对形状进行分组的另一种方法——而不是使用 Group？答案

【问题标题】：Another way of grouping shapes in kineticJS - rather than using Group?在 kineticJS 中对形状进行分组的另一种方法——而不是使用 Group？
【发布时间】：2014-05-01 01:20:57
【问题描述】：

我有两个组（group1、group2），它们都包含矩形。这些组中的每一个都是可拖动的。当我移动一个形状（在我的例子中是组或矩形）并且它与另一个重叠时，我会触发一个事件并将这两个组添加到另一个组（超级组）中，该组也可以拖动。我现在这样做的方式是创建一个包含两个组的超级组，如下所示：

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

尽管这似乎适用于简单的添加情况，但对于更复杂的情况，这变得繁琐且效率低下。

所以我的问题是：

除了将形状添加到组之外，还有其他方法可以对形状进行分组吗？

【问题讨论】：

标签： kineticjs

【解决方案1】：

与其创建第三个 superGroup，不如将 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>

【讨论】：

感谢您的回答，因为您的代码非常有用。我没有提到这个问题是我仍然想在创建新组时保留有关子组的信息。我正在考虑为每个矩形添加一个属性，该属性声明它属于哪个组。因此，即使我将其移至新组，该属性仍将保留子组信息。
没问题——可以使用节点名来保留每个节点之前的组信息。为所有 group1 节点分配名称：“g1”。然后您可以使用 layer.find(".g1") 来获取曾经在 g1 中的所有节点的集合。