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 供您试用（建议：使用 Tabs（行） 编辑器布局以获得最佳效果...）。

问题的详细解释

对于低于 53 的值（例如 52 次迭代），我得到了正确的结果，如下所示：请注意 rects 的数量是 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

对我来说，您的代码适用于大于 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 中的 "Memory" 选项卡：

当 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 循环中

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

2020-03-15 更新：

@frankenapps: Are you sure, the code worked correct for values bigger than 52? I have updated my question with a detailed explanation of my problem...

好的 - 现在我更清楚地看到你的想法了。似乎确实有一个限制：一个 "PIXI.Graphics" 对象的图元数量。请阅读这里：

此问题的解决方案是绘制更多较小的矩形，而不是绘制一个 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/

Answer 2

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

如何解决问题？

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

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

（也许，但如果可能的话，最好的选择）创建一个只有一个正方形的图形（放下底部和右边缘），将其转换为位图，然后在您想要的区域上绘制该位图使用重复的网格（就像您使用 CanvasRenderingContext2D.createPattern 所做的那样。我不知道如何在 Pixi 中执行此操作，因为搜索“重复”在文档中找不到任何用处
渲染线条而不是渲染矩形。这意味着您只需要添加 iterations + gridWidth + 2 行而不是 (iterations * (gridWidth + 1) 行，这样可以节省大量资源。（参见下面的示例代码）
（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();

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

PixiJS only draws a certain amount of rectangles?

javascript

pixi.js

问题的详细解释

具体问题

2020-03-15 更新：

如何解决问题？

使用折线的示例