diff --git a/packages/lb-annotation/src/core/toolOperation/ViewOperation.ts b/packages/lb-annotation/src/core/toolOperation/ViewOperation.ts index 7fa591721..3b139566b 100644 --- a/packages/lb-annotation/src/core/toolOperation/ViewOperation.ts +++ b/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); diff --git a/packages/lb-annotation/src/types/tool/annotationView.d.ts b/packages/lb-annotation/src/types/tool/annotationView.d.ts index e5fc9f7bc..2bdfc1a67 100644 --- a/packages/lb-annotation/src/types/tool/annotationView.d.ts +++ b/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 { diff --git a/packages/lb-components/docs/annotationView.md b/packages/lb-components/docs/annotationView.md index 78eaf2765..38aebc3dd 100644 --- a/packages/lb-components/docs/annotationView.md +++ b/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 diff --git a/packages/lb-components/docs/renderEnhance.md b/packages/lb-components/docs/renderEnhance.md new file mode 100644 index 000000000..d88b84bc1 --- /dev/null +++ b/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 ( + + ) +} + +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; +} +``` + diff --git a/packages/lb-components/docs/renderEnhance_en-US.md b/packages/lb-components/docs/renderEnhance_en-US.md new file mode 100644 index 000000000..e69de29bb diff --git a/packages/lb-demo/src/mock/index.js b/packages/lb-demo/src/mock/index.js index 68fdba259..cab311a29 100644 --- a/packages/lb-demo/src/mock/index.js +++ b/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, + ); + }, + }, + }, ];