KineticJS拖动多个图像而不将它们分组 [英] KineticJS drag multiple images without grouping them
问题描述
是否可以拖动图层的所有子元素，而不将其分组？
is it possible to drag all children elements of a layer without grouping them?
我有不同的图层与图像元素和路径形状。路径在图像周围绘制一个气泡。如果用户将气泡拖动到另一个地方，所有图像也应该移动到那里。
I have different layers with image-elements and a path shape. The path draws a bubble around the images. If the user drag the bubble to another place, all images should move there, too.
但是也应该可以拖动单个元素。
现在，可以拖动单个元素并拖动气泡，但没有组合...
But it should be also possible to drag a single element. At the moment, it is possible to drag a single element and to drag the bubble, but there is no combination...
推荐答案
是的，当拖动容器节点时，您可以拖动相关节点：
-
向气泡的所有子级添加类（例如，每个子级的名称：bubble1）
add a class to all children of a bubble (for example, each child's name:"bubble1")
c> dragstart c>，保存气泡的起始位置
on bubble dragstart, save the bubble's starting position
，计算气泡被拖动的距离，并以相同的距离重新定位所有相关元素。
on bubble dragmove, calculate how far the bubble has been dragged and reposition all related elements by that same distance
示例代码和演示： 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>
这篇关于KineticJS拖动多个图像而不将它们分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
