pixi.js 中关于具有枢轴和旋转的图形对象的奇怪效果答案

【问题标题】：Strange effect in pixi.js regarding Graphics object with pivot and rotationpixi.js 中关于具有枢轴和旋转的图形对象的奇怪效果
【发布时间】：2014-02-12 01:21:29
【问题描述】：

我在较新的 pixi.js 版本中遇到了奇怪的效果。我创建了一个简单的示例，它从示例中旋转 PIXI.Graphics 对象以重现问题。似乎如果我在 Graphics 对象中使用除 (0,0) 以外的枢轴点（我还没有尝试过其他任何东西），则旋转不会按预期工作。它适用于 pixi.js 1.3.0，但不适用于 1.4.3 和 1.5.0。它应该只旋转，但它也会在场景中移动。难道我做错了什么？我知道我可以转换坐标，使中心成为 0,0 点，但出于某种原因我不想这样做（当然，除非不可能有任何其他方式）。

例子：

var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(400, 300, null, true);

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );

var g = new PIXI.Graphics();
g.beginFill(0xddffdd);
g.lineStyle(1, 0, 1);
g.moveTo(0, 0);
g.lineTo(60, 60);
g.lineTo(0, 60);
g.endFill();

g.position.x = 200;
g.position.y = 150;
g.pivot.x = 30;
g.pivot.y = 30;
stage.addChild(g);

function animate() {
    requestAnimFrame( animate );
    g.rotation += 0.1;
    renderer.render(stage);
}

测试页面的两个 URL：

这工作正常：http://dev.progit.info/static/test-1.3.0.html

这不是：http://dev.progit.info/static/test-1.4.3.html

【问题讨论】：

我也遇到了同样的问题，如果你解决了请告诉我。我做了一个master的构建，它仍然有同样的问题，所以它还没有修复。
我检查了 1.4.3 标签并进行了构建，它可以正常工作，这很奇怪，因为您的 1.4.3 分钟文件已损坏。我检查了 1.5.0 标签，它坏了。因此，标签 1.4.3 和 1.5.0 之间发生了一些变化，破坏了枢轴点。

标签： javascript pixi.js

【解决方案1】：

通过比较标签 1.4.3 和 1.5.0 发现了错误。看起来当矩阵变换操作被重写时，一个减号意外地变成了一个加号。

在 DisplayObject.js 的第 409 和 410 行将它们从：

a02 = this.position.x + a00 * px - py * a01,
a12 = this.position.y + a11 * py - px * a10,

到：

a02 = this.position.x - a00 * px - py * a01,
a12 = this.position.y - a11 * py - px * a10,

它又开始按预期工作了。

我将在 Github 中提交问题

【讨论】：