box2dweb - 如何让画布上下文跟随 Box2dWeb 中的主体？

Question

我正在Box2D.Dynamics.b2DebugDraw渲染我的 Box2dWeb 世界。我怎样才能让画布保持在一个移动的物体的中心？

var debugDraw = new Box2D.Dynamics.b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvasElement").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit | Box2D.Dynamics.b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);

在运行模拟的循环中：

window.setInterval( function(){
    _this.world.Step(
        1 / 60   //frame-rate
        ,  10       //velocity iterations
        ,  10       //position iterations
    );
    _this.world.DrawDebugData();
    _this.world.ClearForces();
}, 1000 / 60);

Answer 1

翻译canvas运行循环中的元素：

var renderingContext = document.getElementById("canvasElement").getContext("2d");
debugDraw.SetSprite(renderingContext);

// .... snip .....

window.setInterval( function(){
    // ...
    renderingContext.translate(someX, someY); // <--- interesting line
    _this.world.DrawDebugData();
    _this.world.ClearForces();
}, 1000 / 60);