Box2dweb：添加图像到形状

Question

我真的很努力地使用jquery和box2dweb将图像添加到形状。 我的代码是基于一个很好的例子，在这里：http://henry.brown.name/experiments/box2d/bricks.php
与图像从这里绑定采取：http://www.jeremyhubble.com/box2d.html

我已经粘贴下面称为创建对象的功能，并打上我的意见补充。 我通过使用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 

} 

我的控制台输出：

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。我刚刚开始并且已经开始运作。如果您来自Flash环境，请注意您的Easel特别直观，但我认为它是一个很棒的Canvas框架。

这里有一个伟大的视频开始学习如何将两者结合起来。 第1部分 http://gotoandlearn.com/play.php?id=176

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