在HTML5画布中拖放多个对象 [英] Drag and Drop Multiple Objects in HTML5 Canvas
问题描述
我想实现一个应用程序,其中用户可以拖放一个给定区域内的多个对象。我使用html5 canvas标签来实现这个。当只有一个对象拖放内画布然后代码工作正常,但是当我尝试在画布中独立拖动多个对象,然后我没有得到所需的输出..
I'm trying to implement an application in which the user can drag and drop multiple objects inside a given area..I'm using html5 canvas tag to implement this..When there is only one object to drag and drop inside the canvas then the code is working fine, but when i try to drag multiple objects independently inside the canvas then i'm not getting the desired output..
这里是使用绘制函数只拖动一个对象的工作示例
Here is the working example of drag and drop of only one object with the draw function
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rect(x - 15, y - 15, 30, 30);
}
在draw()函数中,我将在draw()函数中添加新对象的代码,如下所示:
I thought adding more objects in draw() function will do so i added code for new objects in the draw() function like shown in this link
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);
}
我似乎无法理解我需要在
请帮助
I can't seem to understand what changes do i need to make in the MyMove(), MyUp() and MyDown() functions to make the objects move independently of one another.. Please Help
推荐答案
当移动1个(或多个)形状时,过程是:
When moving 1 (or more) shapes, the procedure is:
创建定义每个形状的对象:
Create objects that define each shape:
// an array of objects that define different rectangles
var rects=[];
rects.push({x:75-15,y:50-15,width:30,height:30,fill:"#444444",isDragging:false});
rects.push({x:75-25,y:50-25,width:30,height:30,fill:"#ff550d",isDragging:false});
rects.push({x:75-35,y:50-35,width:30,height:30,fill:"#800080",isDragging:false});
rects.push({x:75-45,y:50-45,width:30,height:30,fill:"#0c64e8",isDragging:false});
在mousedown:
In mousedown:
- 获取当前鼠标位置
- 在鼠标下方的任何形状上设置
isDragging
b $ b - 保存当前鼠标位置
- get the current mouse position
- set the
isDragging
flag on any shape that is under the mouse - save the current mouse position
在mousemove中:
In mousemove:
- 获取当前鼠标位置
- 计算鼠标移动的距离(distance = newMousePosition-oldMousePosition)
- 保存当前鼠标位置
- 重新绘制具有新位置形状的场景
- get the current mouse position
- calculate how far the mouse has moved ( distance = newMousePosition-oldMousePosition )
- add the distance to the position of any shape that isDragging
- save the current mouse position
- redraw the scene with shapes in their new positions
在mouseup中:
- 清除所有
isDragging
flags
- clear all
isDragging
flags
这是注释代码和演示: http://jsfiddle.net/m1erickson/qm9Eb/
Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/qm9Eb/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
window.onload=function(){
// get canvas related references
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
// drag related variables
var dragok = false;
var startX;
var startY;
// an array of objects that define different rectangles
var rects=[];
rects.push({x:75-15,y:50-15,width:30,height:30,fill:"#444444",isDragging:false});
rects.push({x:75-25,y:50-25,width:30,height:30,fill:"#ff550d",isDragging:false});
rects.push({x:75-35,y:50-35,width:30,height:30,fill:"#800080",isDragging:false});
rects.push({x:75-45,y:50-45,width:30,height:30,fill:"#0c64e8",isDragging:false});
// listen for mouse events
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;
// call to draw the scene
draw();
// draw a single rect
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
// clear the canvas
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
// redraw the scene
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
// redraw each rect in the rects[] array
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.fillStyle=r.fill;
rect(r.x,r.y,r.width,r.height);
}
}
// handle mousedown events
function myDown(e){
// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();
// get the current mouse position
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
// test each rect to see if mouse is inside
dragok=false;
for(var i=0;i<rects.length;i++){
var r=rects[i];
if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){
// if yes, set that rects isDragging=true
dragok=true;
r.isDragging=true;
}
}
// save the current mouse position
startX=mx;
startY=my;
}
// handle mouseup events
function myUp(e){
// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();
// clear all the dragging flags
dragok = false;
for(var i=0;i<rects.length;i++){
rects[i].isDragging=false;
}
}
// handle mouse moves
function myMove(e){
// if we're dragging anything...
if (dragok){
// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();
// get the current mouse position
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
// calculate the distance the mouse has moved
// since the last mousemove
var dx=mx-startX;
var dy=my-startY;
// move each rect that isDragging
// by the distance the mouse has moved
// since the last mousemove
for(var i=0;i<rects.length;i++){
var r=rects[i];
if(r.isDragging){
r.x+=dx;
r.y+=dy;
}
}
// redraw the scene with the new rect positions
draw();
// reset the starting mouse position for the next mousemove
startX=mx;
startY=my;
}
}
}; // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于在HTML5画布中拖放多个对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!