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



我在较新的 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 中提交问题

相关内容

  • 没有找到相关文章

最新更新