Javascript/Canvas：スケーリング（衝突）後にマウス座標が一致しない

Question

四角形のサイズを変更した後に、衝突の問題GIF animation problem、サンプルhttps://jsfiddle.net/8jkxdhfv/があります。私に何ができる？私は変換された座標にuntransformedマウス座標ですか？しかしどうですか？私はどのように私の衝突機能でxとyを更新できますか？

HTML

<canvas id="test" width="480" height="380"></canvas> 
<div id="text">Use mouse wheel to change square size</div> 

JAVASCRIPT

var ctx = test.getContext('2d'); 
var obj = { x:100,y: 100,width: 100,height: 100} 
var mouse = {x:0, y:0, width:10, height:10}; 
var zoom = 1; 

setInterval(function(){ 
    ctx.clearRect(0,0,test.width,test.height); 
    ctx.save(); 

    var cx = obj.x+obj.width/2; 
    var cy = obj.y+obj.height/2; 

    // draw 
    ctx.translate(cx, cy); 
    ctx.scale(zoom,zoom); 
    ctx.translate(-cx,-cy); 
    ctx.fillRect(obj.x,obj.y,obj.width,obj.height); 
    ctx.restore(); 

    // check collision 
    if(collision(obj,mouse)){ 
     ctx.fillText("===== COLLISION =====", 110,90); 
    } 
},1000/60); 

function collision(obj1,obj2){ 
    if(obj1.x < obj2.x + obj2.width * zoom && 
    (obj1.x + obj1.width * zoom) > obj2.x && 
    obj1.y < obj2.y + obj2.height * zoom && 
    (obj1.height * zoom + obj1.y) > obj2.y){ 
     return true; 
    } 
    return false; 
} 

window.addEventListener('mousewheel', function(e){ 
    if(e.deltaY>0 && zoom<2){ 
     zoom+=0.5; 
    } 

    if(e.deltaY<0 && zoom>0.5){ 
     zoom-=0.5; 
    } 
}, false); 

window.addEventListener('mousemove', function(e){ 
    mouse.x = e.pageX; 
    mouse.y = e.pageY; 

}, false); 

Answer 1

私は機能を更新しましたし、それが動作します：答えを

function collision(obj1,obj2){ 
    var eW = (obj1.width-(obj1.width*zoom))/2; 
    var eH = (obj1.height-(obj1.height*zoom))/2; 
    //console.log(eW); 
    if(obj1.x+eW < obj2.x + obj2.width * zoom && 
    (obj1.x + obj1.width * zoom) + eW> obj2.x && 
    obj1.y + eH < obj2.y + obj2.height * zoom && 
    (obj1.height * zoom + obj1.y) + eH > obj2.y){ 
     return true; 
    } 
    return false; 
} 

Answer 2

あなたはウィンドウ全体ではなく、キャンバスに基づいて、マウスの位置を取得しています。いくつかの数学とあなたはあなたが望むものを得るでしょう。

test.addEventListener("mousemove", function(evt) { 
    var mousePos = getMousePos(test, evt); 
    mouse.x = mousePos.x; 
    mouse.y = mousePos.y; 
}); 

function getMousePos(canvas, event) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
    x: event.clientX - rect.left, 
    y: event.clientY - rect.top 
    }; 
}