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

I'd like to draw some kind of popyline chart using pixijs lineTo method. The problem is the lines are rendered outside dedicated area.

示例：

    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);
    }

结果：

为什么会发生，以及如何避免呢？

Why it happens and how to avoid it?

推荐答案

它似乎只发生使用WebGLRenderer非整数。

It seems to only occur using the WebGLRenderer with non-integer numbers.

破碎（根据您的例子）：

Broken (as per your example):

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

作品（带圆角号）：

Works (with rounded numbers):

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

作品（帆布渲染器）：

Works (with canvas renderer):

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

小提琴这里

您可以在GitHub上提交问题，但在此期间舍入你的价值观与最近的像素，或只使用画布渲染器将解决这个问题。

You could submit the issue on GitHub, but in the meantime rounding your values to the nearest pixel, or using only the Canvas renderer will solve it.