Javascript 使用mousemove绘制形状,使用kineticjs拖放并调整大小-kineticjs
我正在使用KineticJS开发一个简单的绘画程序。我要实现的是用鼠标移动绘制一个矩形、直线或圆形,并且可以用鼠标拖动或调整绘制的形状大小。我的问题是,我必须使用Javascript 使用mousemove绘制形状,使用kineticjs拖放并调整大小-kineticjs,javascript,jquery,canvas,kineticjs,Javascript,Jquery,Canvas,Kineticjs,我正在使用KineticJS开发一个简单的绘画程序。我要实现的是用鼠标移动绘制一个矩形、直线或圆形,并且可以用鼠标拖动或调整绘制的形状大小。我的问题是,我必须使用mousedown和mousemove事件来绘制,但我无法同时实现拖放或调整大小 以下是我的绘图代码: stage.on("mousedown", function() { if ((drawFlag == 1) && (dragFlag == 0)) { if (moving) {
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";
});
}
});
for(var n=0;n
但它不起作用。无法检查鼠标光标的位置,因此我在单击绘制的矩形时仍在绘制一个新矩形。有人知道如何通过鼠标移动实现绘制,并在绘制的形状上进行拖放吗
非常感谢您的帮助。首先,请尝试使用以下简单的方法进行调试:
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
});
建立一个JSFIDLE,以便社区能够帮助您