我正在尝试实现一个应用程序,其中用户可以拖放多个对象在一个给定的区域..我使用html5 canvas标签来实现这一点..当只有一个对象拖放到画布内,那么代码工作正常,但当我尝试拖动多个对象独立的画布内,那么我没有得到所需的输出..
下面是使用draw函数仅拖放一个对象的工作示例
http://jsfiddle.net/KZ99q/
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);
}
我认为在draw()函数中添加更多对象会起作用,所以我在draw()函数中添加了新对象的代码,如以下链接所示
http://jsfiddle.net/KZ99q/1/
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);
ctx.fillStyle = "#ff550d";
rect(x - 25, y - 25, 30, 30);
ctx.fillStyle = "#800080";
rect(x - 35, y - 35, 30, 30);
ctx.fillStyle = "#0c64e8";
rect(x - 45, y - 45, 30, 30);
}
我似乎不能理解我需要在MyMove(),MyUp()和MyDown()函数中进行哪些更改才能使对象彼此独立地移动。
2条答案
按热度按时间nmpmafwu1#
移动1个(或多个)形状时,步骤如下:
创建定义每个图形的对象:
按下鼠标时:
isDragging
标志在鼠标移动中:
在鼠标抬起中:
isDragging
标志下面是带注解的代码和演示:http://jsfiddle.net/m1erickson/qm9Eb/
wqsoz72f2#