Javascript 小精灵只画了一定数量的矩形？

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

let应用程序，图形；
常数cellSize=10；
initBoard（）；
更新算法（false，true，53）//是否适用于小于53的值
函数初始化板（）{
常量宽度=window.innerWidth；
const height=window.innerHeight；
app=新的PIXI.Application({
宽度：宽度，
身高：900，
背景颜色：0xffffff，
分辨率：window.devicePixelRatio | | 1，
自动调整大小：正确，
反别名：对
});
document.body.appendChild（app.view）；
graphics=新的PIXI.graphics（）；
app.stage.addChild（图形）；
}
函数更新网格算法（随机开始、显示网格、迭代）{
graphics.clear（）；
如果（显示网格）{
drawNewGrid（迭代）；
}
}
函数drawNewGrid（迭代）{
常量宽度=window.innerWidth；
常量网格宽度=迭代次数*2+1；
const startX=宽度/2-网格宽度/2*单元大小；
常数startY=20；
for（设i=0；i

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

我还为您制作了一个游戏（建议：使用选项卡（行）编辑器布局以获得最佳结果…）

问题的详细解释 对于低于53的值（例如52次迭代），我得到了正确的结果，如下所示： 请注意，rect的数量是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次迭代的完整网格）？

对于我来说，您的代码适用于大于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);
}

• 另外，请注意

  updateGridAlgorithm

  函数中发生的情况-

  gridContainer

  将从阶段中删除，并创建它的新实例（如果在此之前

  gridContainer

  中还有其他内容，则它将被垃圾收集以释放内存）
• 请参见

  drawNewGrid

  函数-在嵌套的

  循环中，在每个步骤上绘制新矩形，然后将其添加到
  gridContainer
  ：

let rectangle=new PIXI.Graphics（）；
矩形.线型（0.5，0x99999）；
beginull（0xFF可以添加到图形对象中的项目数量没有限制

如何解决这个问题？
我不熟悉Pixi.js和提供的文档，没有简单的解决方案

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

（也许是最好的选择，如果可能的话）创建一个只有一个正方形的图形（放下底部和右边缘），将其转换为位图，然后使用repeat（就像你使用的那样）在你想要的网格区域上绘制位图。你在Pixi中如何做到这一点我不知道，因为搜索“repeat”在文档中找不到任何用处


渲染线而不是渲染矩形。这意味着您只需要添加
迭代+gridWidth+2
行，而不是
（迭代*（gridWidth+1）
，这是一个巨大的资源节约。（参见下面的示例代码）


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


使用多边形线的示例
const maxLines=Math.max（迭代次数，网格宽度）；
const right=startX+gridWidth*cellSize；
const bottom=startY+iterations*cellSize；
graphics.startPoly（）；
var i=0；
虽然（我确信，对于大于52的值，代码工作正常？我已经更新了我的问题，详细解释了我的问题…您必须滚动到结果窗格的底部才能看到问题。
    let canvasWidth = (iterations * 2 + 4) * cellSize;
    let canvasHeight = (iterations + 4) * cellSize;

...

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

      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);

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();