Question

我在画布上尝试了一个基本的笔触。在我添加工具栏和图库之前，一切都很顺利。现在，笔划偏离鼠标按下和鼠标移动动作。有什么建议吗？

var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
var radius = 10
var dragging = false;

var canvasArea = document.getElementById('canvasArea');

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
canvas.width = 500;
canvas.height = 500;
//canvasArea.style.left = "0px";
//canvasArea.style.top = "0px";
//canvasArea.style.position = "relative";



context.lineWidth = radius*2;

var putPoint = function(e){
    if(dragging){
        context.miterLimit = 1;
        context.lineTo(e.clientX, e.clientY);
        context.stroke();
        context.beginPath();
        context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.clientX, e.clientY);
    }

}
var engage = function(e){
    dragging=true;  
    putPoint(e);

}
var disengage = function(e){

    dragging=false; 
    context.beginPath();

}


canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);// JavaScript Document
canvas.addEventListener('mouseup', disengage);

Answer 1

尝试使用offsetX和offsetY而不是clientX和clientY。但是有些浏览器无法识别offsetX和offsetY，所以尝试使用layerX和layerY，但是在chrome中不推荐使用它。另一个选择是减去客户端y和clientX resp的偏移顶部和偏移量。 Here是您使用offsetX和offsetY更新的代码。

或者您也可以使用此功能获得精确的偏移量

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

  return { x: x, y: y };
}

Answer 2

您可以使用.getBoundingClientRect来调整页面的画布位置和页面滚动量的鼠标位置：

function handleMousedown(e){
    var BB=canvas.getBoundingClientRect();
    var mouseX=e.clientX-BB.left;
    var mouseY=e.clientY-BB.top;
    // ...
}

如果您知道页面不会滚动，则可以通过缓存左侧和右侧来提高性能。顶部抵消一次并重复使用它们：

var BB=canvas.getBoundingClientRect();
var bbLeft=BB.left;
var bbTop=BB.top;

function handleMousedown(e){
    var mouseX=e.clientX-bbLeft;
    var mouseY=e.clientY-bbTop;
    // ...
}

不在左上角时，画布笔划会偏移

2 个答案: