Package Exports

@labelwu/lb-annotation
@labelwu/lb-annotation/dist/index.js
@labelwu/lb-annotation/es/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@labelwu/lb-annotation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

English | 简体中文

LB-Annotation

标注绘图框架，能快速提供检测、分割、分类等标注操作。

📦 Install

# NPM
$ npm install @labelwu/lb-annotation

# YARN
$ yarn add @labelwu/lb-annotation

Quick Start

import React, { useEffect } from 'react';
import { AnnotationEngine } from '@labelwu/lb-annotation';

const imgSrc =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Andre_Iguodala_2016.jpg/1200px-Andre_Iguodala_2016.jpg';

const App = () => {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      const imgNode = new Image();
      imgNode.src = imgSrc;
      imgNode.onload = () => {
        // 获取当前工具的类
        const annotationEngine = new AnnotationEngine({
          container: ref.current,
          size: {
            width: 1000,
            height: 600,
          },
          toolName: 'rectTool', // 关键
          imgNode,
        });

        // 控制工具实例
        const toolInstance = annotationEngine.toolInstance;

        // 常见用法
        // 1. 设置当前渲染的 setImgNode，设置之后会主动初始化图片大小
        toolInstance.setImgNode(imgNode);

        // 2. 设置当前的标注工具的结果 IRect[] | IPolygonData[]
        const result = [];
        toolInstance.setResult(result);

        // 3. 初始化当前历史结果
        toolInstance.history.initRecord(result, true);

        // 4. 设置当前图片的是否渲染
        toolInstance.setRotate(fileResult.rotate ?? 0);

        // 5. 更改上述配置的样式
        toolInstance.setStyle(styleConfig);

        // 6. 更改当前的窗口的大小
        toolInstance.setSize(canvasSize);

        // 7. 初始化图片的大小
        toolInstance.initImgPos();

        // 8. 按比例方法放大 / 缩小
        toolInstance.zoomChanged(true);
        toolInstance.zoomChanged(false);

        // 9. 设置选中指定框体
        const selectedID = undefined;
        toolInstance.setSelectedID(selectedID);

        // 10. 数据暴露， exportResult 为当前结果数组的，basicImgInfo 为当前图片的宽、高、旋转角度、有无效性
        const [exportResult, basicImgInfo] = toolInstance.exportData();

        // 11. 设置当前是否可以操作
        const forbidOperation = false;
        toolInstance.setForbidOperation(forbidOperation);

        // 12. 设置当前依赖框体
        // 矩形框依赖
        annotationEngine.setBasicInfo(EToolName.Rect, {
          x: 200.91597,
          y: 157.15384,
          width: 174.88402,
          height: 227.26863,
          order: 1,
          valid: true,
          id: 'omd8QAY7',
          sourceID: '0',
          attribute: 'attribute_1',
          textAttribute: '我是文本',
        });
      };
    }
  }, []);

  return <div ref={ref} />;
};

export default App;

接口定义

interface IImageAttribute {
  contrast: number;
  saturation: number;
  brightness: number;
  zoomRatio: number;
  isOriginalSize: boolean;
}

interface IRect {
  x: number;
  y: number;
  width: number;
  height: number;
  id: string;
  sourceID: string;
  valid: boolean;
  order: number;
  attribute: string;
  textAttribute: string;
  disableDelete?: boolean; // 是否允许被删除
  label?: string; // 列表标签
}

interface IPolygonData {
  sourceID: string;
  id: string;
  pointList: IPolygonPoint[];
  valid: boolean;
  order: number;
  textAttribute: string;
  attribute: string;
}

多层级标注

该方式可以将多个工具进行融合，实现多个工具在统一层次进行展示。

下方以一个多边形 + 分割辅助操作进行为例子

import React, { useEffect } from 'react';
import { AnnotationEngine } from '@labelwu/lb-annotation';

const imgSrc =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Andre_Iguodala_2016.jpg/1200px-Andre_Iguodala_2016.jpg';

type TRunPrediction = (params: {
  point: { x: number; y: number };
  rect: { x: number; y: number; w: number; h: number };
}) => Promise<unknown>;

const App = () => {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      const imgNode = new Image();
      imgNode.src = imgSrc;
      imgNode.onload = () => {
        // 获取当前工具的类
        const annotationEngine = new AnnotationEngine({
          container: ref.current,
          size: {
            width: 1000,
            height: 600,
          },
          toolName: ['segmentByRectTool', 'polygonTool'], // 创建通过多层级进行创建
          imgNode,
        });

        // 1. 切换层级 (临时使用该方式切换两个层级的变换)
        annotationEngine.switchLastTwoCanvas();

        // 2. 获取分割层次的 instance, 设置 runPrediction 函数
        const firstToolInstance = annotationEngine.firstToolInstance;

        const runPrediction = (params: TRunPrediction) => {
          return new Promise((resolve) => {
            // 模拟异步的操作
            setTimeout(() => {
              // 关键，需要返回成功
              resolve('');
              message.success('Predict successfully');
              annotationEngine.switchLastTwoCanvas();
            }, 1000);
          });
        };
        firstToolInstance?.setRunPrediction?.(runPrediction);
      };
    }
  }, []);

  return <div ref={ref} />;
};

export default App;