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

作品(四舍五入):

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 上提交问题，但同时将您的值四舍五入到最接近的像素，或者仅使用 Canvas 渲染器即可解决.

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屋！