問題描述
我正在嘗試實現一個應用程序，其中用戶可以在給定區域內拖放多個對象..我正在使用 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
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() 函數中添加了新對象的代碼，如此鏈接所示
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
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() 函數中進行哪些更改才能使對象彼此獨立移動..請幫忙
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});
在鼠標按下時:
- 獲取當前鼠標位置
- 在鼠標下方的任何形狀上設置
isDragging標志 - 保存當前鼠標位置
在鼠標移動中:
- 獲取當前鼠標位置
- 計算鼠標移動了多遠(距離 = newMousePosition-oldMousePosition)
- 將距離添加到拖動的任何形狀的位置
- 保存當前鼠標位置
- 用新位置的形狀重繪場景
在鼠標上移:
- 清除所有
isDragging標志
這里是注釋代碼和演示: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 Canvas 中拖放多個對象的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！