个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 17:25:37 24 4
gpt4 key购买 nike

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

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

目前我能想到的唯一方法是通过 super 组，如下所示:

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

或者类似的东西。任何允许我一次拖动多个元素而不创建新组的方法都将受到赞赏。

最佳答案

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

首先，创建一个数组来保存对所有选定组的引用。

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

这里是示例代码和演示: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>

关于javascript - 在 KineticJS 中拖动多个元素(不分组)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23525162/

24 4 0
文章推荐： julia - Julia 中矩阵的向量
文章推荐： sql-server - SQL Server 2012 向后兼容 2008 的备份
文章推荐： python - cvtColor “code”用于16位灰度图像
文章推荐： python - 我需要一种方法将多个键映射到字典中的相同值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com