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

经过一些头脑风暴后找到解决方案;在变换后找到鼠标位置

{{1}}

画布 - 通过变换的等轴视图，确定

1 个答案: