PixiJS 只绘制一定数量的矩形？

Question

我想用 Pixi.js 动态地绘制一个网格（基于用户定义的大小）。 我的代码很简单：

let app, graphics;

const cellSize = 10;

initBoard();
updateGridAlgorithm(false, true, 53);   //does work for values < 53

function initBoard() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    app = new PIXI.Application({
        width: width,
        height: 900,
        backgroundColor: 0xffffff,
        resolution: window.devicePixelRatio || 1,
        autoResize: true,
        antialias: true
    });

    document.body.appendChild(app.view);
    graphics = new PIXI.Graphics();

    app.stage.addChild(graphics);
}

function updateGridAlgorithm(randomStart, showGrid, iterations){
    graphics.clear();
    if(showGrid){
        drawNewGrid(iterations);
    }
}

function drawNewGrid(iterations){
    const width = window.innerWidth;
    const gridWidth = iterations * 2 + 1;
    const startX = width/2 - gridWidth/2 * cellSize;
    const startY = 20;

    for (let i = 0; i < iterations; i++) {
        for (let j = 0; j < gridWidth; j++) {
            graphics.lineStyle(0.5, 0x999999);
            graphics.drawRect(startX+j*cellSize, startY+i*cellSize, cellSize, cellSize);
        }
    }
}

此代码适用于小于 53 的值（请参阅代码中的注释）。对于高于此的值，似乎有一个常量限制可以绘制多少个矩形（~5461）。为了将其可视化，请使用更大的数字进行测试。

我还制作了一个JSFiddle 供您玩耍（建议：使用选项卡（行） 编辑器布局以获得最佳效果...）。

问题详解

对于低于 53 的值（例如 52 次迭代），我得到正确的结果，如下所示： 请注意，矩形的数量是 52*(52*2+1) = 5460，它小于 5461（相差 1 似乎纯属巧合）。

对于大于或等于 53 的值，不绘制网格末端的一些矩形。下图中缺少的矩形标记为红色： 根据我下面的分析，应该有 53*(53*2+1)-5461=210 个矩形缺失。

似乎最多可以绘制多少个矩形。我将尝试使用 194 次迭代粗略计算： 所以绘制的矩形数量是 14 * (194*2+1) + 15 = 5461，我怀疑这是可以绘制的矩形的最大数量。

对于其他迭代计数可以获得相同的数字，例如 209: 13 * (209 * 2 + 1) + 14。

具体问题

我想知道，为什么会出现上述问题以及如何解决它（例如，绘制超过 52 次迭代的完整网格）？

Answer 1

确实存在对可以添加到图形对象的项目数量的限制。

如何解决问题？

我不熟悉 Pixi.js，PIXI.Graphics 的文档没有提供简单的解决方案。

一些将（或可能）有效但取决于您打算如何使用网格的快速解决方案。

1. （如果可能，可能是最好的选择）创建一个只有一个正方形的图形（放下底部和右侧边缘），将其转换为位图，然后使用重复将该位图绘制在您想要网格的区域上（就像您将使用CanvasRenderingContext2D.createPattern。我不知道如何在 Pixi 中执行此操作，因为搜索“重复”在文档中没有发现任何用处

2. 不是渲染矩形，而是渲染线条。这意味着您只需要添加iterations + gridWidth + 2 行而不是(iterations * (gridWidth + 1)，这样可以节省大量资源。 （见下面的示例代码）

3. （Hacky 方法）根据需要使用尽可能多的图形对象来容纳正方形。 IE 如果你只能添加 5460 个矩形并且想要添加 15000 个你将需要创建 Math.ceil(15000 / 5460) 图形对象。使用计数器跟踪您添加到每个图形的数​​字，并在每个图形满时切换。

使用折线的示例

const maxLines = Math.max(iterations, gridWidth);
const right = startX + gridWidth * cellSize;
const bottom = startY + iterations * cellSize;

graphics.startPoly();
var i = 0;
while (i <= maxLines) {
    if (i <= gridWidth) {
       graphicxs.moveTo(startX + i * cellSize, startY);
       graphicxs.lineTo(startX + i * cellSize, bottom);
    }
    if (i <= iterations) {
       graphicxs.moveTo(startX, startY + i * cellSize, startY);
       graphicxs.lineTo(right,  startY + i * cellSize, startY)
    }
    i++;
}
graphics.finishPoly();

Answer 2

对我来说，您的代码适用于大于 53 的值。对于 1000，它确实不起作用。要了解原因，请尝试运行以下版本的 drawNewGrid 函数：

function drawNewGrid(iterations){
    const width = window.innerWidth;
    const gridWidth = iterations * 2 + 1;
    const startX = width/2 - gridWidth/2 * cellSize;
    const startY = 20;

    var countAllRectangles = 0;

    for (let i = 0; i < iterations; i++) {
        for (let j = 0; j < gridWidth; j++) {
            graphics.lineStyle(0.5, 0x991111);
            graphics.drawRect(startX+j*cellSize, startY+i*cellSize, cellSize, cellSize);

            countAllRectangles++;
        }
    }

    console.log(countAllRectangles);
}

运行它并在浏览器中观察 Devtools 控制台。当iterations 为 500 时，它会打印：500500。另外请查看 Chrome Devtools 中的“内存”选项卡：

• 当 iterations 为 100 时，countAllRectangles 为 20100，我看到大约 25 MB 的内存使用量。
• 当 iterations 为 200 时，countAllRectangles 为 80200，我看到大约 90 MB 的内存使用量。
• 当iterations 为300 时countAllRectangles 为180300，我看到大约200 MB 的内存使用。
• 当iterations 为400 时countAllRectangles 为320400，我看到大约370 MB 的内存使用量。
• 当iterations 为500 时countAllRectangles 为500500，我看到大约570 MB 的内存使用。
• 当 iterations 为 600 时，countAllRectangles 为 720600，我看到大约 840 MB 的内存使用量等。

内存使用量为increasing quadratically 以及iterations 值。这是因为 for 循环嵌套在函数 drawNewGrid 中的其他 for 循环中。

这意味着对于 1000 的 iterations，它将占用大约 2 GB 的内存并绘制大约 200 万个矩形 - 这对于我们的浏览器和 pixi.js 来说可能太多了：)

2020 年 3 月 15 日更新：

@frankenapps： 您确定代码对于大于 52 的值是否正确？我更新了我的问题，详细解释了我的问题...

好的 - 现在我更清楚地看到了你的想法。似乎确实有一个限制：一个“PIXI.Graphics”对象的基元数。请在此处阅读：

• https://www.html5gamedevs.com/topic/12242-a-limitation-on-the-number-of-graphics-primitives/
• https://github.com/pixijs/pixi.js/issues/5707#issuecomment-494722310

解决此问题的方法是绘制更多更小的矩形，而不是一个 PIXI.Graphics 对象，其中包含许多矩形。请使用iterations = 100检查新版本的JSFiddle：

• 我更改了 PIXI.Application 的创建，使其具有取决于iterations 的宽度和高度，因此我们将看到所有绘制的矩形：

    let canvasWidth = (iterations * 2 + 4) * cellSize;
    let canvasHeight = (iterations + 4) * cellSize;

...

    app = new PIXI.Application({
        width: canvasWidth,
        height: canvasHeight,

• 还请注意 updateGridAlgorithm 函数中发生的情况 - gridContainer 已从阶段中删除并创建它的新实例（如果在此之前 gridContainer 中有其他内容，那么它将被垃圾收集以释放内存） .
• 请参阅drawNewGrid 函数 - 在嵌套的 for 循环内，每一步都在绘制新矩形 - 然后添加到 gridContainer：

      let rectangle = new PIXI.Graphics();
      rectangle.lineStyle(0.5, 0x999999);
      rectangle.beginFill(0xFF << (i % 24)); // draw each row of rectangles in different color :)
      rectangle.drawRect(startX+j*cellSize, startY+i*cellSize, cellSize, cellSize);
      rectangle.endFill();

      gridContainer.addChild(rectangle);

• 我还重命名了一些变量

https://jsfiddle.net/bmxfoh1r/1/