當縮放畫布然後平移時，現在如果我試圖在畫布內拖動對象，則無法這樣做。但畫布僅平移

Question

1）如果沒有縮放/縮放功能，我可以平移畫布並可以拖動圖像。

2）如果縮放/縮放，可以在畫布內拖動圖像。

3）但是當我縮放後平移畫布，然後如果我想拖動圖像，那麼只是畫布正在平移。無法拖動圖像

在imagesHitTests（x，y）和imagesHitTests2（x，y）中，我們發現在主svg文件上繪製的圖像上點擊。

有點panX和panY。我應該如何解決這個問題？

以下是我的代碼：

var dataJSON = data || []; 
var dataJSON2 = data2 || []; 
window.onload = function(){  
    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d");   

    var canvasOffset=$("#myCanvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var lastX=0; 
    var lastY=0; 
    var panX=0; 
    var panY=0; 
    var dragging=[]; 
    var dragging2=[]; 
    var isDown=false; 

    function loadImages(sources, callback){ 
     var images = {}; 
     var loadImages = 0; 
     var numImages = 0; 
     //get num of sources 
     for(var i in sources){    
     numImages++; 
     } 
     for(var i in sources){    
     images[i] = new Image(); 
     images[i].onload = function(){ 
      if(++loadImages >= numImages){ 
      callback(images); 
      } 
     }; 
     images[i].src = sources[i];    
     } 
    } 

    var sources = {darthVader : '/static/images/orange1.png', yoda : '/static/images/green1.png'}; 


    // load the tiger svg file 
    var svgfiles = ["/static/images/awesome_tiger.svg"];  

    function draw(scaleValue){ 
     ctx.clearRect(0,0,canvas.width,canvas.height);  
     ctx.save(); 
     ctx.drawSvg(svgfiles[0],panX,panY,400*scaleValue, 400*scaleValue); 

     loadImages(sources, function(images){  
     ctx.scale(scaleValue, scaleValue); 
     for(var i = 0, pos; pos = dataJSON[i]; i++) {    
      ctx.drawImage(images.darthVader, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);    
     } 
     for(var i = 0, pos; pos = dataJSON2[i]; i++) {    
      ctx.drawImage(images.yoda, parseInt(parseInt(pos.x) + parseInt(panX)), parseInt(parseInt(pos.y) + parseInt(panY)), 20/scaleValue, 20/scaleValue);    
     } 
     ctx.restore(); 
     }); 

    }; 
    var scaleValue = 1; 
    var scaleMultiplier = 0.8; 
    draw(scaleValue); 
    var startDragOffset = {}; 
    var mouseDown = false;   
    // add button event listeners 
    document.getElementById("plus").addEventListener("click", function(){   
     scaleValue /= scaleMultiplier; 
     //checkboxZoomPan();    
     draw(scaleValue);    
    }, false); 
    document.getElementById("minus").addEventListener("click", function(){ 
     scaleValue *= scaleMultiplier; 
     //checkboxZoomPan();    
     draw(scaleValue);  
    }, false); 
    document.getElementById("original_size").addEventListener("click", function(){ 
     scaleValue = 1; 
     //checkboxZoomPan();    
     draw(scaleValue); 
    }, false); 


    // 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[] 
     loadImages(sources, function(images){ 
     for(var i = 0, pos; pos = dataJSON[i]; i++) {    
      if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){ 
      hits.push(i);    
      }    
     }    
     });   
     return(hits); 
    } 

    function imagesHitTests2(x,y){ 
     // adjust for panning 
     x-=panX; 
     y-=panY; 
     // create var to hold any hits 
     var hits2=[]; 
     // hit-test each image 
     // add hits to hits[] 
     loadImages(sources, function(images){    
     for(var i = 0, pos; pos = dataJSON2[i]; i++) { 
      if(x >= parseInt(parseInt(pos.x) * scaleValue) && x <= parseInt(parseInt(pos.x) * scaleValue + parseInt(20)) && y >= parseInt(parseInt(pos.y) * scaleValue) && y <= parseInt(parseInt(pos.y) * scaleValue + parseInt(20))){ 
      hits2.push(i);     
      }    
     }    
     });   
     return(hits2); 
    } 

    function handleMouseDown(e){ 
     // get mouse coordinates 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     // set the starting drag position 
     lastX=mouseX; 
     lastY=mouseY; 
     // test if we're over any of the images 
     dragging=imagesHitTests(mouseX,mouseY); 
     dragging2=imagesHitTests2(mouseX,mouseY); 
     // set the dragging flag 

     isDown=true; 
    } 

    function handleMouseUp(e){ 
     // clear the dragging flag 
     isDown=false; 
    } 

    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, pos; pos = dataJSON[dragging[i]]; i++) {    
      pos.x = parseInt(pos.x) + parseInt(dx);    
      pos.y = parseInt(pos.y) + parseInt(dy);    
     } 
     } 
     else if(dragging2.length>0){    
     for(var i = 0, pos1; pos1 = dataJSON2[dragging2[i]]; i++) {    
      pos1.x = parseInt(pos1.x) + parseInt(dx);    
      pos1.y = parseInt(pos1.y) + parseInt(dy); 
     }    
     } 
     else{ 
     // we're panning the tiger 
     // set the panXY by how much the mouse has moved 
     panX+=dx; 
     panY+=dy; 
     } 
     draw(scaleValue); 
    } 

    // use jQuery to handle mouse events 
    $("#myCanvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#myCanvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#myCanvas").mouseup(function(e){handleMouseUp(e);}); 
    } 

Answer 1

如果我理解正確的話，您必須對您的規模

你想要做這樣的事情改變形象的座標和寬度\高度 - http://drag.com.hostinghood.com/？