无法在canvas上使图像可拖动

var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var imageCount = 0, NUM_IMAGES=4; var ctx; var WIDTH; var HEIGHT; //drag var draggable = false; var startX; var startY; //array of images var images=[]; images.push({image:img1, x:0, y:20, width:550, height:466}); images.push({image:img2, x:476, y:170, width:230, height:240}); images.push({image:img3, x:500, y:20, width:635, height:313}); images.push({image:img4, x:910, y:328, width:219, height:134}); function init(){ ctx = $('#myCanvas')[0].getContext("2d"); WIDTH = $("#myCanvas").width(); HEIGHT = $("#myCanvas").height(); ctx.fillStyle = "#A0DCE5"; ctx.fillRect(0,0,WIDTH,HEIGHT); loadResources(); $('#myCanvas').mousedown(onMouseDown); $('#myCanvas').mouseup(onMouseUp); $('#myCanvas').mousemove(onMouseMove); } function startInteraction() { imageCount++; if (imageCount ==NUM_IMAGES) render(); } function loadResources() { img1.onload = startInteraction; img1.src = "america.png"; img2.onload = startInteraction; img2.src = "africa.png"; img3.onload = startInteraction; img3.src = "europe and asia.png"; img4.onload = startInteraction; img4.src = "australia.png"; } function image(image,x,y,width,height) { ctx.drawImage(image,x,y,width,height) } function render() { for(var i=0;i<images.length;i++){ var r=images[i]; image(r.image,rx,ry,r.width,r.height); } } function onMouseDown(e){ // tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); //get current position var mx=parseInt(e.clientX-$('#myCanvas').offset().left); var my=parseInt(e.clientY-$('#myCanvas').offset().top); //test to see if mouse is in image d = false; for(var i=0;irx && mxry && my<r.y+r.height){ //if true set is dragging=true draggable=true; } } //save mouse position startX=mx; startY=my; } function onMouseUp(e){ //tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); draggable = false; for(var i=0;i<images.length;i++){ images[i].isDragging=false; } } function onMouseMove(e){ //if we can drag an image if(draggable){ //tell brower we're handling this mouse event e.preventDefault e.stopPropagation //get current mouseposition var mx = parseInt(e.clientX-$('#myCanvas').offset().left); var my = parseInt(e.clientY-$('#myCanvas').offset().top); //calculate how far the mouse has moved; var dx = mx - startX; var dy = my - startY; //move each image by how far the mouse moved for(var i=0;i<images.length;i++){ var r=images[i]; if(r.isDragging){ r.x+=dx; r.y+=dy; } } //re render the images render(); //reset the mouse positions for next mouse move; startX = mx; startY = my; } } $(document).ready(init); 

我在尝试移动图像时遇到了真正的困难，我看到的每个教程我都能理解它。

有什么令人眼花缭乱的明显我做错了吗？

Answer 1

在canvas上拖动1个以上的图像时，过程为：

在mousedown：

• 获取当前鼠标位置
• 在鼠标下的任何图像上设置isDragging标志
• 保存当前鼠标位置

在mousemove中：

• 获取当前鼠标位置
• 计算鼠标移动的距离（distance = newMousePosition-oldMousePosition）
• 将距离添加到任何正在拖动的图像的位置
• 保存当前鼠标位置
• 用新图像重新绘制场景

在mouseup和mouseout中：

• 清除所有isDragging标志

这是带注释的代码和演示：

 // canvas related stuff var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); var WIDTH = canvas.width; var HEIGHT = canvas.height; ctx.fillStyle = "#A0DCE5"; $myCanvas=$('#myCanvas'); //drag var isDragging = false; var startX; var startY; //array of image objects var images=[]; var NUM_IMAGES=0; // queue up 4 test images addImage(20,20,0.50,'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg'); addImage(240,20,0.50,'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg'); addImage(20,220,0.50,'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg'); addImage(240,220,0.50,'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg'); // trigger all images to load for(var i=0;i0){return;} // set all images width/height for(var i=0;irx && mxry && my 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

  
Drag the images.