<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: localToLocal</title>
<style type="text/css">
body {
margin: 0;
padding: 7px;
background-color: rgba(255,255,255,0);
}
canvas {
border: solid 1px rgba(0,0,0,0.05);
}
</style>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, arm;
function init() {
stage = new createjs.Stage("demoCanvas");
target = stage.addChild(new createjs.Shape());
target.graphics.beginFill("red").drawCircle(0,0,45)
.beginFill("white").drawCircle(0,0,30)
.beginFill("red").drawCircle(0,0,15);
target.x = 100;
target.y = 180;
arm = stage.addChild(new createjs.Shape());
arm.graphics
.beginFill("black").drawRect(-2,-2,100,4)
.beginFill("blue").drawCircle(100,0,30);
arm.x = 180;
arm.y = 100;
createjs.Ticker.on("tick", tick);
}
function tick(event) {
arm.rotation += 1;
target.alpha = 0.2;
var pt = arm.localToLocal(100, 0, target); // 传递的是红色小球圆心位置
if (target.hitTest(pt.x, pt.y)) { target.alpha = 1; }
stage.update(event);
}
</script>
</head>
<body οnlοad="init();">
<canvas id="demoCanvas" width="300" height="300">
alternate content
</canvas>
</body>
</html>
我把圆放大了,速度减慢了,可以看到这样的现象:圆球和arm的圆球碰撞的时候,并没有变化,而是要到arm的圆球中心点和圆球碰撞时才变化。
这段代码可以证明一点,createjs中这种方法实现的碰撞检测,其实是在检测物体arm在100,0这个位置,转动起来跟物体target是否碰撞,并非是物体arm整个形状是否和target有碰撞。