fix: rough canvas rendering error (#1830)

* fix: rough canvas rendering error * chore: add changeset * refactor: iterator forEach method now has compatibility
antvis · Nov 13, 2024 · 1de86a8 · 1de86a8
1 parent dd3e8f2
commit 1de86a8
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 50 deletions.
diff --git a/.changeset/eighty-waves-enjoy.md b/.changeset/eighty-waves-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-canvas-renderer': patch
+---
+
+fix: rough canvas rendering error
diff --git a/.changeset/young-kids-pump.md b/.changeset/young-kids-pump.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-image-loader': patch
+---
+
+refactor: iterator forEach method now has compatibility
diff --git a/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts b/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts
@@ -8,6 +8,8 @@ import type {
   ContextService,
   CanvasContext,
   GlobalRuntime,
+  CSSRGB,
+  ParsedBaseStyleProps,
 } from '@antv/g-lite';
 import {
   AABB,
@@ -18,6 +20,7 @@ import {
   Node,
 } from '@antv/g-lite';
 import { mat4, vec3 } from 'gl-matrix';
+import { isNil } from '@antv/util';
 import type { CanvasRendererPluginOptions } from './interfaces';
 import type { Plugin } from '.';
 
@@ -599,7 +602,7 @@ export class CanvasRendererPlugin implements RenderingPlugin {
       context.save();
 
       // apply attributes to context
-      styleRenderer.applyAttributesToContext(context, object);
+      this.applyAttributesToContext(context, object);
     }
 
     if (generatePath) {
@@ -633,6 +636,39 @@ export class CanvasRendererPlugin implements RenderingPlugin {
     object.renderable.dirty = false;
   }
 
+  applyAttributesToContext(
+    context: CanvasRenderingContext2D,
+    object: DisplayObject,
+  ) {
+    const { stroke, fill, opacity, lineDash, lineDashOffset } =
+      object.parsedStyle as ParsedBaseStyleProps;
+    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
+    if (lineDash) {
+      context.setLineDash(lineDash);
+    }
+
+    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
+    if (!isNil(lineDashOffset)) {
+      context.lineDashOffset = lineDashOffset;
+    }
+
+    if (!isNil(opacity)) {
+      context.globalAlpha *= opacity;
+    }
+
+    if (
+      !isNil(stroke) &&
+      !Array.isArray(stroke) &&
+      !(stroke as CSSRGB).isNone
+    ) {
+      context.strokeStyle = object.attributes.stroke as string;
+    }
+
+    if (!isNil(fill) && !Array.isArray(fill) && !(fill as CSSRGB).isNone) {
+      context.fillStyle = object.attributes.fill as string;
+    }
+  }
+
   private convertAABB2Rect(aabb: AABB): Rect {
     const min = aabb.getMin();
     const max = aabb.getMax();

diff --git a/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts b/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts
@@ -16,39 +16,6 @@ import { OptimizedDefaultRenderer, DEFAULT_STYLE } from './OptimizedDefault';
 import { getColor, getPattern } from './helper';
 
 export class DefaultRenderer extends OptimizedDefaultRenderer {
-  applyAttributesToContext(
-    context: CanvasRenderingContext2D,
-    object: DisplayObject,
-  ) {
-    const { stroke, fill, opacity, lineDash, lineDashOffset } =
-      object.parsedStyle;
-    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
-    if (lineDash) {
-      context.setLineDash(lineDash);
-    }
-
-    // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
-    if (!isNil(lineDashOffset)) {
-      context.lineDashOffset = lineDashOffset;
-    }
-
-    if (!isNil(opacity)) {
-      context.globalAlpha *= opacity;
-    }
-
-    if (
-      !isNil(stroke) &&
-      !Array.isArray(stroke) &&
-      !(stroke as CSSRGB).isNone
-    ) {
-      context.strokeStyle = object.attributes.stroke as string;
-    }
-
-    if (!isNil(fill) && !Array.isArray(fill) && !(fill as CSSRGB).isNone) {
-      context.fillStyle = object.attributes.fill as string;
-    }
-  }
-
   render(
     context: CanvasRenderingContext2D,
     parsedStyle: ParsedBaseStyleProps,

diff --git a/packages/g-plugin-canvas-renderer/src/shapes/styles/interfaces.ts b/packages/g-plugin-canvas-renderer/src/shapes/styles/interfaces.ts
@@ -27,11 +27,6 @@ export interface StyleRenderer {
 
   // ---
 
-  applyAttributesToContext: (
-    context: CanvasRenderingContext2D,
-    object: DisplayObject,
-  ) => void;
-
   render: (
     context: CanvasRenderingContext2D,
     parsedStyle: ParsedBaseStyleProps,

diff --git a/packages/g-plugin-image-loader/src/RefCountCache.ts b/packages/g-plugin-image-loader/src/RefCountCache.ts
@@ -1,21 +1,21 @@
 export class RefCountCache<CacheValue, CounterValue> {
-  #cacheStore = new Map<
+  private cacheStore = new Map<
     string,
     { value: CacheValue; counter: Set<CounterValue> }
   >();
 
   onRefAdded(ref: CounterValue) {}
 
   has(key: string) {
-    return this.#cacheStore.has(key);
+    return this.cacheStore.has(key);
   }
 
   put(key: string, item: CacheValue, ref: CounterValue) {
-    if (this.#cacheStore.has(key)) {
+    if (this.cacheStore.has(key)) {
       return false;
     }
 
-    this.#cacheStore.set(key, {
+    this.cacheStore.set(key, {
       value: item,
       counter: new Set([ref]),
     });
@@ -25,7 +25,7 @@ export class RefCountCache<CacheValue, CounterValue> {
   }
 
   get(key: string, ref: CounterValue) {
-    const cacheItem = this.#cacheStore.get(key);
+    const cacheItem = this.cacheStore.get(key);
     if (!cacheItem) {
       return null;
     }
@@ -39,7 +39,7 @@ export class RefCountCache<CacheValue, CounterValue> {
   }
 
   update(key: string, value: CacheValue, ref: CounterValue) {
-    const cacheItem = this.#cacheStore.get(key);
+    const cacheItem = this.cacheStore.get(key);
     if (!cacheItem) {
       return false;
     }
@@ -54,31 +54,31 @@ export class RefCountCache<CacheValue, CounterValue> {
   }
 
   release(key: string, ref: CounterValue) {
-    const cacheItem = this.#cacheStore.get(key);
+    const cacheItem = this.cacheStore.get(key);
     if (!cacheItem) {
       return false;
     }
 
     cacheItem.counter.delete(ref);
 
     if (cacheItem.counter.size <= 0) {
-      this.#cacheStore.delete(key);
+      this.cacheStore.delete(key);
     }
 
     return true;
   }
 
   releaseRef(ref: CounterValue) {
-    this.#cacheStore.keys().forEach((key) => {
+    Array.from(this.cacheStore.keys()).forEach((key) => {
       this.release(key, ref);
     });
   }
 
   getSize() {
-    return this.#cacheStore.size;
+    return this.cacheStore.size;
   }
 
   clear() {
-    this.#cacheStore.clear();
+    this.cacheStore.clear();
   }
 }