2
0
Эх сурвалжийг харах

fix(charts): 修复Taro CanvasContext缺少标准Canvas方法的兼容性问题

问题分析:
- Taro的createCanvasContext返回的对象包含一个__raw__属性,该属性存储了真正的CanvasRenderingContext2D
- 直接展开rawCtx对象时,标准Canvas方法(save、restore等)没有被正确暴露

解决方案:
- 在BaseChart.tsx中添加逻辑,优先使用rawCtx.__raw__作为context源
- 如果__raw__不存在,回退到使用rawCtx本身
- 在CanvasContext接口中添加常用Canvas方法声明为可选方法(save、restore、beginPath、closePath、moveTo、lineTo、arc、rect、fill、stroke、fillText、translate、rotate、scale等)

这样确保uCharts能够正确访问Canvas 2D API的所有方法。

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 3 долоо хоног өмнө
parent
commit
be76547ace

+ 3 - 1
mini-ui-packages/mini-charts/src/components/BaseChart.tsx

@@ -105,10 +105,12 @@ export const BaseChart: React.FC<BaseChartProps> = (props) => {
       }
 
       // 将 Taro CanvasContext 转换为 uCharts 需要的 CanvasContext
+      // Taro 的 CanvasContext 有一个 __raw__ 属性包含真正的 CanvasRenderingContext2D
+      const rawContext = (rawCtx as any).__raw__ || rawCtx;
       const ctx: CanvasContext = {
         width: cWidth,
         height: cHeight,
-        ...(rawCtx as any)
+        ...rawContext
       };
       console.debug('[BaseChart] 转换后的CanvasContext:', ctx)
 

+ 16 - 0
mini-ui-packages/mini-charts/src/lib/charts/u-charts.ts

@@ -129,6 +129,22 @@ export interface CanvasContext {
   draw?(): void;
   // clearRect 方法(Taro 小程序可能不支持,使用可选)
   clearRect?(x: number, y: number, width: number, height: number): void;
+  // save/restore 方法(Taro 小程序可能不支持,使用可选)
+  save?(): void;
+  restore?(): void;
+  // 其他常用 Canvas 方法(使用可选以兼容不同平台)
+  beginPath?(): void;
+  closePath?(): void;
+  moveTo?(x: number, y: number): void;
+  lineTo?(x: number, y: number): void;
+  arc?(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
+  rect?(x: number, y: number, width: number, height: number): void;
+  fill?(): void;
+  stroke?(): void;
+  fillText?(text: string, x: number, y: number, maxWidth?: number): void;
+  translate?(x: number, y: number): void;
+  rotate?(angle: number): void;
+  scale?(x: number, y: number): void;
   [key: string]: any;
 }