修复文字阴影bug (ikuaitu#347)

* feat: 翻译

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

* fix: 修复文字阴影首次绘制为黑色问题

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();
 };
 
 // 边框设置

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;
 });

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,
+  };
+}