feat:删除callId关联逻辑、caf修改成offcanvas实现 (#323)

Author: xiaowoxiaowo

packages/f-my/src/adapter.ts

@@ -104,10 +104,9 @@ interface IMiniProgramCanvasContext_v1 {
 }
 
 export function createCanvasAdapter(canvasContext: any) {
+  const element = new CanvasElement(canvasContext);
   const context = new SimulatedCanvasContext(canvasContext);
-  const addCallIdAction = context.addCallIdActions.bind(context);
-
-  const element = new CanvasElement(canvasContext, addCallIdAction);
+  
   context.canvas = element;
 
   return {
@@ -136,13 +135,12 @@ export function createCanvasAdapter(canvasContext: any) {
     // })
   }
 }
-function bindDrawRunnable(fn: any, canvasContext: IMiniProgramCanvasContext_v1, addCallIdAction: () => void) {
+function bindDrawRunnable(fn: any, canvasContext: IMiniProgramCanvasContext_v1) {
   return function (this: any, ...args: unknown[]) {
     try {
       fn.apply(this, args);
     } finally {
       canvasContext.draw(true);
-      addCallIdAction();
     }
   }
 }
@@ -161,7 +159,7 @@ class CanvasImageElement {
 
     return target;
   }
-  constructor(public url: string, private _context: IMiniProgramCanvasContext_v1, private _addCallIdAction: () => void) {
+  constructor(public url: string, private _context: IMiniProgramCanvasContext_v1) {
     preloadCanvasImage(url, (img) => {
       this._rawImgObj = img || {};
       this._complete(this._rawImgObj);
@@ -173,12 +171,12 @@ class CanvasImageElement {
     }
     if (img.url == this.url && img.id !== -1) {
       if (this._onload) {
-        bindDrawRunnable(this._onload, this._context, this._addCallIdAction)();
+        bindDrawRunnable(this._onload, this._context)();
         this._invoked = true;
       }
     } else {
       if (this._onerror) {
-        bindDrawRunnable(this._onerror, this._context, this._addCallIdAction)();
+        bindDrawRunnable(this._onerror, this._context)();
         this._invoked = true;
       }
     }
@@ -196,40 +194,32 @@ class CanvasImageElement {
 class CanvasElement {
   constructor(
     private canvasContext: IMiniProgramCanvasContext_v1,
-    private _addCallIdAction: () => void,
     private offscreenCanvas = (my as any).createOffscreenCanvas
     ? (my as any).createOffscreenCanvas()
     : { requestAnimationFrame: () => {} }
   ) {
 
   }
   createImage(url: string) {
-    return new CanvasImageElement(url, this.canvasContext, this._addCallIdAction);
+    return new CanvasImageElement(url, this.canvasContext);
   }
   requestAnimationFrame(fn: any) {
-    const frameFn = bindDrawRunnable(fn, this.canvasContext,this._addCallIdAction);
+    const frameFn = bindDrawRunnable(fn, this.canvasContext);
 
     return this.offscreenCanvas.requestAnimationFrame(() => {
       frameFn(Date.now());
     });
   }
   cancelAnimationFrame(tid: any) {
-    return clearTimeout(tid);
+    return this.offscreenCanvas.cancelAnimationFrame(tid);
   }
 }
 class SimulatedCanvasContext {
   public canvas: CanvasElement;
-  private _callIdCache: Record<string, Array<TCanvasGradient | TCanvasPattern>>;
-  private _enableCacheCallId: boolean;
 
   constructor(
     private ctx: IMiniProgramCanvasContext_v1
   ) {
-    this._enableCacheCallId = true;
-    this._callIdCache = {
-      linearGradient: [],
-      radialGradient: []
-    };
   }
 
   private _fillStyle: string | TCanvasGradient | null | TCanvasPattern;
@@ -316,36 +306,15 @@ class SimulatedCanvasContext {
     return this.ctx.closePath();
   }
   // WontFIX: createImageData
-  public addCallIdActions(): void {
-    const { linearGradient, radialGradient } = this._callIdCache;
-    this._enableCacheCallId = false;
-    for (const item of linearGradient ) {
-      const gradient = this.ctx.createLinearGradient(0, 0, 0, 0);
-      Object.assign(gradient, item);
-    }
-    for (const item of radialGradient ) {
-      const gradient = this.ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
-      Object.assign(gradient, item);
-    }
-    this._enableCacheCallId = true;
-  }
   public createLinearGradient(x0: number, y0: number, x1: number, y1: number): TCanvasGradient {
-    const gradient = this.ctx.createLinearGradient(x0, y0, x1, y1);
-    if (this._enableCacheCallId) {
-      this._callIdCache.linearGradient.push(gradient);
-    }
-    return gradient;
+    return this.ctx.createLinearGradient(x0, y0, x1, y1);
   }
   public createPattern(image: TCanvasImageSource, repeat: TCanvasPatternRepeat): TCanvasPattern {
     const target = CanvasImageElement.toImageSource(image);
     return this.ctx.createPattern(target, repeat);
   }
   public createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): TCanvasGradient {
-    const gradient = this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
-    if (this._enableCacheCallId) {
-      this._callIdCache.radialGradient.push(gradient);
-    }
-    return gradient;
+    return this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
   }
   // WontFIX: createPath2D
   drawImage(