如何让 canvas 上下文跟随 Box2dWeb 中的主体?
How can I get the canvas context to follow a body in Box2dWeb?
我正在使用 Box2D.Dynamics.b2DebugDraw
渲染我的 Box2d Web 世界。如何让 canvas 保持在移动物体的中心?
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);
翻译 运行 循环中的 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);
我正在使用 Box2D.Dynamics.b2DebugDraw
渲染我的 Box2d Web 世界。如何让 canvas 保持在移动物体的中心?
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);
翻译 运行 循环中的 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);