使用pixijs渲染多边形

Question

我正在尝试在移动设备上显示超过 6000 个多边形。目前，我正在使用 d3.js 库在 Android WebView 中使用 SVG 路径来执行此操作。它有效，但我必须处理性能问题，当我拖动地图或缩放时，我的地图变得非常滞后。

我现在的想法是尝试用pixijs做同样的事情。我的数据最初来自 ESRI Shapefiles。我将这些 Shapefile 转换为 GeoJSON，然后转换为 SVG。我的顶点数组看起来像这样，我试图将其传递给 drawPolygon 函数

0：994.9867684400124 1：22.308409862458518 2：1042.2789743912592 3：61.07148769269074

但是当我尝试渲染这些多边形时，没有显示任何内容。这是我的代码：

        var renderer = PIXI.autoDetectRenderer(1800, 1800, { backgroundColor: 0x000000, antialias: true });
        document.body.appendChild(renderer.view);

        var stage = new PIXI.Container();
        var graphics = new PIXI.Graphics();

        var totalShapes = feat.features.length; 

        for (var i = 1; i <= totalShapes -1; i++) {

            var shape = feat.features[i];
            var geometry = shape.geometry.bbox;

            graphics.beginFill(0xe74c3c);
            graphics.drawPolygon([ geometry]);
            graphics.endFill();
            stage.addChild(graphics);
            renderer.render(stage);

         }

有人可以帮助我或者建议我采用不同的方式吗？

Answer 1

我还没有见过这种初始化 pixie 项目的方法。

通常您将应用程序添加到 html 文档中，例如：

  var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

如果这样做，您可以将绘制调用添加到应用程序的设置中：

app.loader.load(startup);

function startup()
{
    var g = new PIXI.Graphics();
    g.beginFill(0x5d0015);
    g.drawPolygon(
        10, 10, 120, 100, 120, 200, 70, 200
    );
    g.endFill();

    app.stage.addChild(g);
}

这将渲染多边形一次。