Box2djs，JS物理引擎 - 为球对象设置背景图像？

与Box2djs插件在这里工作： http://www.crackin.com/dev/mms/physics/Box2djs，JS物理引擎 - 为球对象设置背景图像？

...和所有我想要做的是填补了球的图像纹理对象。我希望这是一样简单的设置一个CSS值，但我似乎没有做到这一点，因为没有任何标准的背景相关的CSS规则改变球。使用math.random我可以创建5个不同的类名来应用到每个球来创建不同的纹理对象。

这里是什么样子，现在，相比于一些例子，我可以让他们看起来使用相似图片： M&M Mock Image

这是物理引擎的具体构建我使用这个... github.com/hrj/box2d-js ...这是使用jQuery而不是Prototype。

来源

2012-01-12 relic

在这里找到这个线程： http://stackoverflow.com/questions/3796025/fill -svg-path-element-with-a-background-image ...但我尝试将图像定义为图案，然后将该图案应用于球迄今尚未运行。我也不太明白那个线程中的响应者是在用第二个位（显然是调用这个模式并将它应用到svg对象）。 – relic 2012-01-12 19:00:48

我一直在玩Box2DJS很多，认为我已经找到了我需要的东西来实现它几乎所有的东西（例如碰撞检测挂钩等）。下面是我写的一个箱子或圆形图像代替盒或圆形对象的集成的代码片段：

if (myBallImage) 
    { 
    for (aBody = world.m_bodyList; aBody != null; aBody = aBody.m_next) 
     { 
     var jellyObject = aBody.GetUserData(); 
     if (typeof(jellyObject) != "object" || jellyObject == null) 
      continue; 

     var position = aBody.GetCenterPosition(); 
     var angle = aBody.GetRotation(); 
     var mass = aBody.GetMass(); 
     var halfheight = 0; 
     var halfwidth = 0; 

     for (aShape = aBody.GetShapeList(); aShape != null; aShape = aShape.m_next) 
      { 
      halfheight = aShape.GetHalfHeight(); 
      halfwidth = aShape.GetHalfWidth(); 
      } 

     ctx.save(); 
     ctx.translate(position.x, position.y); 
     ctx.rotate(angle); 
     ctx.translate(-halfwidth, -halfheight); // halfwidth, halfheight 

     if (jellyObject.shape == "MYBALL") 
      ctx.drawImage(myBallImage, 0, 0, halfwidth*2, halfheight*2); 
     else 
     if (jellyObject.shape == "MYBOX") 
      ctx.drawImage(myBoxImage, 0, 0, halfwidth*2, halfheight*2); 

     ctx.restore(); 
     } 
    } 
else 
    { 
    myBallImage = new Image(); 
    myBallImage.src = 'circle.gif'; 

    myBoxImage = new Image(); 
    myBoxImage.src = 'box.gif'; 
    }

来源

2012-01-21 18:32:12

我从这个项目中走了出来，刚回来看到你几个月前回复。太感谢了！这看起来正是我需要的......当我终于有机会回到那个项目时。 – relic 2012-04-05 00:49:01

Box2djs，JS物理引擎 - 为球对象设置背景图像？

回答

相关问题