Pixi.js线在专用区域外呈现

Question

我想使用 pixijs lineTo 方法绘制某种popyline图表。问题是线条在专用区域外呈现。

样品：

    var stage = new PIXI.Stage(0xFFFFFE);
    var renderer = new PIXI.WebGLRenderer(600, 600);
    document.body.appendChild(renderer.view);

    var graphics = new PIXI.Graphics();
    graphics.lineStyle(1, 0x0000FF, 1);

    graphics.moveTo(0, 50);
    graphics.lineTo(50, 50);//draw min Y line
    graphics.moveTo(0, 100);
    graphics.lineTo(50, 100);//draw max Y line

    graphics.moveTo(60, 50);
    graphics.lineTo(60 + 0.1, 100);
    graphics.lineTo(60 + 0.2, 50);

    stage.addChild(graphics);
    requestAnimFrame(animate);

    function animate() {
        requestAnimFrame(animate);
        renderer.render(stage);
    }

结果：

为什么会发生这种情况以及如何避免它？

Answer 1

似乎只使用带有非整数的WebGLRenderer。

破碎（根据你的例子）：

var renderer = new PIXI.WebGLRenderer(600, 600);
graphics.moveTo(60, 50);
graphics.lineTo(60 + 0.1, 100);
graphics.lineTo(60 + 0.2, 50);

作品（带有四舍五入的数字）：

var renderer = new PIXI.WebGLRenderer(600, 600);
graphics.moveTo(60, 50);
graphics.lineTo(60, 100);
graphics.lineTo(60, 50);

Works（使用画布渲染器）：

var renderer = new PIXI.CanvasRenderer(600, 600);
graphics.moveTo(60, 50);
graphics.lineTo(60 + 0.1, 100);
graphics.lineTo(60 + 0.2, 50);

Fiddle here

您可以在GitHub上提交问题，但在此期间将您的值舍入到最近的像素，或者仅使用Canvas渲染器将解决它。