Merge pull request #843 from VisActor/fix/conical-memory

Fix/conical memory
VisActor · Dec 29, 2023 · 203c25a · 203c25a
2 parents bb52623 + 638d522
commit 203c25a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-conical-memory_2023-12-29-07-56.json b/common/changes/@visactor/vrender-core/fix-conical-memory_2023-12-29-07-56.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with conical cache not work as expect",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/canvas/conical-gradient.ts b/packages/vrender-core/src/canvas/conical-gradient.ts
@@ -22,7 +22,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { pi2 } from '@visactor/vutils';
+import { pi2, LRU } from '@visactor/vutils';
 import { application } from '../application';
 import type { IConicalGradient, IContext2d } from '../interface';
 import { interpolateColor } from '../color-string';
@@ -52,10 +52,25 @@ class ConicalCanvas {
 }
 
 // todo 目前环形渐变缓存还是依赖于x和y，后续优化环形渐变
-export class ColorInterpolate {
+export class ColorInterpolate extends LRU {
   private readonly rgbaSet: Uint8ClampedArray;
+  private cacheParams: {
+    CLEAN_THRESHOLD?: number;
+    L_TIME?: number;
+    R_COUNT?: number;
+    R_TIMESTAMP_MAX_SIZE?: number;
+  } = { CLEAN_THRESHOLD: 100, L_TIME: 1e3 };
+  static _instance: ColorInterpolate;
+
+  static getInstance() {
+    if (!ColorInterpolate._instance) {
+      ColorInterpolate._instance = new ColorInterpolate();
+    }
+    return ColorInterpolate._instance;
+  }
 
   constructor(stops: [number, string][] = [], precision = 100) {
+    super();
     const canvas = ConicalCanvas.GetCanvas();
     const conicalCtx = ConicalCanvas.GetCtx();
     canvas.width = precision;
@@ -84,7 +99,7 @@ export class ColorInterpolate {
     return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;
   }
 
-  static dataMap: Map<string, ColorInterpolate> = new Map();
+  dataMap: Map<string, { data: ColorInterpolate; timestamp: number[] }> = new Map();
   // static lastCache: {
   //   stops: [number, string][],
   //   precision: number,
@@ -95,24 +110,19 @@ export class ColorInterpolate {
   //   lineWidth: number,
   // } | null = null;
 
-  static GetOrCreate(stops: [number, string][] = [], precision = 100) {
-    let str = '';
+  GetOrCreate(x: number, y: number, w: number, h: number, stops: [number, string][] = [], precision = 100) {
+    let str = `${x}${y}${w}${h}`;
     stops.forEach(item => (str += item.join()));
     str += precision;
-    let colorInter = ColorInterpolate.dataMap.get(str);
+    let colorInter = this.dataMap.get(str);
     if (!colorInter) {
-      colorInter = new ColorInterpolate(stops, precision);
-      ColorInterpolate.dataMap.set(str, colorInter);
+      const data = new ColorInterpolate(stops, precision);
+      colorInter = { data, timestamp: [] };
+      this.addLimitedTimestamp(colorInter, Date.now(), {});
+      this.dataMap.set(str, colorInter);
     }
-    return colorInter;
-  }
-
-  static SetColorInterpolateInstance(stops: string, ins: ColorInterpolate) {
-    ColorInterpolate.dataMap.set(stops, ins);
-  }
-
-  static GetColorInterpolateInstance(stops: string): ColorInterpolate | undefined {
-    return ColorInterpolate.dataMap.get(stops);
+    this.clearCache(this.dataMap, this.cacheParams);
+    return colorInter.data;
   }
 }
 
@@ -269,7 +279,7 @@ export function createConicalGradient(
   // 每一度一个三角形
   const stepNum = deltaDeg + 1;
   const step = deltaAngle / Math.max(1, stepNum - 1);
-  const colorInter = ColorInterpolate.GetOrCreate(stops, stepNum);
+  const colorInter = ColorInterpolate.getInstance().GetOrCreate(x, y, width, height, stops, stepNum);
 
   const lineWidth = (2 * Math.PI * r) / 360;
 

diff --git a/packages/vrender/__tests__/browser/src/pages/arc.ts b/packages/vrender/__tests__/browser/src/pages/arc.ts
@@ -113,36 +113,36 @@ export const page = () => {
   //   cap: false
   // }));
 
-  // graphics.push(createArc({
-  //   innerRadius: 60,
-  //   outerRadius: 137.8,
-  //   startAngle: 0,
-  //   endAngle: Math.PI * 2,
-  //   x: 500,
-  //   y: 200,
-  //   fill: {
-  //     gradient: 'linear',
-  //     x0: 0,
-  //     y0: 0,
-  //     x1: 1,
-  //     y1: 0,
-  //     stops: [
-  //       { offset: 0, color: 'green' },
-  //       { offset: 0.5, color: 'orange' },
-  //       { offset: 1, color: 'red' }
-  //     ]
-  //   },
-  //   fillOpacity: 0.3,
-  //   background:
-  //     '<svg t="1683876749384" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5625" width="200" height="200"><path d="M928.662069 17.655172h-812.137931v208.331035h812.137931z" fill="#F1543F" p-id="5626"></path><path d="M1020.468966 275.42069l-236.579311 367.227586c0-17.655172-3.531034-35.310345-14.124138-49.434483-17.655172-24.717241-56.496552-28.248276-81.213793-45.903448-21.186207-14.124138-35.310345-42.372414-60.027586-56.496552L928.662069 17.655172l24.717241 14.124138c88.275862 49.434483 116.524138 158.896552 67.089656 243.64138M416.662069 490.813793c-21.186207 14.124138-38.841379 42.372414-60.027586 56.496552-24.717241 17.655172-63.558621 24.717241-81.213793 45.903448-10.593103 14.124138-10.593103 31.77931-14.124138 49.434483L24.717241 275.42069C-24.717241 190.675862 3.531034 81.213793 91.806897 31.77931l24.717241-14.124138 300.137931 473.158621z" fill="#FF7058" p-id="5627"></path><path d="M893.351724 656.772414c0 38.841379-35.310345 70.62069-45.903448 102.4-10.593103 35.310345-3.531034 81.213793-24.717242 109.462069-21.186207 28.248276-67.089655 35.310345-98.868965 56.496551-31.77931 28.248276-52.965517 70.62069-88.275862 81.213794-35.310345 10.593103-77.682759-10.593103-112.993104-10.593104-38.841379 0-81.213793 21.186207-116.524137 10.593104S349.572414 953.37931 317.793103 932.193103c-31.77931-21.186207-77.682759-28.248276-98.868965-56.496551-21.186207-28.248276-14.124138-74.151724-24.717241-109.462069-10.593103-35.310345-45.903448-67.089655-45.903449-102.4 0-38.841379 35.310345-70.62069 45.903449-105.931035 10.593103-35.310345 3.531034-81.213793 24.717241-109.462069 21.186207-28.248276 67.089655-35.310345 98.868965-56.496551 28.248276-21.186207 49.434483-63.558621 88.275863-74.151725 35.310345-10.593103 77.682759 10.593103 116.524137 10.593104 38.841379 0 81.213793-21.186207 112.993104-10.593104 35.310345 10.593103 56.496552 52.965517 88.275862 74.151725 31.77931 21.186207 77.682759 28.248276 98.868965 56.496551 21.186207 28.248276 14.124138 74.151724 24.717242 109.462069 10.593103 31.77931 45.903448 63.558621 45.903448 98.868966" fill="#F8B64C" p-id="5628"></path><path d="M790.951724 656.772414c0 144.772414-120.055172 264.827586-268.358621 264.827586-148.303448 0-268.358621-120.055172-268.35862-264.827586s120.055172-264.827586 268.35862-264.827586c148.303448 0 268.358621 120.055172 268.358621 264.827586" fill="#FFD15C" p-id="5629"></path><path d="M706.206897 589.682759h-123.586207c-7.062069 0-10.593103-3.531034-14.124138-10.593104L529.655172 466.096552c-3.531034-14.124138-21.186207-14.124138-28.248275 0l-38.84138 112.993103c-3.531034 7.062069-7.062069 10.593103-14.124138 10.593104H335.448276c-14.124138 0-21.186207 17.655172-7.062069 24.717241l98.868965 70.62069c3.531034 3.531034 7.062069 10.593103 3.531035 14.124138L391.944828 812.137931c-3.531034 14.124138 10.593103 24.717241 21.186206 14.124138l98.868966-70.62069c3.531034-3.531034 10.593103-3.531034 17.655172 0l98.868966 70.62069c10.593103 7.062069 24.717241-3.531034 21.186207-14.124138l-38.841379-112.993103c-3.531034-7.062069 0-10.593103 3.531034-14.124138l98.868966-70.62069c14.124138-7.062069 7.062069-24.717241-7.062069-24.717241" fill="#F8B64C" p-id="5630"></path></svg>',
-  //   texture: 'circle',
-  //   textureColor: 'orange',
-  //   stroke: 'green',
-  //   lineWidth: 2,
-  //   cap: false
-  // }));
+  const arc = createArc({
+    innerRadius: 60,
+    outerRadius: 137.8,
+    startAngle: 0,
+    endAngle: Math.PI * 2,
+    x: 500,
+    y: 200,
+    fill: {
+      x: 0.5,
+      y: 0.5,
+      startAngle: 0,
+      endAngle: 6.283185307179586,
+      stops: [
+        { offset: 0, color: '#ed2f6a' },
+        { offset: 0.2, color: '#621d34' },
+        { offset: 0.4, color: '#c08eaf' },
+        { offset: 0.6, color: '#806d9e' },
+        { offset: 0.8, color: '#2b73af' },
+        { offset: 1, color: '#2f90b9' }
+      ],
+      gradient: 'conical'
+    },
+    stroke: 'green',
+    lineWidth: 2,
+    cap: false
+  });
+  graphics.push(arc);
+
+  arc.animate().from({ endAngle: 0 }, 10000, 'linear');
 
-  graphics.length = 0;
   graphics.push(
     createArc({
       visible: true,