wip(text):

crazysnowboy · Nov 6, 2023 · 7288f5a · 7288f5a
1 parent 5016e4c
commit 7288f5a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -7,13 +7,16 @@
     "@ice/runtime": "^1.2.7",
     "antd": "^5.11.0",
     "fabric": "^5.3.0",
+    "fontfaceobserver": "^2.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@applint/spec": "^1.2.3",
     "@ice/app": "^3.3.0",
     "@types/fabric": "^5.3.5",
+    "@types/fontfaceobserver": "^2.1.2",
     "@types/node": "^18.11.17",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

diff --git a/src/editor/textbox.tsx b/src/editor/textbox.tsx
@@ -1,16 +1,19 @@
 import { fabric } from 'fabric';
 import { TEXTBOX_DEFAULT_CONFIG } from '../utils/constants';
+import { uuid } from '@/utils';
 
 export const createTextbox = (options, editor) => {
   const { text = '', left, top, ...rest } = options || {};
   const { canvas, sketch } = editor;
 
   const textBox = new fabric.Textbox(text || '双击进行编辑', {
     ...TEXTBOX_DEFAULT_CONFIG,
-    ...rest
+    ...rest,
+    id: uuid()
   });
 
   if (left == null) {
+    // @ts-ignore
     textBox.set('left', sketch.width / 2 - textBox.width / 2);
   }
   if (top == null) {

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1,3 +1,6 @@
+export const APP_NAME = 'fabritor';
+export const LOG_PREFIX = `${APP_NAME}_log：`;
+
 export const OBJECT_DEFAULT_CONFIG = {
   // controls
   borderColor: '#FF6666',
@@ -15,12 +18,12 @@ export const TEXTBOX_DEFAULT_CONFIG = {
   // styles
   fill: '#000000',
   fontWeight: 500,
-  fontSize: 50,
+  fontSize: 80,
   lineHeight: 1.3,
   textAlign: 'center',
   fontFamily: 'AlibabaPuHuiTi',
   // size
-  width: 300,
+  width: 500,
   // controls
   ...OBJECT_DEFAULT_CONFIG,
   // 中文处理

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1,15 @@
+import * as FontFaceObserver from 'fontfaceobserver';
+import { v4 as uuidv4 } from 'uuid';
+import { FONT_PRESET_FAMILY_LIST, LOG_PREFIX } from './constants';
+
+export const loadFont = async (f: string) => {
+  if (!f) return Promise.resolve();
+  const item = FONT_PRESET_FAMILY_LIST.find(_item => _item.value === f);
+  if (!item) return Promise.resolve();
+  const font = new FontFaceObserver();
+  return font.load(null, 1000 * 100).catch((e) => { console.error(LOG_PREFIX, e); });
+}
+
+export const uuid = () => {
+  return uuidv4();
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1219,6 +1219,11 @@
   resolved "https://registry.npmmirror.com/@types/fabric/-/fabric-5.3.5.tgz#dfe3e41b0076e39305c39f1e944ee5f92a5fc974"
   integrity sha512-ZJgLE4DYpPRPEfO32iYe+6ii7k9WgiFdm/2E98RaAGZGfgdyiXbXzaglWxDGe9WmJXXbsZ814QYDiKkOZwFqLg==
 
+"@types/fontfaceobserver@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@types/fontfaceobserver/-/fontfaceobserver-2.1.2.tgz#540482cffc5da400fe6a479777180ca6bbbeb11c"
+  integrity sha512-QPTBzwHoy3KFaj6702gqqw9YpooQbN0biSBGyVUKvYzeIwpqJeZrzSx+HVzndy9Vsp2ZmvsTVs4k/evcySQC3A==
+
 "@types/http-errors@*":
   version "2.0.3"
   resolved "https://registry.npmmirror.com/@types/http-errors/-/http-errors-2.0.3.tgz#c54e61f79b3947d040f150abd58f71efb422ff62"
@@ -3416,6 +3421,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
   integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
+fontfaceobserver@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz#5fb392116e75d5024b7ec8e4f2ce92106d1488c8"
+  integrity sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -6724,6 +6734,11 @@ uuid@^8.3.2:
   resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"