Question

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

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

即使这似乎适用于添加的简单情况，但对于更复杂的情况，这会变得麻烦且效率低下。

所以我的问题是：

是否有其他方法对形状进行分组而不是将其添加到组中？

Answer 1

如何将group1合并到group2（反之亦然），而不是创建第三个superGroup。

这可以通过调整所有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>

另一种在kineticJS中分组形状的方法 - 而不是使用Group？

1 个答案: