From 26f3c8a14a42af06775af59033b7f80a671ed647 Mon Sep 17 00:00:00 2001
From: xty <xty@dcloud.io>
Date: Tue, 20 Aug 2024 17:49:24 +0800
Subject: [PATCH] =?UTF-8?q?canvas=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas-context.uvue | 65 ++++++++++++----------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/pages/component/canvas/canvas-context.uvue b/pages/component/canvas/canvas-context.uvue
index cd419fed..0d36400f 100644
--- a/pages/component/canvas/canvas-context.uvue
+++ b/pages/component/canvas/canvas-context.uvue
@@ -33,7 +33,8 @@
         canvasContext: null as CanvasContext | null,
         renderingContext: null as CanvasRenderingContext2D | null,
         canvasWidth: 0,
-        canvasHeight: 0,
+        canvasHeight: 0,
+        fontLoaded: false,
         names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText", "path2D"].sort() as string[]
       }
     },
@@ -808,34 +809,42 @@
         path2DRect.rect(10, 10, 100, 20);
         context.fill(path2DRect);
       },
-      fontTTF() {
-        const context = this.renderingContext!
-        const fontMap = new Map<string,UTSJSONObject>([
-          ["AlimamaDaoLiTiOTF", {path: "/static/font/AlimamaDaoLiTi.otf", text: "阿里妈妈刀隶体字体otf加载成功"} as UTSJSONObject],
-          ["AlimamaDaoLiTiWOFF", {path: "/static/font/AlimamaDaoLiTi.woff", text: "阿里妈妈刀隶体字体Woff加载成功"} as UTSJSONObject],
-          ["iconfont-star", {path: "/static/fonts/icon-star.ttf", text: "\ue879"} as UTSJSONObject ],
-        ]);
-
+      fontTTF() {
+        const context = this.renderingContext!
+        const fontMap = new Map<string, UTSJSONObject>([
+          ["AlimamaDaoLiTiOTF", { path: "/static/font/AlimamaDaoLiTi.otf", text: "阿里妈妈刀隶体字体otf加载成功" } as UTSJSONObject],
+          ["AlimamaDaoLiTiWOFF", { path: "/static/font/AlimamaDaoLiTi.woff", text: "阿里妈妈刀隶体字体Woff加载成功" } as UTSJSONObject],
+          ["iconfont-star", { path: "/static/fonts/icon-star.ttf", text: "\ue879" } as UTSJSONObject],
+        ]);
         var yOffset = 0
-        fontMap.forEach((value: UTSJSONObject, key: string)=>{
-          console.log(`key:${key} value:${value["path"]}`)
-            uni.loadFontFace({
-        		family: key,
-        		source: `url('${value["path"]}')`,
-        		success: () => {
-        			console.log(`${key}字体加载成功`)
-        			context.save()
-        			const text = value["text"] as string
-        			context.font = `20px ${key}`
-        			context.fillStyle = "red"
-              yOffset += 25
-        			context.fillText(text, 0, yOffset)
-              yOffset += 25
-        			context.strokeText(text, 0, yOffset)
-        			context.restore()
-        		}
-        	})
-        })
+
+        var drawFont = (key : string, value : UTSJSONObject) => {
+          console.log(`${key}字体加载成功`)
+          context.save()
+          const text = value["text"] as string
+          context.font = `20px ${key}`
+          context.fillStyle = "red"
+          yOffset += 25
+          context.fillText(text, 0, yOffset)
+          yOffset += 25
+          context.strokeText(text, 0, yOffset)
+          context.restore()
+        }
+        fontMap.forEach((value : UTSJSONObject, key : string) => {
+          console.log(`key:${key} value:${value["path"]}`)
+          if (this.fontLoaded) {
+            drawFont(key, value)
+          } else {
+            uni.loadFontFace({
+              family: key,
+              source: `url('${value["path"]}')`,
+              success: () => {
+                drawFont(key, value)
+              }
+            })
+          }
+        })
+        this.fontLoaded = true
       }
     }
   }
-- 
GitLab