feat: 拼音字母选择

miniprogram/englishPages/shared/draw/drawTools.ts

@@ -7,14 +7,14 @@ import {
     fontFamilyOf,
     getLetterMetrics,
     type FontProfile,
-} from '../data/fontProfiles';
+} from '../../../core/font/fontProfiles';
+import { GRID_COLORS, GRID_DASH } from '../../../core/data/tracingStyles';
+import { loadFontFace } from '../../../core/font/fontLoader';
 
 // ── 四线三格统一高度（所有页面共用） ──
 export const FOUR_LINE_GRID_H = 43;
 
-// ── 字体加载（支持多字体，按 URL 去重） ──
-
-const _loadedUrls = new Set<string>();
+// ── 字体加载（委托到 core/font/fontLoader） ──
 
 /**
  * 加载字体到 Canvas native 渲染管线。
@@ -23,22 +23,7 @@ const _loadedUrls = new Set<string>();
 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: profile.name,
-            source: `url("${profile.url}")`,
-            scopes: ['native'],
-            success: () => {
-                _loadedUrls.add(profile.url);
-                resolve();
-            },
-            fail: (err) => {
-                console.error(`loadLetterFont [${profile.name}] failed`, err);
-                reject(err);
-            },
-        });
-    });
+    return loadFontFace(profile);
 }
 
 // ── LetterFontSizes：持有 FontProfile 引用，运行时按字母查表 ──
@@ -74,7 +59,7 @@ function getLetterBaselineOffset(
 }
 
 // ── 向后兼容：导出 DESCENDERS 集合 ──
-export { DESCENDERS } from '../data/fontProfiles';
+export { DESCENDERS } from '../../../core/font/fontProfiles';
 
 /**
  * 在四线三格中绘制单个字母（基线固定在 y + 2h/3 + baselineOffset）。
@@ -138,10 +123,10 @@ export function drawFourLineGrid(
     h: number,
     style?: FourLineGridStyle,
 ) {
-    const ink = style?.ink ?? '#322E25';
-    const middleInk = style?.middleInk ?? 'rgba(50, 46, 37, 0.3)';
+    const ink = style?.ink ?? GRID_COLORS.border;
+    const middleInk = style?.middleInk ?? GRID_COLORS.middleLine;
     const lineWidth = style?.lineWidth ?? 1;
-    const dash = style?.dash ?? [4, 4];
+    const dash = style?.dash ?? [...GRID_DASH];
 
     const yTop = y;
     const y1 = y + h / 3;
@@ -188,10 +173,10 @@ export function drawClosedFourLineGrid(
     h: number,
     style?: FourLineGridStyle,
 ) {
-    const ink = style?.ink ?? '#9AA9A2';
-    const middleInk = style?.middleInk ?? 'rgba(154, 169, 162, 0.65)';
+    const ink = style?.ink ?? GRID_COLORS.border;
+    const middleInk = style?.middleInk ?? GRID_COLORS.middleLine;
     const lineWidth = style?.lineWidth ?? 1;
-    const dash = style?.dash ?? [3, 3];
+    const dash = style?.dash ?? [...GRID_DASH];
 
     const y1 = y + h / 3;
     const y2 = y + (h * 2) / 3;