Pixi.js线专用区外呈现 [英] Pixi.js lines are rendered outside dedicated area

问题描述

我想使用的 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.

这篇关于Pixi.js线专用区外呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！