From a6130c23c56b805e186638bb18028e04f03c24f4 Mon Sep 17 00:00:00 2001
From: wohuweixiya <86701050+wohuweixiya@users.noreply.github.com>
Date: Wed, 24 Apr 2024 11:43:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=87=E5=AD=97=E9=98=B4?=
 =?UTF-8?q?=E5=BD=B1bug=20(#347)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 翻译

* feat: 水印颜色自定义功能

* fix: 修复文字阴影首次绘制为黑色问题
---
 src/components/attribute.vue |  6 ++--
 src/components/waterMark.vue |  2 +-
 src/hooks/useFont/index.ts   | 56 ++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useFont/index.ts

diff --git a/src/components/attribute.vue b/src/components/attribute.vue
index 5da5a3e0..deff11c4 100644
--- a/src/components/attribute.vue
+++ b/src/components/attribute.vue
@@ -486,7 +486,7 @@ const selectCancel = () => {
 
 const init = () => {
   // 获取字体数据
-
+  getObjectAttr();
   canvasEditor.on('selectCancel', selectCancel);
   canvasEditor.on('selectOne', getObjectAttr);
   canvasEditor.canvas.on('object:modified', getObjectAttr);
@@ -517,8 +517,8 @@ const changeCommon = (key, value) => {
   activeObject && activeObject.set(key, value);
   canvasEditor.canvas.renderAll();
 
-  // 更新属性
-  getObjectAttr();
+  // 更新属性 都是通过v-model绑定的值  只需要在渲染时更新一次即可
+  // getObjectAttr();
 };
 
 // 边框设置
diff --git a/src/components/waterMark.vue b/src/components/waterMark.vue
index 9eb884ab..a1c98683 100644
--- a/src/components/waterMark.vue
+++ b/src/components/waterMark.vue
@@ -99,7 +99,7 @@ type IDrawOps = {
 };
 const { canvasEditor }: any = useSelect();
 
-const fontsList = ref([]);
+const fontsList: any = ref([]);
 canvasEditor.getFontList().then((list: any) => {
   fontsList.value = list;
 });
diff --git a/src/hooks/useFont/index.ts b/src/hooks/useFont/index.ts
new file mode 100644
index 00000000..c0297843
--- /dev/null
+++ b/src/hooks/useFont/index.ts
@@ -0,0 +1,56 @@
+/*
+ * @Author: June
+ * @Description: 获取免费字体
+ * @Date: 2024-03-24 10:19:05
+ * @LastEditors: June
+ * @LastEditTime: 2024-03-24 11:00:31
+ */
+import FontFaceObserver from 'fontfaceobserver';
+import fontList from '@/assets/fonts/font';
+import axios from 'axios';
+import { Spin, Message } from 'view-ui-plus';
+import { useI18n } from 'vue-i18n';
+
+const repoSrc = import.meta.env.APP_REPO;
+
+const _fontList = ref<any[]>([]);
+
+export function useFont() {
+  const { t } = useI18n();
+
+  const initFont = () => {
+    if (unref(_fontList).length > 0) return;
+    axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
+      _fontList.value = [...Object.entries(res.data).map(([, value]) => value)];
+    });
+  };
+
+  const fontsList = computed(() => [...fontList, ...unref(_fontList)]);
+
+  const loadFont = (fontName: string) => {
+    if (!fontName) return false;
+    return new Promise((resolve: any) => {
+      Spin.show();
+      const font = new FontFaceObserver(fontName);
+      font
+        .load(null, 150000)
+        .then(() => {
+          Message.success(t('alert.loading_fonts_success'));
+          Spin.hide();
+          resolve(true);
+        })
+        .catch(() => {
+          Message.error(t('alert.loading_fonts_failed'));
+          Spin.hide();
+          resolve(false);
+        });
+    });
+  };
+
+  onMounted(initFont);
+  return {
+    initFont,
+    fontsList,
+    loadFont,
+  };
+}