在KineticJS中拖动多个元素(不分组)
Drag Multiple Elements in KineticJS (Without Grouping)
我目前有一个应用程序,创建组,其中每个组包含一个行对象和一个文本对象(显示行长度)。我有它,所以组是可拖动的,但是我现在实现了一个多选择选项,用户可以一次单击两个组。
是否有可能拖动其中一条线来影响两条线?如果可能的话,我希望避免创建包含前面两个组的超组。
目前我能想到的唯一方法是通过类似于下面的超级组:
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>
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- 通过 Meteor 更新 KineticJS Canvas 元素
- KineticJS-为什么它使用了这么多隐藏的画布元素
- 在KineticJS中拖动多个元素(不分组)
- KineticJS:如何将舞台转换为HTML5画布元素
- KineticJS:使丢弃的元素可以作为Kinetic.Group进行拖动