Question

我真的很想用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

任何帮助表示赞赏：）

Answer 1

你走了，这个例子是一个圆圈。

标签数组包含所有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();
}

我正在做的就是根据球的位置移动上下文。我在循环中执行此代码。

如果其他人需要使用矩形/正方形/圆形的功能，请随时与我联系。

Answer 2

我建议在Box2DWeb上使用Easel.js。我刚刚开始使用它们并且已经启动并运行了。请注意，如果您来自闪存环境，Easel会特别直观，但我认为它是一个很棒的Canvas框架。

这是一个很棒的视频，可以开始学习如何将两者结合起来。第1部分 http://gotoandlearn.com/play.php?id=176

第2部分 http://gotoandlearn.com/play.php?id=177

Box2dweb：将图像添加到形状

2 个答案: