javascript - JS 在带边距的 Canvas 上绘制时使用错误的坐标

Question

大家好，我在将 Canvas 与一些基本 CSS 样式一起使用时遇到了问题。

所以我想让自己更熟悉 Canvas 元素，所以我按照 Dev Ed (Youtube) 的教程学习如何使用 Canvas 制作绘图应用程序。

我想通过为线条和背景添加一些颜色选项、添加标题等来稍微升级它。我想居中 Canvas 元素并给它固定大小。

现在，当我尝试使用它时，canvas 使用错误的坐标来绘制线条。

提前致谢。

控制鼠标坐标的代码:

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 10;
  ctx.lineCap = "round";

  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
}

Codepen 上完整代码的链接:https://codepen.io/Skafec/pen/NWKzxrg

Answer 1

我最近为此创建了几个函数。实际坐标是指针位置的组合，使用边界矩形位置进行转换，并应用一个因子(实际大小与显示大小)

function translatedX(x){
    var rect = canvas.getBoundingClientRect();
    var factor = canvas.width / rect.width;
    return factor * (x - rect.left);
}

function translatedY(y){
    var rect = canvas.getBoundingClientRect();
    var factor = canvas.width / rect.width;
    return factor * (y - rect.top);
}

参见 https://codepen.io/fraigo/pen/jONKWaz