feat: shape增加step类型 (#260)

Co-authored-by: xuying.xu <[email protected]>
antvis · Apr 10, 2024 · 884424a · 884424a
1 parent f307f6d
commit 884424a
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 2 deletions.
diff --git a/packages/f-engine/src/shape/smoothPolyline.ts b/packages/f-engine/src/shape/smoothPolyline.ts
@@ -2,6 +2,7 @@ import { Path } from '@antv/g-lite';
 import { PathArray } from '@antv/util';
 import * as Smooth from './util/smooth';
 
+
 export class SmoothPolyline extends Path {
   static tag = 'smooth-polyline';
   parsedStyle: any;
@@ -13,13 +14,13 @@ export class SmoothPolyline extends Path {
 
   setAttribute(name, value, force?: boolean) {
     super.setAttribute(name, value, force);
-    if (['smooth', 'points'].indexOf(name) > -1) {
+    if (['smooth', 'points', 'step'].indexOf(name) > -1) {
       this.updatePath();
     }
   }
 
   private updatePath() {
-    const { smooth, points } = this.parsedStyle;
+    const { smooth, points, step } = this.parsedStyle;
     const { points: pos } = points;
 
     const d: PathArray = [['M', pos[0][0], pos[0][1]]];
@@ -44,6 +45,35 @@ export class SmoothPolyline extends Path {
         const sp = sps[i];
         d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
       }
+    } else if (step) {
+      let i;
+      let l;
+      switch (step) {
+        case "start":
+          for (i = 1, l = pos.length; i < l; i++) {
+            const x = pos[i - 1][0]
+            d.push(['L', x, pos[i - 1][1]])
+            d.push(['L', x, pos[i][1]])
+            d.push(['L', pos[i][0], pos[i][1]]);
+          }
+          break;
+        case "middle":
+          for (i = 1, l = pos.length; i < l; i++) {
+            const x = (pos[i][0] + pos[i - 1][0]) / 2
+            d.push(['L', x, pos[i - 1][1]])
+            d.push(['L', x, pos[i][1]])
+            d.push(['L', pos[i][0], pos[i][1]]);
+          }
+          break;
+        case "end":
+          for (i = 1, l = pos.length; i < l; i++) {
+            const x = pos[i][0]
+            d.push(['L', x, pos[i - 1][1]])
+            d.push(['L', x, pos[i][1]])
+            d.push(['L', pos[i][0], pos[i][1]]);
+          }
+          break;
+      }
     } else {
       let i;
       let l;

diff --git a/packages/f-engine/src/types/shape.ts b/packages/f-engine/src/types/shape.ts
@@ -23,6 +23,7 @@ type ArrayAttribute =
   | [string | number, string | number, string | number]
   | [string | number, string | number, string | number, string | number];
 
+type StepType = 'start' | 'middle' | 'end'
 interface StyleFlexProps {
   display?: 'flex';
   position?: 'relative' | 'absolute';
@@ -136,6 +137,7 @@ export interface PolylineStyleProps
     Omit<GPolylineStyleProps, omitStyleProps | 'points'> {
   points: [number, number][] | [string, string][] | [number, string][] | [string, number][];
   smooth?: boolean;
+  step?: StepType;
 }
 export interface ArcStyleProps
   extends StyleFlexProps,

diff --git a/...e/test/shape/__image_snapshots__/polyline-test-tsx-polyline-polyline-1-snap.png b/...e/test/shape/__image_snapshots__/polyline-test-tsx-polyline-polyline-1-snap.png
diff --git a/...ape/__image_snapshots__/polyline-test-tsx-polyline-step-end-polyline-1-snap.png b/...ape/__image_snapshots__/polyline-test-tsx-polyline-step-end-polyline-1-snap.png
diff --git a/.../__image_snapshots__/polyline-test-tsx-polyline-step-middle-polyline-1-snap.png b/.../__image_snapshots__/polyline-test-tsx-polyline-step-middle-polyline-1-snap.png
diff --git a/...e/__image_snapshots__/polyline-test-tsx-polyline-step-start-polyline-1-snap.png b/...e/__image_snapshots__/polyline-test-tsx-polyline-step-start-polyline-1-snap.png
diff --git a/packages/f-engine/test/shape/polyline.test.tsx b/packages/f-engine/test/shape/polyline.test.tsx
@@ -0,0 +1,196 @@
+import { jsx, Canvas, Component, createRef } from '../../src';
+import { createContext, delay } from '../util';
+const context = createContext();
+import { Renderer } from '@antv/g-mobile-canvas';
+
+
+describe('polyline', () => {
+    it('polyline', async () => {
+        const renderer = new Renderer();
+        const context = createContext('polyline');
+
+        const { props } = (
+          <Canvas renderer={renderer} context={context}>
+            <polyline
+              style={{
+                points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                ],
+                stroke: 'blue'
+              }}
+              animation={{
+                update: {
+                  easing: 'linear',
+                  duration: 100,
+                  property: ['points'],
+                },
+              }}
+            />
+          </Canvas>
+        );
+        const canvas = new Canvas(props);
+        await canvas.render();
+        await delay(500);
+        expect(context).toMatchImageSnapshot();
+    })
+    it('step start polyline', async () => {
+        const renderer = new Renderer();
+        const context = createContext('step start polyline');
+
+        const { props } = (
+          <Canvas renderer={renderer} context={context}>
+            <polyline
+              style={{
+                points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                ],
+                stroke: 'blue'
+              }}
+              animation={{
+                update: {
+                  easing: 'linear',
+                  duration: 100,
+                  property: ['points'],
+                },
+              }}
+            />
+              <polyline
+                style={{
+                  points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                  ],
+                  stroke: 'red',
+                  step: 'start',
+                }}
+                animation={{
+                  update: {
+                    easing: 'linear',
+                    duration: 200,
+                    property: ['points'],
+                  },
+                }}
+              />
+          </Canvas>
+        );
+        const canvas = new Canvas(props);
+        await canvas.render();
+        await delay(500);
+        expect(context).toMatchImageSnapshot();
+    })
+    it('step middle polyline', async () => {
+        const renderer = new Renderer();
+        const context = createContext('step middle polyline');
+
+        const { props } = (
+          <Canvas renderer={renderer} context={context}>
+            <polyline
+              style={{
+                points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                ],
+                stroke: 'blue'
+              }}
+              animation={{
+                update: {
+                  easing: 'linear',
+                  duration: 100,
+                  property: ['points'],
+                },
+              }}
+            />
+              <polyline
+                style={{
+                  points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                  ],
+                  stroke: 'red',
+                  step: 'middle',
+                }}
+                animation={{
+                  update: {
+                    easing: 'linear',
+                    duration: 200,
+                    property: ['points'],
+                  },
+                }}
+              />
+          </Canvas>
+        );
+        const canvas = new Canvas(props);
+        await canvas.render();
+        await delay(500);
+        expect(context).toMatchImageSnapshot();
+    })
+    it('step end polyline', async () => {
+        const renderer = new Renderer();
+        const context = createContext('step end polyline');
+
+        const { props } = (
+          <Canvas renderer={renderer} context={context}>
+            <polyline
+              style={{
+                points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                ],
+                stroke: 'blue'
+              }}
+              animation={{
+                update: {
+                  easing: 'linear',
+                  duration: 100,
+                  property: ['points'],
+                },
+              }}
+            />
+              <polyline
+                style={{
+                  points: [
+                    [0, 10],
+                    [20, 80],
+                    [40, 40],
+                    [60, 10],
+                    [80, 60]
+                  ],
+                  stroke: 'red',
+                  step: 'end'
+                }}
+                animation={{
+                  update: {
+                    easing: 'linear',
+                    duration: 200,
+                    property: ['points'],
+                  },
+                }}
+              />
+          </Canvas>
+        );
+        const canvas = new Canvas(props);
+        await canvas.render();
+        await delay(500);
+        expect(context).toMatchImageSnapshot();
+    })
+});