Box2dweb : 도형에 이미지 추가

Question

jquery 및 box2dweb을 사용하여 모양에 이미지를 추가하는 데 정말로 어려움을 겪고 있습니다. 내 코드는 여기에 좋은 예를 기반으로 : 이미지와 http://henry.brown.name/experiments/box2d/bricks.php
여기에서 촬영 한 바인딩 : 나는 아래 CreateObject를 호출 한 함수를 붙여 넣은 http://www.jeremyhubble.com/box2d.html

, 의견 내 추가 사항을 표시했다. src를 userdata를 사용하여 전달하는 중입니다. 그런 다음 이미지를 소급하여 추가했지만 이미지가 나타나지 않는 것 같습니다. 오류 메시지가 표시되지 않습니다. 크롬

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

Easel.js를 Box2DWeb과 함께 사용하는 것이 좋습니다. 나는 방금 둘 다 시작했고 이미 돌아가고있다. Flash 환경에서 왔지만 어느 쪽이든 위대한 Canvas 프레임 워크라고 생각하면 이젤이 특히 직관적입니다.

두 가지를 결합하는 방법을 알아 보는 멋진 동영상이 있습니다. 1 부 http://gotoandlearn.com/play.php?id=176

제 2 http://gotoandlearn.com/play.php?id=177