40-渲染箱子

5.7.2　渲染箱子

为了渲染箱子，可以在drawScreen()函数中遍历boxes数组。这与在示例CH5EX22.html中遍历balls数组的行为类似。通过调用GetPosition()和GetShape()方法获取位置和形状，为渲染箱子做准备。

for (i =0;i <boxes.length;i++) {
　　var position = boxes[i].GetPosition();
　　var fixtureList = boxes[i].GetFixtureList();
　　var shape = fixtureList.GetShape();

然而，因为箱子不断地下落和翻滚，所以还需要做一些非常特别的工作才能保证箱子被正确渲染。首先，调用GetUserData()方法，取得物体上附加的用户数据对象。

var userData = boxes[i].GetUserData();

接下来，将Canvas的环境保存，充值变换矩阵，然后平移到箱子的中心。因为在Box2D中对象的原点本来就在中心，所以就没有必要在变换时偏移中心。然后，根据盒子的角度旋转画布，通过调用GetAngle()方法获得角度。

context.save();
context.setTransform(1,0,0,1,0,0);
context.translate(position.x * scaleFactor,position.y * scaleFactor);
context.rotate(boxes[i].GetAngle());

在绘制箱子的时候，需要将x轴坐标和y轴向回偏移1/2的宽度和1/2的高度——在Canvas上绘制的时候是以左上角为原点的。然后，恢复画布的环境，完成箱子的渲染。

context.fillRect(0-(userData.width*scaleFactor/2), 0-
　　　　　　 　　　 　(userData.height*scaleFactor/2),
　　　　userData.width * scaleFactor, userData.height * scaleFactor);
　 context.restore();
}

现在，我们已经在Box2D中完成了箱子的建模——按照重力作用下落以及与其他箱子的碰撞。读者可以运行本书的代码包中的CH5EX23.html查看示例。