feat: add renderEnhance function

packages/lb-annotation/src/core/toolOperation/ViewOperation.ts

@@ -520,6 +520,14 @@ export default class ViewOperation extends BasicToolOperation {
             //
           }
         }
+        annotation.annotation?.renderEnhance?.({
+          ctx: this.ctx,
+          canvas: this.canvas,
+          currentPos: this.currentPos,
+          zoom: this.zoom,
+          data: annotation,
+          instance: this,
+        });
       });
     } catch (e) {
       console.error('ViewOperation Render Error', e);

packages/lb-annotation/src/types/tool/annotationView.d.ts

@@ -4,9 +4,19 @@ declare interface IBasicStyle {
   thickness?: number; // 当前图形宽度
 }
 
+declare interface IRenderEnhanceParams {
+  ctx: CanvasRenderingContext2D | null;
+  canvas: HTMLCanvasElement | null;
+  currentPos: ICoordinate;
+  zoom: number;
+  data: IAnnotationData;
+  instance: ViewOperation;
+}
+
 declare interface IGraphicsBasicConfig extends IBasicStyle {
   hiddenText?: boolean; // 是否隐藏文本
   isReference?: boolean; // 是否进行的参考显示
+  renderEnhance: (params: IRenderEnhanceParams) => void;
 }
 
 declare interface IAnnotationData {

packages/lb-components/docs/annotationView.md

@@ -36,6 +36,9 @@ export default DefaultComponent;
 | onChange        | 监听内部的对标注数据的操作              | 否       | (type: 'hover' \| 'selected', ids: string[]) => void; |              -              |
 | showLoading     | 是否进行加载中                          | 否       | boolean                                               |            false            |
 
+### Special API
+
+- [renderEnhance - 渲染增强方法](./docs/renderEnhance.md)
 
 ### Type
 

packages/lb-components/docs/renderEnhance.md

@@ -0,0 +1,87 @@
+[English](./renderEnhance_en-US.md) | 简体中文
+
+# renderEnhance 渲染增强函数
+
+> 为数据提供渲染增强能力，当你不满足于当前的渲染情况，想要自己动手进行扩展时，renderEnhance给你提供所有可能用到的属性和数据，在每次获取渲染的时候都会执行，所以需要注意renderEnhance的执行时间和性能，以免造成卡顿。
+
+## Examples
+
+```ts
+import { AnnotationView } from '@labelbee/lb-components';
+
+const src = ''; // 可访问的图片路径
+
+const data=[{
+    type: 'rect',
+    annotation: {
+      id: '1231999923999',
+      x: 60,
+      y: 260,
+      width: 100,
+      height: 100,
+      stroke: 'pink',
+      name: 'Bag',
+      renderEnhance: (params) => {
+        console.log(params);
+        const {
+          ctx,
+          data: { annotation },
+          zoom,
+          currentPos,
+        } = params;
+
+        ctx.fillStyle = annotation.stroke;
+
+        ctx.fillRect(
+          annotation.x * zoom + currentPos.x - 2,
+          annotation.y * zoom + currentPos.y - 20 * zoom,
+          40 * zoom,
+          20 * zoom,
+        );
+        ctx.strokeStyle = 'white';
+        ctx.strokeText(
+          annotation.name,
+          annotation.x * zoom + currentPos.x + 6 * zoom,
+          annotation.y * zoom + currentPos.y - 7 * zoom,
+        );
+      },
+    },
+  }]
+
+const DemoComponent = () => {
+  return (
+    <AnnotationView
+     src={src}
+     annotations={data}
+   />
+  )
+}
+
+export default DemoComponent;
+```
+
+## API
+
+| 参数       | 说明                                                         | 类型                            |                             默认                             |
+| ---------- | ------------------------------------------------------------ | ------------------------------- | :----------------------------------------------------------: |
+| ctx        | 当前canvas的上下文，有了上下文，您就可以绘制任何喜欢的东西   | CanvasRenderingContext2D \|null |                             null                             |
+| canvas     | 当前canvas标签的dom节点                                      | HTMLCanvasElement\|null         |                             null                             |
+| currentPos | 当前位置信息 - x，y是在当前2维平面画布上的横纵坐标，可用来计算新的位置信息 | ICoordinate                     |                         {x: 0, y: 0}                         |
+| zoom       | 当前缩放比例 - 例如可以根据currentPos和zoom建一个跟随框或文字 | number                          |                              1                               |
+| data       | 当前渲染的数据，type是该标注的渲染类型，annotation是与type相对应具体的标注信息 | IAnnotationData                 | eg:{type: "rect",annotation: {id: '1231999923999', x: 60, y: 260, width: 100, height: 100, …}} |
+| instance   | 当前标注工具实例，可以拿到当前实例的所有信息，除了上面的属性，还有绘制过程中用到的所有属性和数据，例如可以从instance.annotations拿到所有标注数据 | ViewOperation                   |                              {}                              |
+
+
+### Type
+
+```ts
+declare interface IRenderEnhanceParams {
+  ctx: CanvasRenderingContext2D | null;
+  canvas: HTMLCanvasElement|null;
+  currentPos: ICoordinate;
+  zoom: number;
+  data: IAnnotationData;
+  instance: ViewOperation;
+}
+```
+

packages/lb-demo/src/mock/index.js

@@ -220,4 +220,40 @@ export const DEFAULT_ANNOTATIONS = [
       text: 'Key: Loooooooooooooooooooooooooooooooooog value\nSecond One: short value',
     },
   },
+  {
+    type: 'rect',
+    annotation: {
+      id: '1231999923999',
+      x: 60,
+      y: 260,
+      width: 100,
+      height: 100,
+      stroke: 'pink',
+      name: 'Bag',
+      renderEnhance: (params) => {
+        console.log(params);
+        const {
+          ctx,
+          data: { annotation },
+          zoom,
+          currentPos,
+        } = params;
+
+        ctx.fillStyle = annotation.stroke;
+
+        ctx.fillRect(
+          annotation.x * zoom + currentPos.x - 2,
+          annotation.y * zoom + currentPos.y - 20 * zoom,
+          40 * zoom,
+          20 * zoom,
+        );
+        ctx.strokeStyle = 'white';
+        ctx.strokeText(
+          annotation.name,
+          annotation.x * zoom + currentPos.x + 6 * zoom,
+          annotation.y * zoom + currentPos.y - 7 * zoom,
+        );
+      },
+    },
+  },
 ];