Box2djs，JS 物理引擎 - 为球对象设置背景图像？

Question

在这里使用 Box2djs 插件： http://www.crackin.com/dev/mms/physicals/

..我想做的就是用图像纹理填充球对象。我希望它像设置 css 值一样简单，但我似乎做得不对，因为没有一个标准背景相关的 css 规则会改变球。使用 math.random，我可以创建 5 个不同的类名称来应用于每个球，以创建不同的纹理对象。

下面是它现在的样子，与我可以使用图像使它们看起来像的东西相比： M&M 模拟图像

这是我的物理引擎的特定构建正在用这个... github.com/hrj/box2d-js ...它使用 jQuery 而不是 Prototype。

Answer 1

我经常使用 Box2DJS，并且认为我已经找到了实现几乎任何东西所需的一切（例如碰撞检测挂钩等）。下面是我编写的一段代码，用于集成框或圆形图像来代替框或圆形对象：

if ( myBallImage )
    {
    for ( aBody = world.m_bodyList; aBody != null; aBody = aBody.m_next )
        {
        var jellyObject = aBody.GetUserData();
        if ( typeof(jellyObject) != "object" || jellyObject == null )
            continue;

        var position = aBody.GetCenterPosition();
        var angle = aBody.GetRotation();
        var mass = aBody.GetMass();
        var halfheight = 0;
        var halfwidth = 0;

        for ( aShape = aBody.GetShapeList(); aShape != null; aShape = aShape.m_next )
            {
            halfheight = aShape.GetHalfHeight();
            halfwidth = aShape.GetHalfWidth();
            }

        ctx.save();
        ctx.translate( position.x, position.y );
        ctx.rotate( angle );
        ctx.translate( -halfwidth, -halfheight );   // halfwidth, halfheight

        if ( jellyObject.shape == "MYBALL" )
            ctx.drawImage(myBallImage, 0, 0, halfwidth*2, halfheight*2 );
        else
        if ( jellyObject.shape == "MYBOX" )
            ctx.drawImage(myBoxImage, 0, 0, halfwidth*2, halfheight*2 );

        ctx.restore();
        }
    }
else
    {
    myBallImage = new Image();
    myBallImage.src = 'circle.gif';

    myBoxImage = new Image();
    myBoxImage.src = 'box.gif';
    }