Box2dweb:向形状添加图像
Box2dweb:向形状添加图像
提问于 2013-11-04 22:46:50
我真的很难使用jquery和box2dweb将图片添加到形状中。我的代码基于这里的一个很好的例子：http://henry.brown.name/experiments/box2d/bricks.php
图片绑定取自此处：http://www.jeremyhubble.com/box2d.html
我已经在下面粘贴了名为createObject的函数，并在注释中标记了添加的内容。我正在使用userdata传递src，然后回溯添加图像，但我似乎就是无法让图像出现。我也没有收到任何错误信息。
function createObject(mouseX,mouseY,width,height,gravity){
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(mouseX, mouseY);
bodyDef.angle = 0;
bodyDef.userData = {
'width':width,
'height':height,
'gravity':gravity,
'imgsrc':'images/logo.png',
'imgsize': '16',
'bodysize': '5'
}
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(
width / 2, // Math.random() + 0.1 //half width
height / 2 // Math.random() + 0.1 //half height
);
var body = world.CreateBody(bodyDef).CreateFixture(fixDef);
//custom code starts
var canvaselem = document.getElementById("canvas");
var context = canvaselem.getContext("2d");
var canvaswidth = canvaselem.width-0;
var canvasheight = canvaselem.height-0;
var bodies = world.GetBodyList();
var bodyCount = world.GetBodyCount();
for(var i = 0; i < bodyCount; i++){
var thisbody = bodies.GetUserData();
if(thisbody){
if(thisbody.imgsrc){
console.log(thisbody);
// This "image" body destroys polygons that it contacts
var edge = bodies.GetContactList();
while (edge) {
var other = edge.other;
if (other.GetType() == b2Body.b2_dynamicBody) {
var othershape = other.GetFixtureList().GetShape();
if (othershape.GetType() == body.e_polygonShape) {
world.DestroyBody(other);
break;
}
}
edge = edge.next;
}
var position = bodies.GetPosition();
var flipy = canvasheight - position.y;
var size =thisbody.imgsize;
var imgObj = new Image(size,size);
imgObj.src = thisbody.imgsrc;
context.save();
context.translate(position.x,flipy);
context.rotate(bodies.GetAngle());
alert(bodies.GetAngle());
var s2 = -1*(size/2);
var scale = thisbody.bodysize/-s2;
context.scale(scale,scale);
context.drawImage(imgObj,s2,s2);
context.restore();
}
}
bodies = bodies.GetNext();
}
//custom code ends
}我的控制台输出以chrome表示：
Object {width: 1, height: 2, gravity: 0, imgsrc: "images/anm.png", imgsize: "16"…}
bodysize: "5"
gravity: 0
height: 2
imgsize: "16"
imgsrc: "images/anm.png"
width: 1
__proto__: Object感谢您提供的任何帮助:)
Stack Overflow用户
发布于 2013-12-10 23:00:35
在这里，示例是一个圆。
选项卡数组包含所有的box2D对象，这里只包含圆形
function()DisplayImagesOnCircles(tab){
for(var i=0; i < tab.length; i++){ //check all the game items
context.save();
//30 is your worldscale. Get position of bodies
context.translate(tab[i].GetBody().GetPosition().x * 30, tab[i].GetBody().GetPosition().y * 30);
//get the angles of all the bodies
context.rotate(tab[i].GetBody().GetAngle());
//the 60 here is 2 times your worldscale. Get the radius of the circles
var radius = tab[i].m_shape.m_radius* 60;
//draw image
context.drawImage(img, -radius/2, -radius/2 , radius, radius);
context.restore();
}我所做的就是根据球的位置移动上下文。我在我的循环中执行这段代码。
如果其他人需要使用矩形/正方形/圆形的函数，请随时与我联系。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19770261
复制相关文章
相似问题
腾讯云开发者
