feat: graphic support pathProxy config

Author: skie1997

packages/vrender-core/src/graphic/area.ts

@@ -29,7 +29,7 @@ export class Area extends Graphic<IAreaGraphicAttribute> implements IArea {
     return super.isValid() && this._isValid();
   }
   private _isValid(): boolean {
-    if (this.pathProxy) {
+    if (this.getPathProxy()) {
       return true;
     }
     const { points, segments } = this.attribute;

packages/vrender-core/src/graphic/config.ts

@@ -206,6 +206,7 @@ export const DefaultAttribute: Required<IGraphicAttribute> = {
   shadowPickMode: 'graphic',
   keepStrokeScale: false,
   clipConfig: null,
+  pathProxy: null,
   roughStyle: null,
   ...DefaultDebugAttribute,
   ...DefaultStyle,

packages/vrender-core/src/graphic/graphic-service/graphic-service.ts

@@ -260,7 +260,7 @@ export class DefaultGraphicService implements IGraphicService {
   }
   // TODO delete
   updatePathProxyAABBBounds(aabbBounds: IAABBBounds, graphic?: IGraphic): boolean {
-    const path = typeof graphic.pathProxy === 'function' ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
+    const path = graphic?.getPathProxy?.();
     if (!path) {
       return false;
     }

packages/vrender-core/src/graphic/graphic.ts

@@ -105,6 +105,7 @@ export const PURE_STYLE_KEY = [
 
 export const GRAPHIC_UPDATE_TAG_KEY = [
   'lineWidth',
+  'pathProxy',
   // 'lineCap',
   // 'lineJoin',
   // 'miterLimit',
@@ -321,7 +322,7 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
   // declare prevAttrs?: T;
   // declare finalAttrs?: T;
 
-  declare pathProxy?: ICustomPath2D;
+  declare pathProxy?: string | ICustomPath2D | ((attrs: T) => string | ICustomPath2D);
   // 依附于某个theme，如果该节点不存在parent，那么这个Theme就作为节点的Theme，避免添加到节点前计算属性
   declare attachedThemeGraphic?: IGraphic;
   protected updateAABBBoundsStamp: number;
@@ -555,7 +556,7 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
   }
 
   updatePathProxyAABBBounds(aabbBounds: IAABBBounds): boolean {
-    const path = typeof this.pathProxy === 'function' ? (this.pathProxy as any)(this.attribute) : this.pathProxy;
+    const path = this.getPathProxy();
     if (!path) {
       return false;
     }
@@ -1492,13 +1493,35 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
   }
 
   createPathProxy(path?: string) {
-    if (isString(path, true)) {
-      this.pathProxy = new CustomPath2D().fromString(path as string);
-    } else {
-      this.pathProxy = new CustomPath2D();
+    const proxy = isString(path, true) ? new CustomPath2D().fromString(path as string) : new CustomPath2D();
+    // 兼容：保留运行时字段，同时将能力下沉到attribute配置
+    this.pathProxy = proxy;
+    (this.attribute as any).pathProxy = proxy;
+    this.addUpdateShapeAndBoundsTag();
+    this.onAttributeUpdate();
+    return proxy;
+  }
+
+  getPathProxy(): ICustomPath2D | null {
+    const attributePathProxy = (this.attribute as any)?.pathProxy;
+    const rawPathProxy = attributePathProxy ?? this.pathProxy;
+    if (!rawPathProxy) {
+      return null;
+    }
+
+    const resolvedPathProxy =
+      typeof rawPathProxy === 'function'
+        ? (rawPathProxy as (attrs: T) => string | ICustomPath2D)(this.attribute)
+        : rawPathProxy;
+    if (!resolvedPathProxy) {
+      return null;
+    }
+
+    if (isString(resolvedPathProxy, true)) {
+      return new CustomPath2D().fromString(resolvedPathProxy as string);
     }
 
-    return this.pathProxy;
+    return resolvedPathProxy as ICustomPath2D;
   }
 
   loadImage(image: any, background: boolean = false) {
@@ -1632,6 +1655,10 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
   abstract clone(): IGraphic<any>;
 
   toCustomPath(): ICustomPath2D {
+    const pathProxy = this.getPathProxy();
+    if (pathProxy) {
+      return pathProxy;
+    }
     // throw new Error('暂不支持');
     const renderer = (this.stage?.renderService || application.renderService)?.drawContribution?.getRenderContribution(
       this

packages/vrender-core/src/graphic/line.ts

@@ -27,7 +27,7 @@ export class Line extends Graphic<ILineGraphicAttribute> implements ILine {
     return super.isValid() && this._isValid();
   }
   private _isValid(): boolean {
-    if (this.pathProxy) {
+    if (this.getPathProxy()) {
       return true;
     }
     const { points, segments } = this.attribute;

packages/vrender-core/src/interface/graphic.ts

@@ -756,6 +756,10 @@ export type IGraphicAttribute = IDebugType &
     clipConfig: {
       shape: string;
     } | null;
+    /**
+     * 自定义路径，可覆盖图元默认路径渲染（支持字符串、Path2D对象、以及动态函数）
+     */
+    pathProxy?: string | ICustomPath2D | ((attrs: Partial<IGraphicAttribute>) => string | ICustomPath2D) | null;
   };
 
 export interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {
@@ -832,7 +836,7 @@ export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphi
   attribute: Partial<T>;
 
   /** 用于实现morph动画场景，转换成bezier曲线渲染 */
-  pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);
+  pathProxy?: string | ICustomPath2D | ((attrs: T) => string | ICustomPath2D);
   incremental?: number;
   incrementalAt?: number;
 
@@ -929,6 +933,8 @@ export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphi
 
   /** 创建pathProxy */
   createPathProxy: (path?: string) => void;
+  /** 获取解析后的pathProxy（优先取attribute.pathProxy） */
+  getPathProxy: () => ICustomPath2D | null;
   /** 将图形转换成CustomPath2D */
   toCustomPath?: () => ICustomPath2D;
 

packages/vrender-core/src/render/contributions/render/base-render.ts

@@ -194,7 +194,8 @@ export abstract class BaseRender<T extends IGraphic> {
       themeAttribute: IThemeAttribute
     ) => boolean
   ) {
-    if (!graphic.pathProxy) {
+    const path = graphic.getPathProxy();
+    if (!path) {
       return false;
     }
 
@@ -231,7 +232,6 @@ export abstract class BaseRender<T extends IGraphic> {
     }
 
     context.beginPath();
-    const path = typeof graphic.pathProxy === 'function' ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
     renderCommandList(path.commandList, context, x, y);
 
     // shadow

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

@@ -179,6 +179,10 @@ export const pages = [
         name: 'clip测试',
         path: 'clip'
       },
+      {
+        name: 'pathProxy挖洞',
+        path: 'path-proxy-hole'
+      },
       {
         name: 'wordcloud3d测试',
         path: 'wordcloud3d'