javascript - 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

对我来说，你的代码适用于大于 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 控制台。当迭代为 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以及迭代值。这是因为在函数 drawNewGrid 中，for 循环嵌套在其他 for 循环中。

这意味着对于 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”对象的基元数量。请阅读此处:

• 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 的创建，因此它的宽度和高度取决于迭代，因此我们将看到绘制的所有矩形:

    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/