如何从转换后的楼层地图中正确计算坐标？

Question

我有一个上下文，我在其中绘制了几个矩形。然后上下文应用了转换，将其变成平面图的 3D 幻觉。我正在尝试创建一个公式来计算光标悬停在哪个坐标上，而不使用 Path2Ds。这是因为我需要能够计算出它是什么坐标，即使没有绘制瓷砖，而是无论如何都在网格上。变换矩阵有...水平的缩放1.0倾斜的0.5移动(columns * 32)（列数：6）垂直的缩放0.5倾斜的-1.0移动的0借助Real mouse position in canvas的答案，我相信我走在正确的道路上，但是，当鼠标向下和向左移动时，尽管在同一列上，列也会减少。向右下行时，尽管在同一行，行也会减少。我没有使用任何框架（但 JQuery 除外，与问题无关）。我怎样才能计算出准确的坐标？

Answer 1

您调用setTransform(a, b, c, d, e, f)创建一个 3x3仿射变换矩阵：

|  a  c  e  |

|  b  d  f  |

|  0  0  1  |

给定您当前的值 (1, 0.5, -1, 0.5, n, 0) 有一个逆矩阵：

|  0.5     1  -n/2  | 

| -0.5     1  +n/2  |

|    0     0     1  |

将该变换矩阵应用于您的鼠标坐标（需要表示为 1x3 矩阵[x, y, 1]应提供所需的网格坐标：

const rows = 10;

const columns = 6;

const $coordinate = $("#coordinate");

const $canvas = $("#canvas");

canvas.width = (rows * 32) + (columns * 32);

canvas.height = (rows * 16) + (columns * 16);

const context = $canvas[0].getContext("2d");

context.imageSmoothingEnabled = false;

context.save();

  

context.fillStyle = "white";

context.setTransform(1, 0.5, -1, 0.5, (columns * 32), 0);

// (a) horizontal scaling: 1

// (b) horizontal skewing: 0.5

// (c) vertical skewing: -1

// (d) vertical scaling: 0.5

// (e) horizontal moving: (columns * 32)

// (f) vertical moving: 0

for(let row = 0; row < rows; row++) {

  for(let column = 0; column < columns; column++) {

    context.rect(row * 32, column * 32, 31.5, 31.5);

  }

}

context.fill();

$canvas.mousemove(function(e) {

    const position = {

    left: e.pageX - $canvas.offset().left,

    top: e.pageY - $canvas.offset().top

  };

  

  const innerPosition = {

    left: position.left * 0.5 + position.top - (columns * 32) / 2,

    top: position.left * -0.5 + position.top + (columns * 32) / 2

  };

    const coordinate = {

    row: Math.floor(innerPosition.top / 32),

    column: Math.floor(innerPosition.left / 32)

  };

  

  $coordinate.html(coordinate.row + "x" + coordinate.column);

});

#canvas {

  background: green;

}

#coordinate {

  position: absolute;

  font-family: Arial, sans-serif;

  font-size: 16px;

  left: 12px;

  top: 12px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="canvas"></canvas>

<div id="coordinate">0x0</div>

Answer 2

只是一个想法：为什么不尝试在您的 html 中制作一个平面图（使用 div），使用 CSS 对其进行样式设置以匹配画布平面图的位置，然后将其隐藏。这样你就可以用 jquery 检测悬停在 div 上，并使用 div 的坐标来找出画布上应该更改哪个矩形？我现在正在打电话，但 5 分钟后我可以在 jsfiddle 上快速演示