鼠標光標與畫布不匹配

Question

我有問題：當我在畫布上繪製一條線時，看起來鼠標位置與畫布位置不匹配，所以無論何時畫畫，我的距離光標和描畫線..請幫我解決這個問題，這裏是我的代碼：

$(document).ready(function(){ 

     context = document.getElementById('canvasInAPerfectWorld').getContext("2d"); 


     $('#canvasInAPerfectWorld').mousedown(function(e){ 
      var mouseX = e.pageX - this.offsetLeft; 
      var mouseY = e.pageY - this.offsetTop; 

      paint = true; 
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 
      redraw(); 
     }); 

     $('#canvasInAPerfectWorld').mousemove(function(e){ 
      if(paint){ 
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); 
      redraw(); 
      } 
     }); 


     $('#canvasInAPerfectWorld').mouseup(function(e){ 
      paint = false; 
     }); 

     $('#canvasInAPerfectWorld').mouseleave(function(e){ 
      paint = false; 
     });   

}); 


    var clickX = new Array(); 
    var clickY = new Array(); 
    var clickDrag = new Array(); 
    var paint; 

    function addClick(x, y, dragging) 
    { 
     clickX.push(x); 
     clickY.push(y); 
     clickDrag.push(dragging); 
    } 

    function clear_canvas(){ 
     //alert('masuk claear'); 
     context.clearRect(0,0,context.canvas.width,context.canvas.height); 

    } 

    function redraw(){   

     context.strokeStyle = "#df4b26"; 
     context.lineJoin = "round"; 
     context.lineWidth = 5; 

     for(var i=0; i < clickX.length; i++) {   
     context.beginPath(); 
     if(clickDrag[i] && i){ 
      context.moveTo(clickX[i-1], clickY[i-1]); 
     }else{ 
      context.moveTo(clickX[i]-1, clickY[i]); 
     } 
     context.lineTo(clickX[i], clickY[i]); 
     context.closePath(); 
     context.stroke(); 
     } 
    } 

Answer 1

內，您的鼠標事件處理，this指窗口對象和你this.offsetLeft是不確定的。

您可以使用getBoundingClientRect讓你的canvas元素的界限：

// get a reference to your canvas element at the start of your app 
var canvas=document.getElementById('canvasInAPerfectWorld'); 

// example mousedown handler 

// get the current canvas offsets using getBoundingClientRect 
var BB=canvas.getBoundingClientRect(); 
var offsetX=BB.left; 
var offsetY=BB.top;   

// calculate the current mouse position relative to the canvas 
// using e.client and the offsets calculated above 
var mouseX=parseInt(e.clientX-offsetX); 
var mouseY=parseInt(e.clientY-offsetY); 

如果你的畫布不會相對於重新定位視口，你可以在你的應用程序開始時的偏移一度讓他們不每次在鼠標處理程序中都不需要重新計算。

Answer 2

您可以按照markE的答案中的解決方案（也可以找到here）。

或者你可以做到以下幾點，如果你的佈局允許相對

使用layerX和layerY讀取鼠標位置

這種做法給出了一個

• 設置畫布元素位置簡單一點的代碼。

  這兩種方法都會受到填充和邊框厚度的影響（如果使用的話，它們需要被減去）。如果你想邊框/填充，最好將畫布包裝在一個div中，然後改變div的樣式。

  實施例使用相對定位畫布

  var c = document.querySelector("canvas"), 
   
      ctx = c.getContext("2d"); 
   
  
   
  ctx.font = "bold 16px sans-serif"; 
   
  
   
  c.onmousemove = function(e) { 
   
      
   
      var x = e.layerX, 
   
       y = e.layerY; 
   
  
   
      ctx.clearRect(0, 0, 300, 20); 
   
      ctx.fillText("x: " + x + ", y: " + y, 10, 16); 
   
  };

  div {padding:20px} 
   
  canvas {background:#eee; position:relative}

  <div><div><canvas></canvas></div></div>

  實施例使用getBoundingClientRect（）

  var c = document.querySelector("canvas"), 
   
      ctx = c.getContext("2d"); 
   
  
   
  ctx.font = "bold 16px sans-serif"; 
   
  
   
  c.onmousemove = function(e) { 
   
      
   
      var rect = this.getBoundingClientRect(), 
   
       x = e.clientX - rect.left, 
   
       y = e.clientY - rect.top; 
   
  
   
      ctx.clearRect(0, 0, 300, 20); 
   
      ctx.fillText("x: " + x + ", y: " + y, 10, 16); 
   
  };

  div {padding:20px} 
   
  canvas {background:#eee; position:relative}

  <div><div><canvas></canvas></div></div>