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

Canvas stroke is offset when not in the top left corner

本文关键字：布笔划 左上角      更新时间：2023-09-26

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

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

尝试使用offsetX和offsetY而不是clientX和clientY。但有些浏览器无法识别offsetX和offsetY，所以可以尝试layerX和layerY，但在chrome中不推荐使用。另一个选项是分别减去客户端Y和客户端X的顶部偏移量和左侧偏移量。这是您使用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 };
}

您可以使用.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;
    // ...
}
相关文章：