如何在Canvas中拖动图像/对象？

1）在canvas上我用drawSvg（canvg）绘制SVG文件（awesome_tiger.svg）。

2）在那个SVG文件上，我正在绘制图像* （green1.png和pink.png） *，其坐标来自JSON。

var dataJSON = data || []; var dataJSON2 = data2 || []; 

3）所以在我能够用draw1（scaleValue）平移完整的绘图。

4）当我点击green.png和pink.png时，他们各自的工具提示能够查看在tooltipFunc函数中完成的操作 。

5）我想要做的是，当点击green.png / pink.png并拖动它时我应该能够拖动那些图像而不是Svg文件。 如果我单击svg文件并拖动它，那么正常的平移应该可以正常工作。

有人可以帮忙吗？

“其他人参考我的问题：”这个主题的内容在下面提到，我在stackoverflow链接上得到了这个。 借助于此，任何人都可以帮助我解决项目需求问题吗？

以下是我的源代码：

JSON数据：

 data = [ { "id" :["first"], "x": ["195"], "y": ["150"], "tooltiptxt": ["Region 1"] }, { "id" :["second"], "x": ["255"], "y": ["180"], "tooltiptxt": ["Region 2"] }, { "id" :["third"], "x": ["200"], "y": ["240"], "tooltiptxt": ["Region 3"] } ]; data2 = [ { "id" :["first2"], "x": ["225"], "y": ["150"], "tooltiptxt": ["Region 21"] }, { "id" :["second2"], "x": ["275"], "y": ["180"], "tooltiptxt": ["Region 22"] }, { "id" :["third3"], "x": ["300"], "y": ["240"], "tooltiptxt": ["Region 23"] } ]; Javascript Code: var dataJSON = data || []; var dataJSON2 = data2 || []; window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); var tooltip = null, timer; //svg file and png files are collected in files. var files = ["/static/images/awesome_tiger.svg", "/static/images/green1.png", "/static/images/pink.png"], images = [], numOfFiles = files.length, count = numOfFiles; /// function to load all images in one go function loadImages() { /// go through array of file names for(var i = 0; i = parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) && x = parseInt(dataJSON[i].y[0] * scaleValue) && y = parseInt(parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX)) && x = parseInt(parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY)) && y = parseInt(parseInt(dataJSON2[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX)) && x = parseInt(parseInt(dataJSON2[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY)) && y <= parseInt(parseInt(dataJSON2[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY) + parseInt(20))) { clearTooltip(); showTooltip2(e.clientX, e.clientY, i); inTooltip = true; } } } } } 

其他人参考我的问题：

         var canvas = $("#c"); var c = canvas[0].getContext("2d"); //var path = "http://sofzh.miximages.com/javascript/94"; var path2 = "purple.jpg"; var image1 = new DragImage(path, 200, 100); var image2 = new DragImage(path2, 300, 100); var loop = setInterval(function() { c.fillStyle = "gray"; c.fillRect(0, 0, 500, 500); image1.update(); image2.update(); }, 30); var mouseX = 0, mouseY = 0; var mousePressed = false; var dragging = false; canvas.mousemove(function(e) { mouseX = e.offsetX; mouseY = e.offsetY; }) $(document).mousedown(function() { mousePressed = true; }).mouseup(function() { mousePressed = false; dragging = false; }); function DragImage(src, x, y) { var that = this; var startX = 0, startY = 0; var drag = false; this.x = x; this.y = y; var img = new Image(); img.src = src; this.update = function() { if (mousePressed ) { var left = that.x; var right = that.x + img.width; var top = that.y; var bottom = that.y + img.height; if (!drag) { startX = mouseX - that.x; startY = mouseY - that.y; } if (mouseX  left && mouseY  top) { if (!dragging){ dragging = true; drag = true; } } } else { drag = false; } if (drag) { that.x = mouseX - startX; that.y = mouseY - startY; } c.drawImage(img, that.x, that.y); } }    

Answer 1

希望我理解你的问题……！

以下是在canvas上平移canvas和拖动对象的方法

这说明了在任何拖动或平移之前的canvas：

注意绿色的矩形在老虎的左眼上方。

这说明了将绿色矩形拖到右眼后的canvas：

这说明了平移后的canvas。

老虎和所有牧场都将同时平移。

大多数重要代码都在mousedown和mousemove事件处理程序中

在mousedown上：

• 如果鼠标超过1+彩色图像，则拖动图像。
• 如果鼠标未覆盖任何彩色图像，则平移canvas。

这是mousedown代码：

 function handleMouseDown(e){ // get mouse coordinates mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // set the starting drag position // this is needed in mousemove to determine how far we have dragged lastX=mouseX; lastY=mouseY; // test if we're over any of the images // if yes, put those image(s) in an array called dragging dragging=imagesHitTests(mouseX,mouseY); // set the dragging flag isDown=true; } 

在mousemove上：

• 确定我们是否正在拖动或平移。
• 如果dragging []数组不为空，我们就是拖动。
• 如果dragging []数组为空，我们正在平移。
• 拖动时，将每个拖动图像的XY更改为我们拖动的量。
• 平移时，将鼠标位置改变拖动量。

这是mousemove代码：

 function handleMouseMove(e){ // if we're not dragging, exit if(!isDown){return;} //get mouse coordinates mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // calc how much the mouse has moved since we were last here var dx=mouseX-lastX; var dy=mouseY-lastY; // set the lastXY for next time we're here lastX=mouseX; lastY=mouseY; // handle drags/pans if(dragging.length>0){ // we're dragging images // move all affected images by how much the mouse has moved for(var i=0;i 

这里是用于确定鼠标下哪些颜色图像的代码 - 并且将被拖动。

鼠标下的任何彩色图像都会添加到名为“拖动”的数组中。

此拖动[]数组用于鼠标移动以拖动适当的彩色图像。

  // create an array of any "hit" colored-images function imagesHitTests(x,y){ // adjust for panning x-=panX; y-=panY; // create var to hold any hits var hits=[]; // hit-test each image // add hits to hits[] for(var i=0;iimg.x && ximg.y && y 

这是完整的代码和小提琴： http ： //jsfiddle.net/m1erickson/pbRq2/