KineticJs-动态创建矩形时，其后面的矩形会自行拖动 [英] KineticJs - When dynamically creating rect, the rect behind it drags by itself
本文介绍了KineticJs-动态创建矩形时，其后面的矩形会自行拖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在dynamicjs中，我正在创建可拖动的动态矩形.但是，当我创建一个新矩形时，其后面的矩形会自动拖动.我不希望这种情况发生.
In kineticjs I am creating dynamic rectangles that are draggable. However when I create a new rectangle, the rectangle behind it automatically drags. I dont want this to happen.
您可以在 http://jsfiddle.net/sandeepy02/8kGVD/12的演示中查看行为/
第1步:选择创建矩形"并创建矩形. 第2步:选择移动矩形"并移动矩形. 步骤3:选择创建矩形"并创建矩形.这将导致先前创建的矩形也移动.这是不需要的.
Step 1: Choose "create rectangle" and create rectangles. Step 2: Choose "Move rectangle" and move the rectangles. Step 3: Choose "create rectangle" and create rectangles. This causes the rectangles previously created to also move. This is unwanted.
<html>
<head>
<script>
function valButton(radios) {
var btn = document.getElementsByName(radios);
var cnt = -1;
for (var i = btn.length - 1; i > -1; i--) {
if (btn[i].checked) {
cnt = i;
i = -1;
}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown touchstart", function() {
var btnName = valButton("group2");
if (btnName == "1") {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect = new Kinetic.Rect({
x: 22,
y: 7,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
}
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mousedown
stage.on("mousemove touchmove", function() {
var btnName = valButton("group2");
if (btnName == "1") {
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x - rect.getX());
rect.setHeight(mousePos.y - rect.getY());
moving = true;
layer.drawScene();
}
}
else if (btnName == "3") {
layer.draw();
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mousemove
stage.on("mouseup touchend", function() {
var btnName = valButton("group2");
if (btnName == "1") {
moving = false;
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mouseup
};
</script>
</head>
<body>
<h2>Toggle buttons</h2>
<div class="toggle-btn-grp">
<label onclick="" class="toggle-btn"><input type="radio" value="1" name="group2"/> Create Rectangle</label>
<label onclick="" class="toggle-btn"><input type="radio" value="3" name="group2"/>Move Rectangle</label>
</div>
<div id="container" ></div>
<div id="text" >abc</div>
</body>
</html>
推荐答案
这是您解决问题的更新功能-
Here is your updated function to fix the problem -
stage.on("mousedown touchstart", function() {
var btnName = valButton("group2");
if (btnName == "Create") {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect = new Kinetic.Rect({
x: 0,
y: 0,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
rect.on("mousemove touchmove", function() {
var btnName = valButton("group2");
if (btnName == "Create") {
this.setDraggable(false);
}
else if (btnName == "Move") {
this.setDraggable(true);
}
document.all.text.innerText = btnName +" rect move MovingFlag: "+moving;
}); //end of rect mousemove
layer.drawScene();
}
}
document.all.text.innerText = btnName +" MovingFlag: "+moving;
}); //end of mousedown
这篇关于KineticJs-动态创建矩形时，其后面的矩形会自行拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
