我在较新的 pixi.js 版本中遇到了奇怪的效果。我创建了一个旋转 PIXI 的简单示例。图形对象来自示例以重现问题。似乎如果我在图形对象中使用 (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);
}
测试页的两个网址:
这工作正常:http://dev.progit.info/static/test-1.3.0.html
这不会:http://dev.progit.info/static/test-1.4.3.html
通过比较标签 1.4.3 和 1.5.0 发现了错误。看起来当矩阵转换操作被重写时,减号意外变成了加号。
在 DisplayObject 的第 409 行和第 410 行.js将它们从
: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 中提交问题