Javascript Box2dweb：将图像添加到形状

我真的很难使用jquery和box2dweb将图像添加到形状中。 我的代码基于一个很好的示例：
使用此处拍摄的图像绑定：

我在下面粘贴了名为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

}

---

感谢您的帮助：）

给您，示例是一个圆圈

选项卡阵列包含所有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();
}

function（）显示图像圆圈（选项卡）{
对于（var i=0；i

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

---

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

我建议将Easel.js与Box2DWeb结合使用。我刚刚开始使用这两种功能，并且已经开始运行了。请注意，如果您来自flash环境，则Easel特别直观，但无论哪种方式，我都认为它是一个很棒的画布框架

这里有一个很棒的视频，可以开始学习如何将两者结合起来。 第一部分

第二部分

---

我认为这与浮动的box2dweb的不同版本有关。我的两个示例似乎使用了不同的版本。我只是无法将其与我想要使用的版本（即此处使用的版本）配合使用。非常感谢您的帮助。

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