Box2dweb静的な線を描く

Question

私はbox2dwebを使って小さなhtml5ゲームを構築しています。私はmousedown + mousemoveにラインを描こうとしています。これらの行は、ドロップする四角形をキャッチし、オブジェクトは、ページのいずれかの側の穴から四角形をバウンスすることです。

私ができることは、実線をシミュレートするためにmouseXとmouseYに沿っていくつかの四角形を描くことですが、これで十分ではないと思います。誰も私が実線や、希望の線の形に合った単一のポリゴンを描く方法を理解するのを助けることができますか？

進行中の作業は現在、マウスクリック、MouseMoveの線画を処理している方法は、これらの関数であり、ここでhttp://acoolsip.com/html5/mobile/

です。

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); 

ありがとうございました。

Answer 1

すべてのブラウザで動作する行を描画する方法はありません。 （直線の垂直線と直線の水平線を除く）

raphaelのようなグラフィックライブラリを使用することをお勧めします。

編集：ここではラファエルのウェブサイトがあります：http://raphaeljs.com/