画布尺寸

时间:2017-11-20 18:46:42

标签: javascript html5 canvas createjs easeljs

我是createJS工具套件的新手,所以请注意我对一些事情的无知。我试图在我的画布上的各种项目上进行碰撞检测。当画布缩放到865 x 1000px(默认分辨率)时,它工作正常,但当交换到响应/缩放布局时,命中检测停止工作。

我正在使用带有HTML5 Canvas doc类型的Adobe Animate CC(它是这个项目的一个要求,如果我不必使用它就不会使用它),当浏览器窗口缩小时,画布也会缩小,更改其宽度和高度属性从原来的865x1000分辨率。

我修改了我在a code pen上找到的一个函数,它允许它在我的项目中工作,同时只传入一个对象引用。

function intersect(obj1){

var objBounds1 = obj1.getBounds().clone();
var objBounds2;
switch (obj1.name) {
    case "snowBottom":
        objBounds2 = targetBottomRef.getBounds().clone(); 
        break;
    case "snowMiddle":
        objBounds2 = targetMiddleRef.getBounds().clone();
        break;
    case "snowTop":
    case "snowNose":
    case "snowHat":
    case "snowEyes":
        objBounds2 = targetTopRef.getBounds().clone(); 
        break;
}


var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
console.log(pt);


var h1 = -(objBounds1.height / 2 + objBounds2.height);
var h2 = objBounds2.width / 2;
var w1 = -(objBounds1.width / 2 + objBounds2.width);
var w2 = objBounds2.width / 2;



if(pt.x > w2 || pt.x < w1) return false;
if(pt.y > h2 || pt.y < h1) return false;

return true;
}

我有5个可拖动的物体,它们与3个静态放置的&#34;目标&#34; object(targetBottomRef,targetMiddleRef&amp; targetTopRef)。

我已设法追查问题是变量pt;窗户缩放时改变。 h1,h2,w1和w2都保持不变,但是pt会发生变化。

命中检测确实仍然有效,但实际的&#34;交叉&#34;位置完全偏离我正在测试碰撞的实际形状。当我缩小窗口时,这些位置会发生变化。如果我试图测试碰撞的对象直接放在画布的中心,那么它认为它的位置在实际对象的左侧。

编辑:开始在交叉函数show中记录一些变量。 我登录; pt,objBounds2和obj1.x&amp; obj1.y.

PT: [Point (x=290.56847545219637 y=926.4528021055194)]
TARGET: [Rectangle (x=242 y=754.4 width=94 height=94)]
OBJ-CORDS: x=250.33591731266154 - y=759.7384123647649

正如您可以看到OBJ-CORDS(可拖动项目),当访问目标的位置(x = 242 y = 754.4)时,pt仍然在其本地坐标中显示其在x = 290 y = 926处当它应该在x = 0时,y = 0。

0 个答案:

没有答案