BOX2D.JS如何显示物体图片

最新推荐文章于 2024-08-15 10:08:16 发布

一粒马豆

最新推荐文章于 2024-08-15 10:08:16 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： box2d.js 自定义图片 canvas html5 javascript

本文链接：https://blog.youkuaiyun.com/MAILLIBIN/article/details/48529835

本文介绍如何在BOX2D.JS中显示自定义物体图片。通常，BOX2D.JS仅用debugDraw()绘制简单图形，但通过获取物体的坐标、角度和大小，可以在canvas上绘制自己的图片，实现更丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOX2D.JS原本只会通过debugDraw()绘制简单的示意图，要使用我们自己定义的物体图片并显示出来则需要通过获取BOX2D.JS调制绘制DrawDebugData数据中相关物体的坐标、角度、大小，然后依此自己绘制图片到页面上的canvas。

以下是参考案例

<html>

   <head>
      <title>Box2dWeb example</title>
   </head>
   
   <body onload="init();">
   
      <canvas id="canvas" width="640" height="480"></canvas>
	  
	  <!--把图片预先加载隐藏-->
	  <div id="assets" style="display:none">
        <img id="villa" src="villa.png" />
		<img id="house" src="house.png" />
      </div>
	  
   </body>
   
<script type="text/javascript" src="Box2D.js"></script>
<script type="text/javascript">

function init() {
	var b2Vec2 = Box2D.Common.Math.b2Vec2;
	var b2AABB = Box2D.Collision.b2AABB;
	var b2BodyDef = Box2D.Dynamics.b2BodyDef;
	var b2Body = Box2D.Dynamics.b2Body;
	var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
	var b2Fixture = Box2D.Dynamics.b2Fixture;
	var b2World = Box2D.Dynamics.b2World;
	var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
	var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
	
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
     
	var worldScale = 30;
	
	var world = new b2World(new b2Vec2(0, 10),true);
	
	var canvasPosition = getElementPosition(canvas);
	
	debugDraw();             
	window.setInterval(update,1000/60);
	
	//绘制四面墙壁
	createBox(640,30,320,480,b2Body.b2_staticBody,null);
	createBox(640,30,320,0,b2Body.b2_staticBody,null);
	createBox(30,480,0,240,b2Body.b2_staticBody,null);
	createBox(30,480,640,240,b2Body.b2_staticBody,null);
	
	createBox(64,64,100,400,b2Body.b2_staticBody,document.getElementById("house"));
	createBox(64,64,300,100,b2Body.b2_dynamicBody,document.getElementById("house"));
	
	document.addEventListener("mousedown",function(e){
		createBox(64,64,e.clientX-canvasPosition.x,e.clientY-canvasPosition.y,b2Body.b2_dynamicBody,document.getElementById("villa"));
	});
	
	//绘制物体
	function createBox(width,height,pX,pY,type,data){
		var bodyDef = new b2BodyDef;
		bodyDef.type = type;
		bodyDef.position.Set(pX/worldScale,pY/worldScale);
		//这个userData就是用来存放图片对象的
		bodyDef.userData=data;
		var polygonShape = new b2PolygonShape;
		polygonShape.SetAsBox(width/2/worldScale,height/2/worldScale);
		var fixtureDef = new b2FixtureDef;
		fixtureDef.density = 1.0;
		fixtureDef.friction = 0.5;
		fixtureDef.restitution = 0.5;
		fixtureDef.shape = polygonShape;
		var body=world.CreateBody(bodyDef);
		body.CreateFixture(fixtureDef);
	}
	
	function debugDraw(){
		var debugDraw = new b2DebugDraw();
		debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
		debugDraw.SetDrawScale(30.0);
		debugDraw.SetFillAlpha(0.1);
		debugDraw.SetLineThickness(1.0);
		debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
		world.SetDebugDraw(debugDraw);
	}
	
	function update() { 
		world.Step(1/60,10,10);
	    world.DrawDebugData();
		//绘制渲染到canvas上的过程，其实就是读取世界种所有物体的坐标和角度数据，然后以此绘制物体图片
	     for(var b = world.m_bodyList; b != null; b = b.m_next){
			if(b.GetUserData()){
				context.save();
				context.translate(b.GetPosition().x*worldScale,b.GetPosition().y*worldScale);
				context.rotate(b.GetAngle());
				context.drawImage(b.GetUserData(),-b.GetUserData().width/2,-b.GetUserData().height/2);
				context.restore();
			}
		}
	    world.ClearForces();
	};
	
	//http://js-tut.aardon.de/js-tut/tutorial/position.html
	function getElementPosition(element) {
		var elem=element, tagname="", x=0, y=0;
		while((typeof(elem) == "object") && (typeof(elem.tagName) != "undefined")) {
			y += elem.offsetTop;
			x += elem.offsetLeft;
			tagname = elem.tagName.toUpperCase();
			if(tagname == "BODY"){
				elem=0;
			}
			if(typeof(elem) == "object"){
				if(typeof(elem.offsetParent) == "object"){
					elem = elem.offsetParent;
				}
			}
		}
		return {x: x, y: y};
	}

};


</script>

</html>