Merge pull request #1929 from VisActor/feat/gradient-percent

feat: linear-gradient support ignore percent, closed #1926

Author: neuqzxy

common/changes/@visactor/vrender-core/feat-gradient-percent_2025-08-22-03-32.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: linear-gradient support ignore percent, closed #1926",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}

packages/vrender-core/src/common/color-utils.ts

@@ -371,6 +371,60 @@ export class GradientParser {
     }
     return c;
   }
+  static processColorStops(
+    colorStops: Array<{ value: string; length?: { value: string } }>
+  ): { color: string; offset: number }[] {
+    if (!colorStops || colorStops.length === 0) {
+      return [];
+    }
+
+    const anyStopHasLength = colorStops.some((item: any) => item.length);
+
+    if (anyStopHasLength) {
+      const stops = colorStops.map((item: any) => ({
+        color: item.value,
+        offset: item.length ? parseFloat(item.length.value) / 100 : -1
+      }));
+
+      // If first color stop has no position, it defaults to 0%
+      if (stops[0].offset < 0) {
+        stops[0].offset = 0;
+      }
+
+      // If last color stop has no position, it defaults to 100%
+      if (stops[stops.length - 1].offset < 0) {
+        stops[stops.length - 1].offset = 1;
+      }
+
+      // If a color stop in between has no position, its position is the average of the preceding and succeeding color stops with positions.
+      for (let i = 1; i < stops.length - 1; i++) {
+        if (stops[i].offset < 0) {
+          const prevWithOffsetIdx = i - 1;
+          let nextWithOffsetIdx = i + 1;
+          while (nextWithOffsetIdx < stops.length && stops[nextWithOffsetIdx].offset < 0) {
+            nextWithOffsetIdx++;
+          }
+
+          const startOffset = stops[prevWithOffsetIdx].offset;
+          const endOffset = stops[nextWithOffsetIdx].offset;
+          const unspecCount = nextWithOffsetIdx - prevWithOffsetIdx;
+
+          for (let j = 1; j < unspecCount; j++) {
+            stops[prevWithOffsetIdx + j].offset = startOffset + ((endOffset - startOffset) * j) / unspecCount;
+          }
+          i = nextWithOffsetIdx - 1;
+        }
+      }
+      return stops;
+    }
+    return colorStops.map((item: any, index: number) => {
+      const offset = colorStops.length > 1 ? index / (colorStops.length - 1) : 0;
+      return {
+        color: item.value,
+        offset
+      };
+    });
+  }
   private static ParseConic(datum: any): IConicalGradient {
     const { orientation, colorStops = [] } = datum;
     const halfPi = pi / 2;
@@ -381,12 +435,7 @@ export class GradientParser {
       y: 0.5,
       startAngle: sa,
       endAngle: sa + pi2,
-      stops: colorStops.map((item: any) => {
-        return {
-          color: item.value,
-          offset: parseFloat(item.length.value) / 100
-        };
-      })
+      stops: GradientParser.processColorStops(colorStops)
     };
   }
   private static ParseRadial(datum: any): IRadialGradient {
@@ -399,12 +448,7 @@ export class GradientParser {
       y1: 0.5,
       r0: 0,
       r1: 1,
-      stops: colorStops.map((item: any) => {
-        return {
-          color: item.value,
-          offset: parseFloat(item.length.value) / 100
-        };
-      })
+      stops: GradientParser.processColorStops(colorStops)
     };
   }
   private static ParseLinear(datum: any): ILinearGradient {
@@ -448,12 +492,7 @@ export class GradientParser {
       y0,
       x1,
       y1,
-      stops: colorStops.map((item: any) => {
-        return {
-          color: item.value,
-          offset: parseFloat(item.length.value) / 100
-        };
-      })
+      stops: GradientParser.processColorStops(colorStops)
     };
   }
 }

packages/vrender-core/src/index.ts

@@ -21,6 +21,7 @@ export * from './factory';
 
 /* export common */
 export * from './common/text';
+export * from './common/color-utils';
 export * from './common/bezier-utils';
 export * from './common/bounds-context';
 export * from './common/seg-context';

packages/vrender/__tests__/browser/src/pages/rect.ts

@@ -1,7 +1,7 @@
 import { createStage, container, createRect, IGraphic, createGroup, createSymbol } from '@visactor/vrender';
 import { roughModule } from '@visactor/vrender-kits';
 
-container.load(roughModule);
+// container.load(roughModule);
 export const page = () => {
   const graphics: IGraphic[] = [];
   // graphics.push(
@@ -78,8 +78,8 @@ export const page = () => {
     stroke: 'red',
     // scaleCenter: ['50%', '50%'],
     // _debug_bounds: true,
-    fill: 'conic-gradient(from 90deg, rgba(5,0,255,1) 16%, rgba(0,255,10,1) 41%, rgba(9,9,121,1) 53%, rgba(0,212,255,1) 100%)',
-    // fill: 'linear-gradient(90deg, #215F97 0%, #FF948F 100%)',
+    // fill: 'conic-gradient(from 90deg, rgba(5,0,255,1) 16%, rgba(0,255,10,1) 41%, rgba(9,9,121,1) 53%, rgba(0,212,255,1) 100%)',
+    fill: 'linear-gradient(90deg, #215F97, #FF948F)',
     // cornerRadius: [5, 10, 15, 20],
     lineWidth: 5,
     anchor: ['50%', '50%'],

packages/vrender/__tests__/common/color.test.ts

@@ -0,0 +1,28 @@
+import { GradientParser } from '../../src/index';
+
+it('gradient-color', () => {
+  expect(GradientParser.processColorStops([{ value: 'rgb(100, 0, 0)' }, { value: 'rgb(0, 100, 0)' }])).toEqual([
+    { color: 'rgb(100, 0, 0)', offset: 0 },
+    { color: 'rgb(0, 100, 0)', offset: 1 }
+  ]);
+  expect(
+    GradientParser.processColorStops([
+      { value: 'rgb(100, 0, 0)', length: { value: '0' } },
+      { value: 'rgb(0, 100, 0)', length: { value: '100' } }
+    ])
+  ).toEqual([
+    { color: 'rgb(100, 0, 0)', offset: 0 },
+    { color: 'rgb(0, 100, 0)', offset: 1 }
+  ]);
+  expect(
+    GradientParser.processColorStops([
+      { value: 'rgb(100, 0, 0)', length: { value: '0' } },
+      { value: 'rgb(0, 0, 100)', length: { value: '30' } },
+      { value: 'rgb(0, 100, 0)', length: { value: '100' } }
+    ])
+  ).toEqual([
+    { color: 'rgb(100, 0, 0)', offset: 0 },
+    { color: 'rgb(0, 0, 100)', offset: 0.3 },
+    { color: 'rgb(0, 100, 0)', offset: 1 }
+  ]);
+});