feat: 完成三类字母描红开发

miniprogram/englishPages/shared/draw/drawTools.ts

@@ -1,9 +1,10 @@
 /**
- * 绘制工具集合（后续可继续扩展其他通用绘制方法）
+ * 四线三格 & 字母绘制工具集
  */
 
 import {
-    ACTIVE_FONT_PROFILE,
+    DEFAULT_LETTER_PROFILE,
+    fontFamilyOf,
     getLetterMetrics,
     type FontProfile,
 } from '../data/fontProfiles';
@@ -11,47 +12,47 @@ import {
 // ── 四线三格统一高度（所有页面共用） ──
 export const FOUR_LINE_GRID_H = 43;
 
-// ── 英语字母字体集合 ──
-export const TOY_FONT_LETTER = 'ToyLetterFont';
+// ── 字体加载（支持多字体，按 URL 去重） ──
 
-let _fontLoaded = false;
-export function loadLetterFont(): Promise<void> {
-    if (_fontLoaded) return Promise.resolve();
+const _loadedUrls = new Set<string>();
+
+/**
+ * 加载字体到 Canvas native 渲染管线。
+ * 同一 URL 只加载一次；不同 FontProfile 可安全并发调用。
+ */
+export function loadLetterFont(
+    profile: FontProfile = DEFAULT_LETTER_PROFILE,
+): Promise<void> {
+    if (_loadedUrls.has(profile.url)) return Promise.resolve();
     return new Promise((resolve, reject) => {
         wx.loadFontFace({
-            family: TOY_FONT_LETTER,
-            source: `url("${ACTIVE_FONT_PROFILE.url}")`,
+            family: profile.name,
+            source: `url("${profile.url}")`,
             scopes: ['native'],
             success: () => {
-                _fontLoaded = true;
+                _loadedUrls.add(profile.url);
                 resolve();
             },
             fail: (err) => {
-                console.error('loadFontFace failed', err);
+                console.error(`loadLetterFont [${profile.name}] failed`, err);
                 reject(err);
             },
         });
     });
 }
 
-// ── 向后兼容：LetterFontSizes 类型保留，供外部已有调用使用 ──
+// ── LetterFontSizes：持有 FontProfile 引用，运行时按字母查表 ──
 
 export type LetterFontSizes = {
-    /** 字体配置（新机制） */
     _profile: FontProfile;
-    /** gridH（用于运行时计算） */
     _gridH: number;
 };
 
-/**
- * 根据四线三格总高度，构建 LetterFontSizes。
- * 内部持有 FontProfile 引用，按字母查表计算。
- */
-export function calcLetterFontSizes(gridH: number): LetterFontSizes {
-    return {
-        _profile: ACTIVE_FONT_PROFILE,
-        _gridH: gridH,
-    };
+export function calcLetterFontSizes(
+    gridH: number,
+    profile: FontProfile = DEFAULT_LETTER_PROFILE,
+): LetterFontSizes {
+    return { _profile: profile, _gridH: gridH };
 }
 
 /** 根据字母和字体配置，计算对应 fontSize */
@@ -97,7 +98,7 @@ export function drawLetterInFourLineGrid(
     },
 ) {
     const fontFamily =
-        options?.fontFamily ?? `${TOY_FONT_LETTER}, Roboto, sans-serif`;
+        options?.fontFamily ?? fontFamilyOf(sizes._profile);
     const color = options?.color ?? '#1a1a1a';
     const bold = options?.bold ?? false;