javascript - KineticJS 拖动多个图像而不对它们进行分组-6ren

javascript - KineticJS 拖动多个图像而不对它们进行分组

转载作者：行者123 更新时间：2023-11-30 17:33:37

24

4

是否可以拖动层的所有子元素而不对它们进行分组？

我有带有图像元素和路径形状的不同图层。该路径在图像周围绘制了一个气泡。如果用户将气泡拖到另一个地方，所有图像也应该移动到那里。

但是拖动单个元素应该也是可以的。目前，可以拖动单个元素并拖动气泡，但没有组合......

最佳答案

是的，在拖动“容器”节点时可以拖动“相关”节点:

为泡泡的所有 child 添加一个类(例如，每个 child 的名字:“bubble1”)
在气泡dragstart上，保存气泡的起始位置
在气泡 dragmove 上，计算气泡被拖动了多远，并按照相同的距离重新定位所有相关元素

示例代码和演示:http://jsfiddle.net/m1erickson/Zr6TE/

<!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 bubble=new Kinetic.Circle({
        x:100,
        y:100,
        width:100,
        height:100,
        fill:"blue",
        draggable:true,
    });
    bubble.lastPos;
    bubble.on("dragstart",function(){
        this.lastPos=this.position();
    });
    bubble.on("dragmove",function(){
        var lastPos=bubble.lastPos;
        var pos=bubble.position();
        var deltaX=pos.x-lastPos.x;
        var deltaY=pos.y-lastPos.y;
        layer.find(".bubble1").each(function(child){
            child.position({x:child.x()+deltaX, y:child.y()+deltaY} );
        });
        bubble.lastPos=pos;
        layer.draw();
    });
    layer.add(bubble);

    var circle1 = new Kinetic.Circle({
        x:80,
        y:80,
        radius:15,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        name:"bubble1"
    });
    layer.add(circle1);

    //
    var circle2 = new Kinetic.Circle({
        x:110,
        y:110,
        radius:15,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
        name:"bubble1"
    });
    layer.add(circle2);

    //
    layer.draw();

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

</script>       
</head>
<body>
    <div id="container"></div>
</body>
</html>

关于javascript - KineticJS 拖动多个图像而不对它们进行分组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22480234/

24

4

0

文章推荐： javascript - 我的范围变量不会在 html View 中更新

文章推荐： javascript - 使用 moment.js 漂亮地打印时间范围

文章推荐： javascript - 我如何在 mouseleave 上淡出这个淡入淡出？

文章推荐： javascript - AngularJS 1st ng-class works 2nd doesn't

mysql - 按 parent 分组，但不按 child 分组
您好，我正在处理 BIRT 报告。我有一个查询，我必须对父级的重复数据进行分组，但子级也不能分组! 在我的查询中: item 是父项，item_ledger_entry 是子项。我有来自 item.N
google-analytics - 为什么 MCF channel 分组≠默认 channel 分组？
我正在使用 GA API。这是针对 MCF 目标报告(底部)的标准目标完成指标表(顶部) 看一下这个: 总数加起来 (12,238)，但看看按 channel 分组的分割有多么不同!我以为这些会很接
OrientDB 分组
我正在开发一个流量计数器，我想获得 IP 和重复计数，但是如何？就像是 :select ip, count(ip) from Redirect 返回 : null total ip count 重定
Java正则表达式(分组)
我尝试编写一个正则表达式来匹配条件表达式，例如: a!=2 1+2=2+a 我尝试提取运算符。我当前的正则表达式是“.+([!=<>]+).+” 但问题是匹配器总是尝试匹配组中可能的最短字符串
分组、平均的SQL子查询问题
在 MS Transact SQL 中，假设我有一个这样的表(订单): Order Date Order Total Customer # 09/30/2008 8
MySQL:分组
我想按 m.ID 分组，并对每个 m.id 求和 (pm.amount_construction* prod.anzahl) 实际上我有以下结果: Meterial_id | amount_const
PostgreSQL 分组
我想根据多列中的值对值进行分组。这是一个例子: 我想得到输出: {{-30,-50,20},{-20,30,60},{-30,NULL or other value, 20}} 我设法到达: SELE
MySql 分组
我正在尝试找出运行此查询的最佳方式。我基本上需要返回在我们的系统中只下了一个订单的客户的“登录”字段列表(登录字段基本上是客户 ID/ key )。我们系统的一些背景...... 客户在同一日期下的
MYSQL - 分组
给定以下mysql结果集: id code name importance '1234', 'ID-CS-B', 'Chocolate Sauce'
python - 分组
大家好，我的数据框中有以下列: LC_REF 1 DT 16 2C 2 DT 16 2C 3 DT 16 2C 1 DT 16 3C 6 DT 16 3C 3
MongoDB 分组
我有这样的 mongoDB 集合 { "_id" : "EkKTRrpH4FY9AuRLj", "stage" : 10, }, { "_id" : "EkKTRrpH4FY9
Python 分组
假设我有一组数据对，其中 index 0 是值，index 1 是类型: input = [ ('11013331', 'KAT'), ('9085267',
java中用stream进行去重，排序，分组
java中用stream进行去重，排序，分组一、distinct 1. 八大基本数据类型 List collect = ListUtil.of(1, 2, 3, 1, 2).stream().fil
SQL - 如何添加具有平均值的列，分组
基本上，我从 TABLE_A 中的这个开始 France - 100 France - 200 France - 300 Mexico - 50 Mexico - 50 Mexico - 56 Pol
正则表达式，分组，查找最后一个匹配项
我希望这个正则表达式 ([A-Z]+)$ 将选择此示例中的最后一次出现: AB.012.00.022ABC-1 AB.013.00.022AB-1 AB.014.00.022ABAB-1 但我没有匹配
数据透视表中的 SQL 分组
我创建了一个数据透视表，但数据没有组合在一起。任何人都可以帮助我获得所需的格式吗？我为获取数据透视表而编写的查询: DECLARE @cols AS NVARCHAR(MAX), -- f
SQL选择并按一段时间(时间戳)分组
我想按时间段(月，周，日，小时，...)选择计数和分组。例如，我想选择行数并将它们按 24 小时分组。我的表创建如下。日期是时间戳。 CREATE TABLE MSG ( MSG_ID dec
围绕间隙的 SQL 分组
在 SQL Server 2005 中，我有一个包含如下数据的表: WTN------------Date 555-111-1212 2009-01-01 555-111-1212 2009-
python - 按多列对数据框中的连续条目进行聚类/分组
题假设我有 k 个标量列，如果它们沿着每列彼此在一定距离内，我想对它们进行分组。假设简单 k 是 2 并且它们是我唯一的列。 pd.DataFrame(list(zip(sorted(choice
pandas - 分组、拆分和选取数据框中的顶行
问题在以下数据框中 df : import random import pandas as pd random.seed(999) sz = 50 qty = {'one': 1, 'two': 2

首页

博学

6Ren·AI

商城

javascript - KineticJS 拖动多个图像而不对它们进行分组