Javascript/Canvas: Les coordonnées de la souris ne correspondent pas après la mise à l'échelle (collision)

Question

Après le redimensionnement du carré, il y a un problème de collision, GIF animation problem, échantillon https://jsfiddle.net/8jkxdhfv/. Que puis-je faire? Dois-je les coordonnées de souris non transformées à des coordonnées transformées? Mais comment? Comment puis-je mettre à jour x et y dans ma fonction de collision?

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

J'ai mis à jour la fonction et il fonctionne:

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

Vous obtenez la position de la souris sur la base fenêtre entière, et non pas la toile. Quelques maths et vous obtiendrez ce que vous voulez.

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 
    }; 
}