在KineticJS中拖动多个元素(不分组)

Drag Multiple Elements in KineticJS (Without Grouping)

本文关键字：元素 KineticJS 拖动      更新时间：2023-09-26

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

是否有可能拖动其中一条线来影响两条线?如果可能的话，我希望避免创建包含前面两个组的超组。

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

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

之类的。如果有任何方法能让我一次拖动多个元素而不创建一个新组，我将不胜感激。

是的，你可以拖动多个选择而不需要超组。

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

然后，如果一个选定的组被拖动，您可以手动移动选定组数组中的所有组。(按鼠标自上次移动事件以来移动的距离移动它们)。

下面是示例代码和演示: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>
相关文章：