代码之家  ›  专栏  ›  技术社区  ›  Szilu

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

  •  1
  • Szilu  · 技术社区  · 11 年前

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

    1 回复  |  直到 11 年前
        1
  •  0
  •   Tim    11 年前

    通过比较标签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中提交问题