在Web图形编辑器开发中，“移动图形”是最基础且高频的交互操作，不仅需要保证用户拖拽时的流畅体验（图形实时跟随鼠标），还需支持撤销/重做、状态管理、灵活扩展等核心需求。很多开发者第一时间会想到命令模式，但实际上，结合场景需求，还有多种设计模式可实现移动操作，甚至能通过模式组合达到更优的代码可维护性和扩展性。
本文基于实际开发对话场景，梳理图形编辑器移动操作的核心需求，详解命令模式及其他可替代/补充的设计模式，所有示例均使用TypeScript实现，方便直接应用到项目中。
一、核心需求拆解
在动手设计前，先明确图形编辑器移动操作的核心诉求，避免设计偏离实际场景：
- 流畅交互：拖拽时图形实时跟随鼠标指针，无明显延迟；
- 状态可追溯：支持撤销/重做，仅记录完整的移动操作（而非拖拽过程中的每一步微操作）；
- 可扩展性：支持多种移动规则（如自由移动、网格对齐、吸附），且能灵活新增；
- 解耦性：操作逻辑与UI渲染、状态管理分离，便于后续维护和迭代。
二、核心模式：命令模式（最常用，适配撤销/重做）
命令模式是图形编辑器移动操作的首选，核心是将“移动操作”封装为独立命令对象，解耦操作的发起者（UI交互）与执行者（图形对象），同时支持操作记录和撤销/重做。
结合拖拽场景的关键优化：拖拽过程中实时更新图形位置（保证体验），拖拽结束后生成单条命令（避免冗余记录），完全遵循“命令控制图形变化”的核心原则。
2.1 TypeScript实现
// 1. 图形基础类（接收者：真正执行移动操作的对象）
class Graphic {
constructor(
public id: string,
public x: number,
public y: number,
public width: number,
public height: number
) {}
// 核心移动方法：修改图形位置
move(dx: number, dy: number): void {
this.x += dx;
this.y += dy;
}
// 辅助方法：判断鼠标是否点击在图形上（用于拖拽触发）
isPointInside(mouseX: number, mouseY: number): boolean {
return mouseX >= this.x && mouseX <= this.x + this.width &&
mouseY >= this.y && mouseY <= this.y + this.height;
}
}
// 2. 命令接口（规范所有命令的统一方法）
interface Command {
execute(): void;
undo(): void;
}
// 3. 移动命令（具体命令：封装移动操作）
class MoveGraphicCommand implements Command {
private initialX: number; // 移动前的初始X坐标（用于撤销）
private initialY: number; // 移动前的初始Y坐标（用于撤销）
constructor(
private graphic: Graphic,
private totalDx: number, // 总位移X（拖拽结束后计算）
private totalDy: number // 总位移Y（拖拽结束后计算）
) {
// 记录初始状态（仅初始化时记录一次）
this.initialX = graphic.x;
this.initialY = graphic.y;
}
// 执行命令：移动图形
execute(): void {
this.graphic.move(this.totalDx, this.totalDy);
}
// 撤销命令：恢复到移动前的状态
undo(): void {
this.graphic.x = this.initialX;
this.graphic.y = this.initialY;
}
}
// 4. 命令管理器（调用者：管理命令队列，实现撤销/重做）
class CommandManager {
private history: Command[] = []; // 命令历史队列
private currentIndex: number = -1; // 当前命令索引
// 执行命令（清空已撤销的命令，添加新命令）
executeCommand(command: Command): void {
if (this.currentIndex < this.history.length - 1) {
this.history = this.history.slice(0, this.currentIndex + 1);
}
command.execute();
this.history.push(command);
this.currentIndex++;
}
// 撤销操作
undo(): void {
if (this.currentIndex >= 0) {
const command = this.history[this.currentIndex];
command.undo();
this.currentIndex--;
}
}
// 重做操作
redo(): void {
if (this.currentIndex < this.history.length - 1) {
this.currentIndex++;
const command = this.history[this.currentIndex];
command.execute();
}
}
}
// 5. 拖拽控制器（衔接UI交互与命令，处理实时拖拽）
class DragController {
private draggingGraphic: Graphic | null = null;
private startMouseX: number = 0;
private startMouseY: number = 0;
private startGraphicX: number = 0;
private startGraphicY: number = 0;
constructor(private commandManager: CommandManager) {}
// 开始拖拽（鼠标按下）
startDrag(graphic: Graphic, mouseX: number, mouseY: number): void {
this.draggingGraphic = graphic;
this.startMouseX = mouseX;
this.startMouseY = mouseY;
this.startGraphicX = graphic.x;
this.startGraphicY = graphic.y;
}
// 拖拽中（鼠标移动，实时更新图形位置）
drag(mouseX: number, mouseY: number): void {
if (!this.draggingGraphic) return;
// 计算实时位移
const dx = mouseX - this.startMouseX;
const dy = mouseY - this.startMouseY;
// 实时更新图形位置（仅视觉反馈，不记录命令）
this.draggingGraphic.x = this.startGraphicX + dx;
this.draggingGraphic.y = this.startGraphicY + dy;
}
// 结束拖拽（鼠标释放，生成并执行命令）
endDrag(): void {
if (!this.draggingGraphic) return;
// 计算总位移（拖拽全程的总偏移量）
const totalDx = this.draggingGraphic.x - this.startGraphicX;
const totalDy = this.draggingGraphic.y - this.startGraphicY;
// 只有位移不为0时，才生成命令（避免无效操作）
if (totalDx !== 0 || totalDy !== 0) {
const command = new MoveGraphicCommand(
this.draggingGraphic,
totalDx,
totalDy
);
this.commandManager.executeCommand(command);
}
// 重置拖拽状态
this.draggingGraphic = null;
}
}
// 6. 编辑器入口（整合所有模块，模拟UI交互）
class GraphicEditor {
private graphics: Graphic[] = [];
private commandManager = new CommandManager();
private dragController = new DragController(this.commandManager);
// 添加图形
addGraphic(graphic: Graphic): void {
this.graphics.push(graphic);
}
// 模拟鼠标按下事件（触发拖拽开始）
onMouseDown(mouseX: number, mouseY: number): void {
// 查找被点击的图形（从后往前，优先选中上层图形）
const targetGraphic = this.graphics.slice().reverse().find(graphic =>
graphic.isPointInside(mouseX, mouseY)
);
if (targetGraphic) {
this.dragController.startDrag(targetGraphic, mouseX, mouseY);
}
}
// 模拟鼠标移动事件（触发拖拽中）
onMouseMove(mouseX: number, mouseY: number): void {
this.dragController.drag(mouseX, mouseY);
this.refreshCanvas(); // 刷新画布，渲染最新位置
}
// 模拟鼠标释放事件（触发拖拽结束）
onMouseUp(): void {
this.dragController.endDrag();
this.refreshCanvas();
}
// 模拟画布刷新（实际项目中替换为DOM/Canvas渲染逻辑）
private refreshCanvas(): void {
console.log("画布刷新，当前图形状态：", this.graphics);
}
}
// 测试示例
const editor = new GraphicEditor();
// 添加一个矩形图形
const rect = new Graphic("rect1", 100, 100, 200, 100);
editor.addGraphic(rect);
// 模拟拖拽流程
editor.onMouseDown(150, 150); // 点击图形中心，开始拖拽
editor.onMouseMove(250, 200); // 拖拽到新位置
editor.onMouseUp(); // 释放鼠标，生成移动命令
console.log("拖拽结束后图形位置：", rect.x, rect.y); // 200, 150
editor.commandManager.undo(); // 撤销移动
console.log("撤销后图形位置：", rect.x, rect.y); // 100, 100
editor.commandManager.redo(); // 重做移动
console.log("重做后图形位置：", rect.x, rect.y); // 200, 150
2.2 关键说明
- 分离“视觉反馈”与“命令执行”：拖拽过程中直接修改图形位置（保证流畅），拖拽结束后才生成单条命令（避免冗余）；
- 命令封装完整状态：移动命令记录图形初始位置，确保撤销时能精准恢复；
- 命令管理器统一管理：负责命令的执行、撤销、重做，解耦UI交互与命令逻辑。
三、其他可用设计模式（结合场景补充）
命令模式虽常用，但在特定场景下，其他设计模式可更好地解决问题（如状态管理、移动规则扩展、多图形联动、状态备份等）。以下结合图形编辑器移动操作，介绍6种实用设计模式（含对话中提及的备忘录模式），均提供TS示例，覆盖所有相关场景，且各模式间形成互补，方便开发者根据需求灵活选用。
3.1 策略模式：适配多种移动规则
核心思想：定义多种移动算法（如自由移动、网格对齐、水平/垂直锁定），封装为独立策略，可动态切换，无需修改图形或命令代码。
适用场景：需要支持多种移动规则，且规则可灵活扩展（如新增“吸附到参考线”功能）。
// 1. 移动策略接口（规范所有移动算法）
interface MoveStrategy {
calculateNewPosition(
currentX: number,
currentY: number,
dx: number,
dy: number
): { x: number; y: number };
}
// 2. 具体策略1：自由移动（默认）
class FreeMoveStrategy implements MoveStrategy {
calculateNewPosition(currentX: number, currentY: number, dx: number, dy: number): { x: number; y: number } {
return { x: currentX + dx, y: currentY + dy };
}
}
// 3. 具体策略2：网格对齐（按指定网格大小移动）
class GridMoveStrategy implements MoveStrategy {
constructor(private gridSize: number = 20) {}
calculateNewPosition(currentX: number, currentY: number, dx: number, dy: number): { x: number; y: number } {
// 计算对齐网格后的位置
const newX = Math.round((currentX + dx) / this.gridSize) * this.gridSize;
const newY = Math.round((currentY + dy) / this.gridSize) * this.gridSize;
return { x: newX, y: newY };
}
}
// 4. 改造图形类，支持设置移动策略
class GraphicWithStrategy {
public moveStrategy: MoveStrategy = new FreeMoveStrategy(); // 默认自由移动
constructor(
public id: string,
public x: number,
public y: number,
public width: number,
public height: number
) {}
// 结合策略移动图形
move(dx: number, dy: number): void {
const { x, y } = this.moveStrategy.calculateNewPosition(this.x, this.y, dx, dy);
this.x = x;
this.y = y;
}
}
// 测试示例
const rect = new GraphicWithStrategy("rect1", 100, 100, 200, 100);
// 切换为网格对齐策略（网格大小20）
rect.moveStrategy = new GridMoveStrategy(20);
rect.move(35, 45); // 原本移动35,45，对齐后为40,60（20的倍数）
console.log(rect.x, rect.y); // 140, 160
3.2 状态模式：管理编辑器交互状态
核心思想：将编辑器的不同交互状态（选择模式、移动模式、缩放模式）封装为独立状态类，状态切换时自动改变行为，避免大量if-else判断。
适用场景：编辑器有多种交互模式，移动操作仅在“移动模式”下生效。
// 1. 状态接口（规范所有状态的行为）
interface EditorState {
handleMouseDown(editor: StatefulEditor, mouseX: number, mouseY: number): void;
handleMouseMove(editor: StatefulEditor, mouseX: number, mouseY: number): void;
handleMouseUp(editor: StatefulEditor): void;
}
// 2. 选择状态（默认状态：点击选中图形，不移动）
class SelectState implements EditorState {
handleMouseDown(editor: StatefulEditor, mouseX: number, mouseY: number): void {
const targetGraphic = editor.graphics.find(g => g.isPointInside(mouseX, mouseY));
if (targetGraphic) {
editor.selectedGraphic = targetGraphic;
// 切换到移动状态（点击选中后，拖拽即移动）
editor.setState(new MoveState());
}
}
handleMouseMove(editor: StatefulEditor, mouseX: number, mouseY: number): void {
// 选择状态下，鼠标移动不做任何操作
}
handleMouseUp(editor: StatefulEditor): void {
// 选择状态下，鼠标释放不做任何操作
}
}
// 3. 移动状态（拖拽移动选中的图形）
class MoveState implements EditorState {
private startMouseX: number = 0;
private startMouseY: number = 0;
private startGraphicX: number = 0;
private startGraphicY: number = 0;
handleMouseDown(editor: StatefulEditor, mouseX: number, mouseY: number): void {
if (editor.selectedGraphic) {
this.startMouseX = mouseX;
this.startMouseY = mouseY;
this.startGraphicX = editor.selectedGraphic.x;
this.startGraphicY = editor.selectedGraphic.y;
}
}
handleMouseMove(editor: StatefulEditor, mouseX: number, mouseY: number): void {
if (!editor.selectedGraphic) return;
const dx = mouseX - this.startMouseX;
const dy = mouseY - this.startMouseY;
editor.selectedGraphic.x = this.startGraphicX + dx;
editor.selectedGraphic.y = this.startGraphicY + dy;
editor.refreshCanvas();
}
handleMouseUp(editor: StatefulEditor): void {
// 移动结束，切换回选择状态
editor.setState(new SelectState());
// 生成移动命令（结合命令模式，支持撤销）
if (editor.selectedGraphic) {
const totalDx = editor.selectedGraphic.x - this.startGraphicX;
const totalDy = editor.selectedGraphic.y - this.startGraphicY;
if (totalDx !== 0 || totalDy !== 0) {
const command = new MoveGraphicCommand(
editor.selectedGraphic,
totalDx,
totalDy
);
editor.commandManager.executeCommand(command);
}
}
}
}
// 4. 带状态的编辑器
class StatefulEditor {
public graphics: Graphic[] = [];
public selectedGraphic: Graphic | null = null;
public state: EditorState = new SelectState(); // 默认选择状态
public commandManager = new CommandManager();
// 设置编辑器状态
setState(state: EditorState): void {
this.state = state;
}
// 转发鼠标事件到当前状态
onMouseDown(mouseX: number, mouseY: number): void {
this.state.handleMouseDown(this, mouseX, mouseY);
}
onMouseMove(mouseX: number, mouseY: number): void {
this.state.handleMouseMove(this, mouseX, mouseY);
}
onMouseUp(): void {
this.state.handleMouseUp(this);
}
refreshCanvas(): void {
console.log("画布刷新，当前图形状态：", this.graphics);
}
}
3.3 组合模式：支持多图形群组移动
核心思想：将单个图形（叶子节点）和多个图形的组合（组合节点）统一视为“图形组件”，使客户端对单个图形和组合图形的移动操作具有一致性。
适用场景：需要支持“选中多个图形，批量移动”功能。
// 1. 图形组件接口（统一叶子和组合节点的行为）
interface GraphicComponent {
id: string;
move(dx: number, dy: number): void;
isPointInside(mouseX: number, mouseY: number): boolean;
}
// 2. 叶子节点：单个图形
class LeafGraphic implements GraphicComponent {
constructor(
public id: string,
public x: number,
public y: number,
public width: number,
public height: number
) {}
move(dx: number, dy: number): void {
this.x += dx;
this.y += dy;
}
isPointInside(mouseX: number, mouseY: number): boolean {
return mouseX >= this.x && mouseX <= this.x + this.width &&
mouseY >= this.y && mouseY <= this.y + this.height;
}
}
// 3. 组合节点：多个图形的群组
class CompositeGraphic implements GraphicComponent {
public children: GraphicComponent[] = [];
constructor(public id: string) {}
// 添加图形到群组
add(component: GraphicComponent): void {
this.children.push(component);
}
// 从群组移除图形
remove(component: GraphicComponent): void {
this.children = this.children.filter(c => c.id !== component.id);
}
// 群组移动：所有子图形同步移动
move(dx: number, dy: number): void {
this.children.forEach(child => child.move(dx, dy));
}
// 判断鼠标是否点击在群组内（任意子图形被点击即视为选中群组）
isPointInside(mouseX: number, mouseY: number): boolean {
return this.children.some(child => child.isPointInside(mouseX, mouseY));
}
}
// 测试示例
// 创建两个单个图形
const rect1 = new LeafGraphic("rect1", 100, 100, 100, 50);
const rect2 = new LeafGraphic("rect2", 200, 200, 100, 50);
// 创建群组，添加两个图形
const group = new CompositeGraphic("group1");
group.add(rect1);
group.add(rect2);
// 移动群组（两个图形同步移动）
group.move(50, 50);
console.log(rect1.x, rect1.y); // 150, 150
console.log(rect2.x, rect2.y); // 250, 250
3.4 观察者模式：实现状态联动更新
核心思想：定义对象间的一对多依赖，当图形位置（被观察者）变化时，所有依赖它的组件（观察者，如画布、属性面板）自动收到通知并更新。
适用场景：图形移动后，需要同步更新画布渲染、属性面板的坐标显示等。
// 1. 观察者接口
interface Observer {
update(subject: Subject): void;
}
// 2. 被观察者基类（图形继承此类）
class Subject {
private observers: Observer[] = [];
// 注册观察者
attach(observer: Observer): void {
this.observers.push(observer);
}
// 移除观察者
detach(observer: Observer): void {
this.observers = this.observers.filter(o => o !== observer);
}
// 通知所有观察者
protected notify(): void {
this.observers.forEach(observer => observer.update(this));
}
}
// 3. 可观察的图形类（被观察者）
class ObservableGraphic extends Subject {
constructor(
public id: string,
private _x: number,
private _y: number,
public width: number,
public height: number
) {
super();
}
// 访问器：修改x/y时通知观察者
get x(): number {
return this._x;
}
set x(value: number) {
this._x = value;
this.notify(); // 位置变化，通知观察者
}
get y(): number {
return this._y;
}
set y(value: number) {
this._y = value;
this.notify(); // 位置变化，通知观察者
}
// 移动方法
move(dx: number, dy: number): void {
this.x += dx;
this.y += dy;
}
}
// 4. 观察者1：画布（更新渲染）
class CanvasObserver implements Observer {
update(subject: Subject): void {
if (subject instanceof ObservableGraphic) {
console.log(`画布更新：图形${subject.id}移动到(${subject.x}, ${subject.y})`);
}
}
}
// 5. 观察者2：属性面板（更新坐标显示）
class PropertyPanelObserver implements Observer {
update(subject: Subject): void {
if (subject instanceof ObservableGraphic) {
console.log(`属性面板更新：图形${subject.id}坐标 - X: ${subject.x}, Y: ${subject.y}`);
}
}
}
// 测试示例
const graphic = new ObservableGraphic("rect1", 100, 100, 200, 100);
const canvas = new CanvasObserver();
const propertyPanel = new PropertyPanelObserver();
// 注册观察者
graphic.attach(canvas);
graphic.attach(propertyPanel);
// 移动图形，触发观察者更新
graphic.move(50, 50);
// 输出：
// 画布更新：图形rect1移动到(150, 150)
// 属性面板更新：图形rect1坐标 - X: 150, Y: 150
3.5 原型模式：拖拽预览与状态备份
核心思想：通过复制现有图形（原型）创建新对象，无需重新初始化，高效实现拖拽预览、撤销时的状态备份。
适用场景：拖拽时需要显示“预览图形”（不影响原图形），或撤销时需要快速恢复图形状态（适合简单图形，无需额外筛选核心状态），与备忘录模式形成互补。
// 1. 原型接口（定义克隆方法）
interface Prototype {
clone(): Prototype;
}
// 2. 可克隆的图形类
class CloneableGraphic implements Prototype {
constructor(
public id: string,
public x: number,
public y: number,
public width: number,
public height: number,
public color: string = "#000000"
) {}
// 克隆方法：创建当前图形的副本
clone(): CloneableGraphic {
return new CloneableGraphic(
`${this.id}_clone`, // 克隆体ID区分原图形
this.x,
this.y,
this.width,
this.height,
this.color
);
}
move(dx: number, dy: number): void {
this.x += dx;
this.y += dy;
}
}
// 测试示例（拖拽预览）
const originalGraphic = new CloneableGraphic("rect1", 100, 100, 200, 100, "#ff0000");
// 克隆图形作为预览（拖拽时移动预览，不影响原图形）
const previewGraphic = originalGraphic.clone();
// 拖拽预览图形
previewGraphic.move(50, 50);
console.log("原图形位置：", originalGraphic.x, originalGraphic.y); // 100, 100
console.log("预览图形位置：", previewGraphic.x, previewGraphic.y); // 150, 150
// 拖拽结束，将原图形移动到预览位置
originalGraphic.move(50, 50);
console.log("拖拽结束后原图形位置：", originalGraphic.x, originalGraphic.y); // 150, 150
3.6 备忘录模式：图形状态备份与恢复
核心思想：在不破坏对象封装性的前提下，捕获对象的内部状态并保存，以便后续需要时恢复到该状态。与原型模式的“复制对象”不同，备忘录模式仅保存对象的关键状态，更轻量、更聚焦“状态回溯”。
适用场景：图形移动、修改属性等操作后，需要精准恢复到操作前的状态（如撤销移动时，无需复制整个图形，仅恢复位置状态），常与命令模式协作实现完整的撤销/重做功能，尤其适合复杂图形（属性较多）的场景，可弥补原型模式“复制完整对象”的性能损耗。
// 1. 备忘录类（存储图形的关键状态，不可直接修改）
class GraphicMemento {
// 仅存储移动相关的关键状态（x、y坐标），按需扩展
constructor(public readonly x: number, public readonly y: number) {}
}
// 2. 原发器（图形类）：创建和恢复备忘录
class MementoGraphic {
constructor(
public id: string,
public x: number,
public y: number,
public width: number,
public height: number
) {}
// 移动图形
move(dx: number, dy: number): void {
this.x += dx;
this.y += dy;
}
// 创建备忘录：保存当前状态
createMemento(): GraphicMemento {
return new GraphicMemento(this.x, this.y);
}
// 恢复备忘录：从备忘录中恢复状态
restoreMemento(memento: GraphicMemento): void {
this.x = memento.x;
this.y = memento.y;
}
}
// 3. 管理者（可选）：负责存储备忘录，避免原发器直接操作备忘录
class MementoManager {
private mementos: Map<string, GraphicMemento> = new Map(); // key: 图形ID，value: 备忘录
// 保存备忘录
saveMemento(graphicId: string, memento: GraphicMemento): void {
this.mementos.set(graphicId, memento);
}
// 获取备忘录
getMemento(graphicId: string): GraphicMemento | undefined {
return this.mementos.get(graphicId);
}
}
// 4. 结合命令模式使用（完善撤销逻辑）
class MementoMoveCommand implements Command {
private memento: GraphicMemento; // 保存移动前的状态（备忘录）
constructor(
private graphic: MementoGraphic,
private dx: number,
private dy: number,
private mementoManager: MementoManager
) {
// 执行命令前，创建并保存备忘录（移动前的状态）
this.memento = this.graphic.createMemento();
this.mementoManager.saveMemento(this.graphic.id, this.memento);
}
execute(): void {
this.graphic.move(this.dx, this.dy);
}
undo(): void {
// 从备忘录恢复到移动前的状态
const memento = this.mementoManager.getMemento(this.graphic.id);
if (memento) {
this.graphic.restoreMemento(memento);
}
}
}
// 测试示例
const mementoManager = new MementoManager();
const graphic = new MementoGraphic("rect1", 100, 100, 200, 100);
// 创建移动命令，自动保存备忘录
const moveCommand = new MementoMoveCommand(graphic, 50, 50, mementoManager);
moveCommand.execute();
console.log("移动后图形位置：", graphic.x, graphic.y); // 150, 150
// 撤销移动，从备忘录恢复状态
moveCommand.undo();
console.log("撤销后图形位置：", graphic.x, graphic.y); // 100, 100
关键说明：备忘录模式专注于“状态备份与恢复”，与命令模式协作时，命令负责执行操作，备忘录负责保存操作前后的关键状态，让撤销逻辑更简洁、更精准。尤其适合复杂图形（属性较多）的状态回溯，相比原型模式的“复制整个对象”，备忘录仅保存核心状态，更轻量、更节省内存——这也是它与原型模式在状态备份场景中的核心区别，二者相辅相成，可根据图形复杂度灵活选择，与前文原型模式的适用场景形成精准呼应。
四、模式选择与组合建议
单一设计模式难以满足图形编辑器的复杂需求，实际开发中建议根据场景组合使用，以下是高频组合方案：
4.1 常用组合方案
- 命令模式 + 策略模式：用命令模式管理移动操作（支持撤销），用策略模式切换移动规则（自由/网格/吸附）；
- 命令模式 + 组合模式：用组合模式管理群组图形，用命令模式实现群组移动的撤销/重做；
- 状态模式 + 观察者模式：用状态模式管理编辑器交互状态，用观察者模式实现图形移动后的联动更新；
- 命令模式 + 原型模式：用原型模式备份图形初始状态，用命令模式实现撤销时的状态恢复（适合简单图形、拖拽预览场景）；
- 命令模式 + 备忘录模式：用备忘录模式轻量保存图形操作前的关键状态，用命令模式管理操作执行与撤销，兼顾性能与精准性，适配复杂图形的状态回溯需求。
4.2 模式选择对照表
| 设计模式 |
核心优势 |
适用场景 |
| 命令模式 |
支持撤销/重做，解耦操作发起与执行 |
需要记录操作历史，支持撤销/重做 |
| 策略模式 |
移动规则可扩展、可切换，无需修改核心代码 |
支持多种移动规则（自由、网格、吸附） |
| 状态模式 |
简化交互状态管理，避免大量if-else |
编辑器有多种交互模式（选择、移动、缩放） |
| 组合模式 |
统一单个图形与群组的操作逻辑 |
需要支持多图形群组移动 |
| 观察者模式 |
状态变化自动联动更新，解耦组件依赖 |
图形移动后需同步更新画布、属性面板等 |
| 原型模式 |
高效复制对象，用于预览、状态备份 |
拖拽预览、撤销时的状态恢复（适合简单图形） |
| 备忘录模式 |
轻量保存对象关键状态，不破坏封装，精准恢复 |
复杂图形状态备份、与命令模式协作实现撤销 |
五、总结
图形编辑器的移动操作设计，核心是平衡“用户体验”与“代码可维护性”：命令模式是基础，解决撤销/重做和操作解耦；策略模式、状态模式、备忘录模式等用于补充扩展，分别解决移动规则、交互状态、状态备份等细分问题；模式组合则能应对更复杂的场景（如群组移动、多组件联动、复杂图形状态回溯）。
本文所有示例均基于TypeScript实现，可直接复制到项目中修改适配，重点关注“命令模式+策略模式”“命令模式+组合模式”“命令模式+备忘录模式”这三组高频组合，基本能覆盖大部分图形编辑器移动操作的需求。尤其值得注意的是，备忘录模式与原型模式虽都可用于状态备份，但场景各有侧重——备忘录模式轻量保存关键状态，适配复杂图形；原型模式复制完整对象，适配拖拽预览等场景，合理区分二者可进一步优化项目性能。
如果你的编辑器有更特殊的场景（如异步移动、复杂吸附规则），可基于上述模式进一步扩展，核心原则是：将变化的部分封装起来，降低组件间的耦合，让代码更易维护、易扩展。
登录
