本文介绍如何通过封装矩形创建逻辑为可复用函数，避免重复代码，解决“修改位置后原对象被移动而非复制”的常见误区，适用于像素画绘制等需大量同类图形的场景。
本文介绍如何通过封装矩形创建逻辑为可复用函数，避免重复代码，解决“修改位置后原对象被移动而非复制”的常见误区，适用于像素画绘制等需大量同类图形的场景。
在手绘像素图像时，频繁创建相同尺寸、不同位置和颜色的矩形极易导致代码冗余与维护困难。你遇到的问题——调用 setPosition() 和 add() 后只看到一个矩形移动而非新增——根本原因在于：JavaScript 中对象是引用类型，grey 始终指向同一个实例。每次 setPosition() 都在修改该实例的坐标，add(grey) 只是将同一对象多次添加到画布（多数图形库会自动去重或仅渲染最后状态），因此视觉上表现为“移动”。
✅ 正确做法是：每次都需要创建全新的矩形实例。为此，推荐使用参数化工厂函数（Factory Function）封装创建逻辑：
function getColoredRectangle(color, x, y, width = 10, height = 10) {
const rect = new Rectangle(width, height); // 创建新实例
rect.setPosition(x, y);
rect.setColor(color);
return rect; // 返回独立对象
}
// 使用示例：轻松生成多个独立矩形
add(getColoredRectangle("#686968", 100, 400)); // 灰色方块 @ (100, 400)
add(getColoredRectangle("#686968", 110, 400)); // 灰色方块 @ (110, 400)
add(getColoredRectangle("#123456", 120, 400)); // 蓝色方块 @ (120, 400)
add(getColoredRectangle("#FF5733", 100, 410)); // 橙色方块 @ (100, 410)? 进阶优化建议：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 若需批量生成（如整行像素），可结合 for 循环或 Array.from()：
Array.from({ length: 8 }, (_, i) => add(getColoredRectangle("#686968", 100 + i * 10, 400)) ); - 将常用颜色预定义为常量，提升可读性：
const COLORS = { GRAY: "#686968", BLUE: "#123456", ORANGE: "#FF5733" }; add(getColoredRectangle(COLORS.GRAY, 100, 400));
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 切勿复用已 add() 过的对象实例；每个图形必须是独立对象。
- 函数参数设置默认值（如 width = 10）可减少调用时的冗余传参。
- 此模式不仅适用于 Rectangle，也适用于 Circle、Text 等任何需重复创建的图形类。
通过工厂函数，你将告别手动重复输入，大幅提升像素画开发效率与代码健壮性。
