您的位置：首页 > Web前端 > JavaScript

BOX2D.JS如何显示物体图片

2015-09-17 21:43 1081 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

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

相关文章推荐

新的分享

章节导航