Указатель мыши не совпадает с холстом

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, чтобы получить границы вашего холста элемента:

// 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); 

Если вы холст не переставить относительно окна просмотра, вы можете получить зачеты один раз в начале вашего приложения, чтобы они надевают 't нужно пересчитывать каждый раз внутри обработчика мыши.

Answer 2

Вы можете найти решение проблемы с ответом markE (также найдено here).

Или вы могли бы сделать следующее, если ваш макет позволяет

• Установить холст элемент в положение относительно
• Использование layerX и layerY прочитать положение мыши

Такой подход дает немного более простой код.

На оба метода будет влиять заполнение и ширина границы (их нужно вычесть, если они используются). Если вы хотите border/padding, лучше обернуть холст в 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>