`

createjs碰撞检测localToLocal的用法

 
阅读更多 
<!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 onload="init();">
	<canvas id="demoCanvas" width="300" height="300">
		alternate content
	</canvas>
</body>
</html>

 我把圆放大了，速度减慢了，可以看到这样的现象：圆球和arm的圆球碰撞的时候，并没有变化，而是要到arm的圆球中心点和圆球碰撞时才变化。

这段代码可以证明一点，createjs中这种方法实现的碰撞检测，其实是在检测物体arm在100，0这个位置，转动起来跟物体target是否碰撞，并非是物体arm整个形状是否和target有碰撞。

分享到：
| git clone的错误fatal: HTTP request fail ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics