JS中const定义Rectangle重复添加仅移动原图形的问题求助

问题原因 #

你当前的代码只实例化了一个Rectangle对象，后续修改位置后再次调用add(grey)，只是移动了这个已存在的对象，并不会创建新的矩形——同一个实例在画布上只会存在一个，重复添加不会生成新元素。

解决方案：封装复用函数 #

把创建矩形、设置属性、添加到画布的逻辑封装成一个函数，每次调用函数就能快速生成新的像素方块，避免重复写冗余代码：

function createPixel(x, y, color = "#686968", size = 10) {
  const pixel = new Rectangle(size, size);
  pixel.setPosition(x, y);
  pixel.setColor(color);
  add(pixel);
  return pixel;
}

使用示例 #

• 生成单个灰色像素：

  createPixel(100, 400);
  createPixel(110, 400);
  

• 自定义颜色或大小：

  // 红色像素，大小10x10
  createPixel(120, 400, "#ff0000");
  // 蓝色大像素，20x20
  createPixel(130, 400, "#0000ff", 20);
  

• 批量生成一行像素：

  // 从x=100开始，生成10个横向排列的灰色像素
  for (let i = 0; i < 10; i++) {
    createPixel(100 + i * 10, 400);
  }
  

内容的提问来源于stack exchange，提问作者Cohen Johnson