在 pixi.js 中渲染来自 box2dweb 的旋转矩形
Rendering rotated rectangles from box2dweb in pixi.js
我正在为 box2dweb 编写自己的渲染器,我决定要使用 pixi.js。
我能够渲染矩形,但前提是它们没有旋转 - 如果是,动画就会搞砸。它看起来像这样(左边一个是来自box2d的调试渲染器,右边一个是我的): http://scr.hu/0ozr/o552x
我知道我需要在 pixi 中设置图形对象的枢轴,但我不知道如何访问盒子从 box2d 旋转的点的坐标。
我想我需要使用某种形式的联系约束,但我如何访问它?
这是为多边形创建 pixi 图形对象的代码的一部分:(我需要将所有顶点转换为坐标系,起点位于多边形边界框的左上角,因为 PIXI 使用这种坐标系)。
getModel : function(body) {
var that = this;
var model = new PIXI.Graphics();
model.beginFill(0xFFFFFF);
var box = physHelpers.getBoundingBox(body);
model.position.x = box.x * that.scale;
model.position.y = box.y * that.scale;
var vertices = physHelpers.getTranslatedVertices(body);
model.moveTo(vertices[0].x * that.scale, vertices[0].y * that.scale);
for(var i = 1 ; i < vertices.length ; i++){
model.lineTo(vertices[i].x*that.scale, vertices[i].y*that.scale);
}
model.pivot = new PIXI.Point(box.width/2,model.height/2);
model.rotation = body.GetBody().GetAngle();
model.endFill();
return model;
}
好吧,我知道了。当您更改枢轴时,PIXI 似乎会更改它开始渲染的点(即使不更改旋转也会影响对象位置)。此外,box2d 旋转围绕身体中心旋转。
所以现在我可以在不转换为左上角的情况下使用 box2d 身体位置开始渲染。
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- 如何在容器中定位旋转的图像
- 在轴上旋转SVG图像
- 绕z轴旋转时出现iOS陀螺仪错误
- 旋转按钮[HTML][JS]
- 在JS中围绕旋转对象旋转对象
- Threejs-围绕中心旋转对象
- 旋转木马;启用内容安全策略时无法工作
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 菜单切换时箭头旋转
- 较大引导转盘中的较小引导转盘-较小引导转盘上的旋转功能问题
- 需要关于随机图像旋转的指南
- 根据摄影机视图更改计算对象旋转
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在 pixi.js 中渲染来自 box2dweb 的旋转矩形