Question

我尝试在CSS上定义边框的画布上获取鼠标坐标。首先，我使用this link上找到的解决方案来获取鼠标在画布上的坐标：

 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像素，即画布边框的宽度。

要修复此边框宽度问题，我修改如下：

   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;

但这并不能很好地发挥作用：我在角落处有一个轻微的移位（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上，而且电路板的内角仍有1,2个像素的轻微移位。

我想将（0,480）鼠标坐标放在画布的左下角，（0,0）位于内左上角，（480,0）位于右上角，（480,480）位于右上角底角。

如何处理＆＃34; 10像素＆＃34;边框宽度（见CSS）？

我告诉你，在调用getPosition之前，我已经为所有画布坐标添加了0.5px，例如，在i=1绘制的边框宽度等于1的线条必须是在x = 0.5处绘制。

如果有人可以考虑到边框宽度，可以给我建议在此画布上获取有效坐标。

由于

Answer 1

边界

执行@markE并将您的<canvas>元素包装在div中：

＆＃13;

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

＆＃13;

并将边框指向game-wrapper div。同时将game-wrapper设为display: inline-block;，以便边框在画布周围正确布局。

然后你的整个坐标脚本就是这样：

＆＃13;

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

＆＃13;

光标

除此之外，我认为你的真正问题是光标的枢轴点不在光标的尖端，而是远离它的几个像素（至少在OSX中）。您可以通过将光标更改为十字准线来观察此情况：

＆＃13;

cursor: crosshair;

＆＃13;

坐标系

您还询问了进行坐标系转换的有效方法。我发现有一些功能可以翻译游戏中的＆＃34;游戏＆＃34;坐标到实际画布坐标并返回。在您的情况下，您绘制的是0.5px线：

＆＃13;

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

＆＃13;

在画布上获取鼠标坐标的边框偏移量

1 个答案:

边界

光标

坐标系