Question

我目前有一个创建组的应用程序，其中每个组包含一个线对象和一个文本对象（显示行的长度）。我有它，所以该组是可拖动的，但我现在正在实现一个多选项，用户可以一次点击两个组。

是否可以拖动其中一条线来影响两条线？我想避免创建一个包含前两个组的超级组，如果可能的话。

我能想到的唯一方法是通过类似如下的超级组：

var super_group = new Kinetic.Group({
  draggable: true
});

// clicked_groups is an array storing all groups that have been clicked (multi-select)
for(var i = 0; i < clicked_groups.length; i++) {
  super_group.add(clicked_groups[i]);
}

或者那种效果。任何允许我一次拖动多个元素而不创建新组的方法将不胜感激。

Answer 1

是的，您可以拖动多个选择而无需超级组。

首先，创建一个包含对所有选定组的引用的数组。

然后，如果拖动了其中一个选定的组，您可以手动移动所选组数组中的所有组。（将它们移动自上次移动事件后鼠标移动的距离）。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/PZzXm/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 selectedGroups=[];


    var nextIndex=1;
    var nextX=20;
    var nextY=20;

    newGroup("red");
    newGroup("green");
    newGroup("blue");

    function newGroup(color){
        addGroup(color,nextIndex,nextX,nextY);
        nextIndex++;
        nextX+=50;
    }

    function addGroup(color,index,contentX,contentY){
        var g=new Kinetic.Group({draggable:true});
        g.on("dblclick",function(){
            this.isSelected=!this.isSelected;
            g.selector.stroke((this.isSelected)?"red":null);
            selectedGroups.length=0;
            layer.find("Group").each(function(child){
                if(child.isSelected){ selectedGroups.push(child); }
            });
            layer.draw();
        });
        g.on("dragstart",function(){
            g.startPos=stage.getPointerPosition();
        })
        g.on("dragmove",function(){
            if(!this.isSelected){return;}
            var n=selectedGroups.length;
            var endPos=stage.getPointerPosition();
            var dx=endPos.x-this.startPos.x;
            var dy=endPos.y-this.startPos.y;
            this.startPos=endPos;
            while(--n>=0){
                var group=selectedGroups[n];
                group.x(group.x()+dx);
                group.y(group.y()+dy);
            }
        });
        layer.add(g);
        var selector=new Kinetic.Rect({
            x:contentX, y:contentY, width:50, height:50,
        });
        g.add(selector);
        var circle = new Kinetic.Circle({
            x:contentX+25, y:contentY+25, radius:20,
            fill:color,
        });
        g.add(circle);
        var text=new Kinetic.Text({
            x:contentX+25-3, y:contentY+25-8, text:index, fill:"white",fontSize:14,
        });
        g.add(text);
        g.index=index;
        g.selector=selector;
        g.isSelected=false;
        layer.draw();
    }


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

</script>       
</head>
<body>
    <h4>DoubleClick to select a circle-group<br>Dragging selection will drag all selected groups</h4>
    <div id="container"></div>
</body>
</html>

在KineticJS中拖动多个元素（不分组）

1 个答案: