javascript - 在 Canvas 上获取鼠标坐标的边框偏移

Question

我尝试在具有在 CSS 中定义的边框的 Canvas 上获取鼠标坐标。首先，我使用了在 this link 上找到的解决方案获取鼠标在 Canvas 上的坐标:

 function getPosition(event)
      {
        var x = new Number();
        var y = new Number();
        var canvas = document.getElementById("canvas");

        if (event.x != undefined && event.y != undefined)
        {
          x = event.x;
          y = event.y;
        }
        else // Firefox method to get the position
        {
          x = event.clientX + document.body.scrollLeft +
              document.documentElement.scrollLeft;
          y = event.clientY + document.body.scrollTop +
              document.documentElement.scrollTop;
        }

        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;

      }

solution 1这种方法的结果。可以看到坐标偏移了 10 个像素，即 Canvas 边框的宽度。

为了解决这个边框宽度的问题，我这样修改:

   var computedStyle = window.getComputedStyle(canvas,null);
var topBorder = parseInt(computedStyle.getPropertyValue("border-top-width"),10);
var leftBorder = parseInt(computedStyle.getPropertyValue("border-left-width"),10);

// (x,y) coordinates
x -= canvas.offsetLeft + leftBorder;
y -= canvas.offsetTop + topBorder;

但这不是很好:我在 Angular 落有一个光移动(1 或 2 像素移动)；您可以在 solution 2 上看到此修改的结果

我也试过:

function getPosition(event) {

    var x, y;
    var rect = canvas.getBoundingClientRect();
    var computedStyle = window.getComputedStyle(canvas,null);
    var topBorder = parseInt(computedStyle.getPropertyValue("border-top-width"),10);
    var leftBorder = parseInt(computedStyle.getPropertyValue("border-left-width"),10);

    var x = event.clientX - rect.left - leftBorder;
    var y = event.clientY - rect.top - topBorder;

    // Display coordinates
    xspan.innerHTML = x;
    yspan.innerHTML = y;

  }

结果显示在 solution 3 上并且板的内 Angular 仍然有 1、2 个像素的光偏移。

我想将 (0,480) 鼠标坐标放在 Canvas 的左内 Angular ，(0,0) 放在左上角，(480,0) 放在右上角，(480,480) 放在右上角底 Angular 。

如何处理边框宽度的“10 像素”(参见 CSS)？

我让您注意到，在调用 getPosition 之前，我已将 0.5px 添加到所有 Canvas 坐标，因为例如，一条在 i=1 处绘制的带边框的线-宽度等于 1，必须在 x = 0.5 处绘制。

如果有人能给我建议，让我在考虑到边框宽度的情况下在此 Canvas 上获得有效坐标。

谢谢

Answer 1

边框

照@markE 说的做，包装你的<canvas> div 中的元素:

<div id="game-wrapper">
  <canvas id="game" width="481" height="481">
</canvas>

然后给 game-wrapper 加上边框分区也制作game-wrapper成为display: inline-block;所以边框在 Canvas 周围正确布局。

那么你的整个坐标脚本可能是这样的:

function getPosition(event) {
  var x = event.layerX;
  var y = event.layerY;
}

光标

除此之外，我认为您真正的问题是光标的枢轴点不在光标的尖端，而是距它几个像素(至少在 OSX 中)。您可以通过将光标更改为十字准线来观察这一点:

cursor: crosshair;

坐标系

您还询问了进行坐标系转换的有效方法。我发现有一些功能可以将“游戏中”坐标转换为实际 Canvas 坐标并返回。在您的情况下，您绘制的 0.5px 线:

function Vector2(x,y) {
  this.x = x;
  this.y = y;
}

Vector2.prototype.toGameCoordinates() {
  return new Vector2(
    this.x - 0.5,
    this.y - 0.5
  );
}

Vector2.prototype.toCanvasCoordinates() {
  return new Vector2(
    this.x + 0.5,
    this.y + 0.5
  );
}