从pixi.js中的box2dweb渲染旋转的矩形

Question

我正在为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;
}

Answer 1

好吧，我明白了。 看起来，当您更改枢轴时，PIXI会更改其开始渲染的点（即使不更改旋转，它也会影响对象的位置）。 而且，box2d旋转围绕身体的中心旋转。

因此，现在我可以使用box2d身体位置而无需平移到左上角开始渲染。