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

【问题标题】：Drag Multiple Elements in KineticJS (Without Grouping)在 KineticJS 中拖动多个元素（不分组）
【发布时间】：2014-05-08 22:24:13
【问题描述】：

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

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

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

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]);
}

或者类似的东西。任何允许我一次拖动多个元素而不创建新组的方法将不胜感激。

【问题讨论】：

标签： javascript kineticjs

【解决方案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>

【讨论】：

你能帮我解决类似的问题吗？我被困了几个星期。我没有使用group 方法，但我有不同的对象需要选择。