Pixi.js lines are rendered outside dedicated area

问题

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

Sample:

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

Result:

Why it happens and how to avoid it?

回答1:

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

Fiddle here

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.

来源：https://stackoverflow.com/questions/23872565/pixi-js-lines-are-rendered-outside-dedicated-area

标签

pixi.js