Question

我在较新的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

Answer 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中提出问题

pixi.js中有关于带有旋转和旋转的Graphics对象的奇怪效果

1 个答案: