Question

我用PhysicsJS做了一个简单的“动画”，我有这个身体：

                balon = Physics.body('circle', {
                    x: 50,
                    y: random(20, 350),
                    vx: 0.45,
                    angle: random(0,360),
                    angularVelocity:-0.005,
                    radius: 60,
                    mass: 1,
                    fixed: true
                });
                    balon.view = new Image();
                    balon.view.src = 'ballon.png';

一切正常，但我需要为“球”添加阴影，这意味着我需要使用两个图像“ballon.png”，第二个图像（阴影）需要固定在第一个图像上（不要随身体旋转）。

任何想法都这么热吗？

提前谢谢！

Answer 1

如果您需要其中一个图像具有不同的行为，则需要自己处理渲染。

您可以为阴影添加另一个渲染图层。如果您将阴影图像存储在body.shadow中，那么您可以执行以下操作。

var shd = renderer.addLayer('shadows');
var bodies = [balon];
// draw the provided shadow view
shd.drawShadow = function( body, view ){
    var pos = body.state.pos
        ,v = body.state.vel
        ,t = renderer._interpolateTime || 0
        ,x
        ,y
        ,aabb
        ,ctx = shd.ctx;
        ;

    // interpolate positions
    x = pos.x + v.x * t;
    y = pos.y + + v.y * t;

    ctx.save();
    ctx.translate( x, y );
    ctx.drawImage(view, -view.width/2, -view.height/2, view.width, view.height);
    ctx.restore();
}
shd.render = function(){
    var body;

    for (var i = 0, l = bodies.length; i < l; i++){
        body = bodies[ i ];
        if ( body.shadow ){
            shd.drawShadow( body, body.shadow );
        }
    }
};

如何在physicsjs中使用两个图像

1 个答案: