Question

调整方块大小后，会出现碰撞问题GIF animation problem，样本https://jsfiddle.net/8jkxdhfv/。我能做什么？我应该将鼠标坐标转换为变换坐标吗？但是怎么样？如何更新碰撞功能中的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

您正在基于整个窗口获取鼠标位置，而不是画布。一些数学，你会得到你想要的。

G<int>.f

Answer 2

我更新了这个功能，但它确实有效：

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

Javascript / Canvas：缩放（碰撞）后鼠标坐标不匹配

2 个答案: