Box2dWeb介绍：HTML5自定义图片创建Box2d项目

当我第一次介绍Box2dWeb：使用HTML5开发Box2d项目，一些读者想知道怎样自定义图片，可以替换范例中的盒子。

所以下面我就会详细介绍怎样自定义图片，与AS3相比没有特别大的区别。

首先我把一个木箱的图片加到网页中，把它放在隐藏层里。请注意第9行~第11行代码。

       
               
               
               
       
       
               
               

                       
               

         

然后我需要定义 getContext("2d")对象。这是Box2d的内置对象，它包含很多属性和方法，比如画路径，画圆，画矩形，画文字，图片等等。请注意第13行代码。

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

       document.addEventListener("mousedown",function(e){
               createBox(64,64,e.clientX-canvasPosition.x,e.clientY-canvasPosition.y,b2Body.b2_dynamicBody,document.getElementById("crate"));
       });

       function createBox(width,height,pX,pY,type,data){
               var bodyDef = new b2BodyDef;
               bodyDef.type = type;
               bodyDef.position.Set(pX/worldScale,pY/worldScale);
               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.5);
               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();
            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};
       }

};

所有Box2d项目的刷新代码都是一样的。整个例子的核心你可以在下面5行代码中找到。

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();

HTML5显示图片的机制与AS3相比，最大的区别在于HTML5需要存储图片，然后对图片进行操作，最后显示在舞台上，而AS3直接显示图片，并可以对图片进行操作。

这是范例的最终效果：



在画布上点击，创建木箱。
原文地址: http://news.9ria.com/2012/1206/25559.html