Box2dweb Eine statische Linie zeichnen

Question

Ich baue ein kleines HTML5-Spiel mit box2dweb. Ich versuche, eine Linie auf mousedown + mousemove zu zeichnen. Diese Linien fangen fallende Quadrate auf und das Objekt soll die Quadrate aus den Löchern auf jeder Seite der Seite abprallen lassen.

Alles, was ich tun konnte, ist mehrere Quadrate entlang der MausX und MausY zu zeichnen, um eine durchgezogene Linie zu simulieren, aber ich denke nicht, dass dies ausreicht. Kann mir jemand helfen zu verstehen, wie man eine durchgezogene Linie oder ein einzelnes Polygon zeichnet, das der Form der gewünschten Linie entspricht?

Die unfertige ist hier http://acoolsip.com/html5/mobile/

derzeit die Methoden, die per Mausklick, mousemove- und die Linienzeichnung sind diese Funktionen umgehen.

function addClick(x, y, dragging) 
{ 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 

    bodyDef.type = b2Body.b2_staticBody; 
    fixDef.shape = new b2PolygonShape; 
    fixDef.shape.SetAsBox(
     0.1 //Math.random() + 0.1 //half width 
     , 0.1 //Math.random() + 0.1 //half height 
    ); 

    //the position of the created object   
    bodyDef.position.x = x; 
    bodyDef.position.y = y;    

    //bodyDef.angle = 1; 
    world.CreateBody(bodyDef).CreateFixture(fixDef);  
} 



document.addEventListener("mousedown", function(e) { 
     isMouseDown = true; 
     mouseX = (e.clientX - canvasPosition.x)/30; 
     mouseY = (e.clientY - canvasPosition.y)/30;  
     addClick(mouseX,mouseY); 
}, false); 

document.addEventListener('mousemove', function(e) { 
    if(isMouseDown == true) 
    { 
     isMouseMoving = true; 
     e.preventDefault(); 
     mouseX = (e.clientX - canvasPosition.x)/30; 
     mouseY = (e.clientY - canvasPosition.y)/30; 
     addClick(mouseX, mouseY, true);   
    } 
}, false); 

Vielen Dank für Ihre Hilfe.

Answer 1

Es gibt keine Möglichkeit, eine Linie zu zeichnen, die in allen Browsern funktioniert. (außer geraden vertikalen und geraden horizontalen Linien.)

Ich schlage vor, dass Sie eine Grafikbibliothek wie raphael verwenden.

Edit: hier ist die raphael Website: http://raphaeljs.com/