Box2dweb绘制静态线

Question

我正在使用box2dweb构建一个小的html5游戏。我试图在mousedown + mousemove上画一条线。这些线条将捕捉掉落的方块，目标是将方块从页面两边的孔中反弹出来。

我所能做的就是沿着mouseX和mouseY绘制几个方块来模拟一条实线，但我觉得这还不够。谁能帮助我理解如何绘制符合所需线条形状的实线或单个多边形？

正在进行的工作在这里http://acoolsip.com/html5/mobile/

目前处理mouseclick、mousemove和线条绘制的方法都是这些函数。

    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

没有办法画出适用于所有浏览器的线条。(垂直直线和水平直线除外。)

我建议你使用像拉斐尔这样的图形库。

编辑:这是拉斐尔的网站：http://raphaeljs.com/