Pixi.js 行在专用区域之外呈现

【问题标题】：Pixi.js lines are rendered outside dedicated areaPixi.js 行在专用区域之外呈现
【发布时间】：2014-07-15 08:54:49
【问题描述】：

我想使用 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);
    }

结果：

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

【问题讨论】：

标签： 2d pixi.js

【解决方案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);

作品（使用画布渲染器）：

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 渲染器即可解决问题。

【讨论】：