[英]Draw shapes with mousemove, drag and drop and resize with kineticjs- KineticJS
我正在用KineticJS开发一个简单的绘画程序。 我要实现的是通过鼠标移动来绘制矩形,直线或圆形,并且所绘制的形状可以通过鼠标拖动或调整大小。 我的问题是,我必须使用mousedown
和mousemove
事件进行绘制,但是我无法同时实现拖放或调整大小。
这是我的绘图代码:
stage.on("mousedown", function() {
if ((drawFlag == 1) && (dragFlag == 0)) {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(line);
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
}
if ((drawFlag == 2) && (dragFlag == 0)) {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect = new Kinetic.Rect({
x: 20,
y: 20,
fill: "red",
stroke: "black",
strokeWidth: 2,
draggle: true,
width: 0,
height: 0
});
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
layer.add(rect);
Rects.push(rect);
}
}
});
stage.on("mousemove", function() {
if ((drawFlag == 1) && (dragFlag == 0)) {
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
}
if ((drawFlag == 2) && (dragFlag == 0)) {
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();
}
}
});
stage.on("mouseup", function() {
moving = false;
});
绘制矩形后,当我单击它时,应该通过鼠标移动来拖动它。 但是,在我的程序中,单击绘制的矩形会导致绘制另一个矩形而不是拖动它。 因此,我尝试使用dragFlag指示我正在绘制还是拖动。 我使用一个函数来检查鼠标光标是否在任何绘制的矩形上:
for (var n = 0; n < Rects.length; n++) {
(function() {
Rects[n].on('mouseover', function() {
dragFlag = 1;
document.body.style.cursor = "pointer";
});
Rects[n].on('mouseout', function() {
dragFlag = 0;
document.body.style.cursor = "default";
});
if (dragFlag == 1) {
Rects[n].on("dragstart", function() {
Rects[n].moveToTop();
layer.draw();
});
Rects[n].on("dragmove", function() {
document.body.style.cursor = "pointer";
});
}
});
但这是行不通的。 无法检查鼠标光标的位置,因此在单击绘制的矩形时,我仍在绘制新的矩形。 有谁知道如何通过鼠标移动来实现绘制以及拖放绘制的形状?
我感谢您的帮助。
好吧,首先尝试使用类似以下的简单调试:
Rects[n].on('mouseover', function() {
dragFlag = 1;
alert('mouse over rectangle'); //check if event fired
document.body.style.cursor = "pointer";
});
真正的问题是您的逻辑变得复杂且快速,您需要对其进行简化和重构。
考虑一下“画图”,您可以使用选择工具,也可以使用线条工具或矩形工具,它们不是由舞台上的事件决定的,而是由用户所处的模式决定的。
因此,您应该做的就是在每次单击按钮时创建按钮并为每个事件分离/重新附加功能。
例
drawLineButton.on('click', function() {
stage.off(); // or whatever function to remove other events from stage
stage.on('mousedown', function() {
draw line logic
});
});
drawRectButton.on('click', function() {
stage.off(); // or whatever function to remove other events from stage
stage.on('mousedown', function() {
draw rectangle logic
});
});
dragButton.on('click', function() {
stage.off(); // or whatever function to remove other events from stage
// now you dont have to worry about stage events firing and can drag shapes
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.