From cbaf2671414ff111becd565c3d5bc2566a33563c Mon Sep 17 00:00:00 2001 From: "xuying.xu" Date: Wed, 10 Apr 2024 13:51:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20shape=E5=A2=9E=E5=8A=A0step=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f-engine/src/shape/smoothPolyline.ts | 31 ++- packages/f-engine/src/types/shape.ts | 75 +++---- .../f-engine/test/shape/polyline.test.tsx | 196 ++++++++++++++++++ 3 files changed, 264 insertions(+), 38 deletions(-) create mode 100644 packages/f-engine/test/shape/polyline.test.tsx diff --git a/packages/f-engine/src/shape/smoothPolyline.ts b/packages/f-engine/src/shape/smoothPolyline.ts index 5ef9d38c..47cee868 100644 --- a/packages/f-engine/src/shape/smoothPolyline.ts +++ b/packages/f-engine/src/shape/smoothPolyline.ts @@ -13,13 +13,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', 'stepMiddle', 'stepStart', 'stepEnd'].indexOf(name) > -1) { this.updatePath(); } } private updatePath() { - const { smooth, points } = this.parsedStyle; + const { smooth, points, stepMiddle, stepStart, stepEnd } = this.parsedStyle; const { points: pos } = points; const d: PathArray = [['M', pos[0][0], pos[0][1]]]; @@ -44,6 +44,33 @@ 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 (stepEnd) { + let i; + let l; + 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]]); + } + } else if (stepMiddle) { + let i; + let l; + 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]]); + } + } else if (stepStart) { + let i; + let l; + 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]]); + } } else { let i; let l; diff --git a/packages/f-engine/src/types/shape.ts b/packages/f-engine/src/types/shape.ts index 698f649a..fff528af 100644 --- a/packages/f-engine/src/types/shape.ts +++ b/packages/f-engine/src/types/shape.ts @@ -100,24 +100,24 @@ type omitStyleProps = 'display'; export interface GroupStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface RectStyleProps extends StyleFlexProps, - StyleClipProps, - Omit { + StyleClipProps, + Omit { radius?: ArrayAttribute; } export interface CircleStyleProps extends StyleFlexProps, - StyleClipProps, - Omit { + StyleClipProps, + Omit { r?: string | number; } export interface LineStyleProps extends StyleFlexProps, - StyleClipProps, - Omit { + StyleClipProps, + Omit { x1?: string | number; y1?: string | number; x2?: string | number; @@ -125,42 +125,45 @@ export interface LineStyleProps } export interface PolygonStyleProps extends StyleFlexProps, - StyleClipProps, - Omit { + StyleClipProps, + Omit { points: [number, number][] | [string, string][] | [number, string][] | [string, number][]; smooth?: boolean; } export interface PolylineStyleProps extends StyleFlexProps, - StyleClipProps, - Omit { + StyleClipProps, + Omit { points: [number, number][] | [string, string][] | [number, string][] | [string, number][]; smooth?: boolean; + stepMiddle?: boolean; + stepStart?: boolean; + stepEnd?: boolean; } export interface ArcStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface SectorStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface TextStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface ImageStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface PathStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } export interface MarkerStyleProps extends StyleFlexProps, - StyleClipProps, - Omit {} + StyleClipProps, + Omit { } interface AnimationBase { // 缓动函数 @@ -198,15 +201,15 @@ export interface ShapeElementProps extends IProps { animation?: AnimationProps; } -export interface GroupShapeProps extends ShapeElementProps {} -export interface RectShapeProps extends ShapeElementProps {} -export interface CircleShapeProps extends ShapeElementProps {} -export interface LineShapeProps extends ShapeElementProps {} -export interface PolygonShapeProps extends ShapeElementProps {} -export interface PolylineShapeProps extends ShapeElementProps {} -export interface ArcShapeProps extends ShapeElementProps {} -export interface SectorShapeProps extends ShapeElementProps {} -export interface TextShapeProps extends ShapeElementProps {} -export interface ImageShapeProps extends ShapeElementProps {} -export interface PathShapeProps extends ShapeElementProps {} -export interface MarkerShapeProps extends ShapeElementProps {} +export interface GroupShapeProps extends ShapeElementProps { } +export interface RectShapeProps extends ShapeElementProps { } +export interface CircleShapeProps extends ShapeElementProps { } +export interface LineShapeProps extends ShapeElementProps { } +export interface PolygonShapeProps extends ShapeElementProps { } +export interface PolylineShapeProps extends ShapeElementProps { } +export interface ArcShapeProps extends ShapeElementProps { } +export interface SectorShapeProps extends ShapeElementProps { } +export interface TextShapeProps extends ShapeElementProps { } +export interface ImageShapeProps extends ShapeElementProps { } +export interface PathShapeProps extends ShapeElementProps { } +export interface MarkerShapeProps extends ShapeElementProps { } diff --git a/packages/f-engine/test/shape/polyline.test.tsx b/packages/f-engine/test/shape/polyline.test.tsx new file mode 100644 index 00000000..64caf4d7 --- /dev/null +++ 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 } = ( + + + + ); + 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 } = ( + + + + + ); + 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 } = ( + + + + + ); + 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 } = ( + + + + + ); + const canvas = new Canvas(props); + await canvas.render(); + await delay(500); + expect(context).toMatchImageSnapshot(); + }) +}); \ No newline at end of file