画布 - 等距视图通过变换，确定鼠标上的瓷砖

Question

当画布转换时，我正在尝试在瓷砖上进行实际悬停。

问题图像

什么在工作

渲染函数：

ctx.save()
ctx.transform(1, 0.5, -1, 0.5, 250, 150)
// ctx.setTransform(1, 0.5, -1, 0.5, 250, 150)
Terrain.forEach((line, lineNumber) => {
  line.forEach((tile, blockNumber) => {
    const block = new Block({
      ...resolveBlock(tile),
      position: {
        x: blockNumber * 32 + 250,
        y: lineNumber * 32
      },
      size: {
        width: 32,
        height: 32
      }
    })
    // check if the mouse position is on tile
    block.mousePos(frameNow)
    block.render()
  })
})
ctx.restore()

Mousepos 在

上使用的功能

ctx.rotate(Math.PI / 4)

，但不在完整的ctx.transform（...）甚至CTX.Scale（1，0.5）

上

function mousePos() {
  let currentX =
    mousePos.x * Math.cos(-(Math.PI / 4)) -
    mousePos.y * Math.sin(-(Math.PI / 4))
  let currentY =
    mousePos.x * Math.sin(-(Math.PI / 4)) +
    mousePos.y * Math.cos(-(Math.PI / 4))
  if (
    currentX >= this.position.x &&
    currentX <= this.position.x + this.size.width - 1 &&
    currentY >= this.position.y &&
    currentY <= this.position.y + this.size.height - 1
  ) { // change color of hovered tile... }
}

感谢您的时间。

Answer 1

在头脑风暴后找到了解决方案；在变换后找到鼠标位置

const invertedTransform = ctx.mozCurrentTransformInverse()
// sadly there is no currentTransformInverse in all browsers yet
const wX =
  mousePos.x * invertedTransform.a +
  mousePos.y +
  invertedTransform.c +
  invertedTransform.e
const wY =
  mousePos.x * invertedTransform.b +
  mousePos.y +
  invertedTransform.d +
  invertedTransform.f