캔버스 - 변환에 의한 등각 투영 뷰, 어떤 타일이 마우스인지 확인

Question

캔버스가 변형되면 실제 호버를 타일에 표시하려고합니다.

Problem image

What is working

렌더링 기능 :

ctx.rotate(Math.PI/4) 

에 노력하고 있습니다

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.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 

의