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物理引擎 - 爲球對象設置背景圖像？

回答

相關問題