修改字体

src/views/CalligraphyMaster/cread.vue

@@ -521,6 +521,8 @@ export default {
       loading: false,
       fileList: [],
       imgCtx: null,
+      TUI_selectedItem: null,
+      TUI_selectedFont: "",
     };
   },
   //计算属性 类似于data概念
@@ -634,9 +636,93 @@ export default {
           cssMaxWidth: this.form.width, // canvas 最大宽度
           cssMaxHeight: this.form.heigt, // canvas 最大高度
         });
+        let fontArray = [
+          "Arial",
+          "Arial Black",
+          "Caveat",
+          "Comic Sans MS",
+          "Courier New",
+          "Georgia1",
+          "Impact",
+          "Lobster Two",
+          "Lucida Console",
+          "Luckiest Guy",
+          "Open Sans",
+          "Pacifico",
+          "Palatino Linotype",
+          "Press Start 2P",
+          "Roboto",
+          "Tahoma",
+          "Tangerine",
+          "Times New Roman",
+          "Tourney",
+          "Ultra",
+          "Verdana",
+          "Symbol",
+          "Webdings",
+          "Wingdings",
+        ];
+
+        let fontSelectHTML =
+          '<select #fontselect class="form-select font-selector">';
+        for (let i = 0; i < fontArray.length; i++) {
+          let selected = "";
+          if (i == 0) {
+            selected = "selected";
+          }
+          fontSelectHTML +=
+            '<option style="font-family:' +
+            fontArray[i] +
+            ' !important;" value="' +
+            fontArray[i] +
+            '" ' +
+            selected +
+            ">" +
+            fontArray[i] +
+            "</option>";
+        }
+        fontSelectHTML += "</select>";
+
+        let textMenuAlign = document.querySelector(
+          ".tui-image-editor-menu-text .tie-text-align-button"
+        );
+        textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
+
+        document
+          .querySelector(".font-selector")
+          .addEventListener("change", () =>
+            this.TUI_updateFontOnText($(".font-selector option:selected").val())
+          );
+        this.instance.on("objectActivated", (props) => {
+          this.TUI_selectedItem = props;
+          this.TUI_updateFontSelected(props);
+          console.log("TUI_selectedItem", props);
+        });
+
         this.loading.close();
       });
     },
+    TUI_updateFontOnText(font) {
+      console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
+
+      if (font) {
+        this.TUI_selectedFont = font;
+      }
+
+      if (font && this.TUI_selectedItem) {
+        this.instance.changeTextStyle(this.TUI_selectedItem.id, {
+          fontFamily: font,
+        });
+      }
+    },
+    TUI_updateFontSelected(layer) {
+      console.log("TUI_updateFontSelected", layer);
+
+      if (layer.fontFamily) {
+        document.querySelector(".font-selector").value = layer.fontFamily;
+        this.TUI_selectedFont = layer.fontFamily;
+      }
+    },
     // 删除上传的图片
     deleteImage() {
       this.fileList = [];