Question

我正在使用box2dweb构建一个小型html5游戏。我试图在mousedown + mousemove上绘制一条线。这些线条将捕获掉落的方块，对象是将方块反射出页面两侧的孔。

我所能做的就是沿着mouseX和mouseY绘制几个正方形以模拟实线，但我觉得这不够。任何人都可以帮我理解如何绘制符合所需线条形状的实线或单个多边形吗？

正在进行的工作是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这样的图形库。

编辑：这是raphael网站：http://raphaeljs.com/

Box2dweb绘制一条静态线

1 个答案: