接入画布

src/component/Canvas/CanvasEditor/commands/TextCommands.js

@@ -0,0 +1,304 @@
+import { Command } from "./Command";
+
+/**
+ * 文本内容命令
+ * 用于更改文本图层的文本内容
+ */
+export class TextContentCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本内容",
+      description: "修改文本图层的文本内容",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newText = options.newText;
+    this.oldText = this.textObject.text;
+  }
+
+  execute() {
+    this.textObject.set("text", this.newText);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("text", this.oldText);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本字体命令
+ * 用于更改文本图层的字体
+ */
+export class TextFontCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本字体",
+      description: "修改文本图层的字体",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newFont = options.newFont;
+    this.oldFont = this.textObject.fontFamily;
+  }
+
+  execute() {
+    this.textObject.set("fontFamily", this.newFont);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("fontFamily", this.oldFont);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本尺寸命令
+ * 用于更改文本图层的字体大小
+ */
+export class TextSizeCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本尺寸",
+      description: "修改文本图层的字体大小",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newSize = options.newSize;
+    this.oldSize = this.textObject.fontSize;
+  }
+
+  execute() {
+    this.textObject.set("fontSize", this.newSize);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("fontSize", this.oldSize);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本颜色命令
+ * 用于更改文本图层的颜色
+ */
+export class TextColorCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本颜色",
+      description: "修改文本图层的颜色",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newColor = options.newColor;
+    this.oldColor = this.textObject.fill;
+  }
+
+  execute() {
+    this.textObject.set("fill", this.newColor);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("fill", this.oldColor);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本对齐方式命令
+ * 用于更改文本图层的对齐方式
+ */
+export class TextAlignCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本对齐",
+      description: "修改文本图层的对齐方式",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newAlign = options.newAlign;
+    this.oldAlign = this.textObject.textAlign;
+  }
+
+  execute() {
+    this.textObject.set("textAlign", this.newAlign);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("textAlign", this.oldAlign);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本样式命令
+ * 用于更改文本图层的样式(粗体、斜体、下划线等)
+ */
+export class TextStyleCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本样式",
+      description: "修改文本图层的样式",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.property = options.property; // 'fontWeight', 'fontStyle', 'underline', 'linethrough', 'overline'
+    this.newValue = options.newValue;
+    this.oldValue = this.textObject[this.property];
+  }
+
+  execute() {
+    this.textObject.set(this.property, this.newValue);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set(this.property, this.oldValue);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本间距命令
+ * 用于更改文本图层的字符间距或行高
+ */
+export class TextSpacingCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本间距",
+      description: "修改文本图层的字符间距或行高",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.property = options.property; // 'charSpacing' 或 'lineHeight'
+    this.newValue = options.newValue;
+    this.oldValue = this.textObject[this.property];
+  }
+
+  execute() {
+    this.textObject.set(this.property, this.newValue);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set(this.property, this.oldValue);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本背景颜色命令
+ * 用于更改文本图层的背景颜色
+ */
+export class TextBackgroundCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本背景",
+      description: "修改文本图层的背景颜色",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newColor = options.newColor;
+    this.oldColor = this.textObject.textBackgroundColor;
+  }
+
+  execute() {
+    this.textObject.set("textBackgroundColor", this.newColor);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("textBackgroundColor", this.oldColor);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 文本透明度命令
+ * 用于更改文本图层的透明度
+ */
+export class TextOpacityCommand extends Command {
+  constructor(options) {
+    super({
+      name: "修改文本透明度",
+      description: "修改文本图层的透明度",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.newOpacity = options.newOpacity;
+    this.oldOpacity = this.textObject.opacity;
+  }
+
+  execute() {
+    this.textObject.set("opacity", this.newOpacity);
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    this.textObject.set("opacity", this.oldOpacity);
+    this.canvas.renderAll();
+    return true;
+  }
+}
+
+/**
+ * 组合文本编辑命令
+ * 用于一次性应用多个文本属性更改
+ */
+export class CompositeTextCommand extends Command {
+  constructor(options) {
+    super({
+      name: "组合文本编辑",
+      description: "组合多个文本编辑操作",
+    });
+    this.canvas = options.canvas;
+    this.textObject = options.textObject;
+    this.changes = options.changes; // {property: newValue} 形式的对象
+    this.oldValues = {};
+
+    // 保存所有属性的旧值
+    for (const property in this.changes) {
+      if (this.textObject[property] !== undefined) {
+        this.oldValues[property] = this.textObject[property];
+      }
+    }
+  }
+
+  execute() {
+    for (const property in this.changes) {
+      this.textObject.set(property, this.changes[property]);
+    }
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    for (const property in this.oldValues) {
+      this.textObject.set(property, this.oldValues[property]);
+    }
+    this.canvas.renderAll();
+    return true;
+  }
+}