画布笔划不在左上角时偏移答案

【问题标题】：Canvas stroke is offset when not in the top left corner画布笔划不在左上角时偏移
【发布时间】：2014-10-21 04:17:13
【问题描述】：

我在画布上尝试了基本的笔画。一切都很顺利，直到我添加了一个工具栏和一个画廊。现在，笔画从鼠标向下和鼠标移动动作偏移。有什么建议吗？

http://jsfiddle.net/embrande/5aggd34h/

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

【问题讨论】：

标签： javascript jquery canvas offset

【解决方案1】：

尝试使用 offsetX 和 offsetY 代替 clientX 和 clientY。但是有些浏览器无法识别 offsetX 和 offsetY，所以尝试 layerX 和 layerY 但它在 chrome 中已被弃用。另一种选择是分别从 clientY 和 clientX 减去上偏移和左偏移。 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 };
}

【讨论】：

【解决方案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;
    // ...
}

【讨论】：