1.27.0 • Published 9 months ago

@labelbee/lb-annotation v1.27.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
9 months ago

English | 简体中文

LB-Annotation

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

📦 Install

# NPM
$ npm install @labelbee/lb-annotation

# YARN
$ yarn add @labelbee/lb-annotation

Quick Start

import React, { useEffect } from 'react';
import { AnnotationEngine } from '@labelbee/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 '@labelbee/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;
1.28.0-alpha.4

9 months ago

1.28.0-alpha.5

9 months ago

1.28.0-alpha.3

9 months ago

1.28.0-alpha.2

9 months ago

1.28.0-alpha.1

9 months ago

1.27.0

9 months ago

1.27.0-alpha.71

9 months ago

1.27.0-alpha.69

9 months ago

1.27.0-alpha.68

9 months ago

1.27.0-alpha.70

9 months ago

1.27.0-alpha.64

9 months ago

1.27.0-alpha.63

10 months ago

1.27.0-alpha.67

9 months ago

1.27.0-alpha.66

9 months ago

1.27.0-alpha.65

9 months ago

1.27.0-alpha.62

10 months ago

1.27.0-alpha.61

10 months ago

1.27.0-alpha.60

10 months ago

1.27.0-alpha.59

10 months ago

1.27.0-alpha.58

10 months ago

1.27.0-alpha.57

10 months ago

1.27.0-alpha.53

10 months ago

1.27.0-alpha.56

10 months ago

1.27.0-alpha.55

10 months ago

1.27.0-alpha.54

10 months ago

1.27.0-alpha.52

10 months ago

1.27.0-alpha.51

11 months ago

1.27.0-alpha.50

11 months ago

1.27.0-alpha.17

1 year ago

1.27.0-alpha.16

1 year ago

1.27.0-alpha.15

1 year ago

1.27.0-alpha.14

1 year ago

1.27.0-alpha.13

1 year ago

1.27.0-alpha.19

1 year ago

1.27.0-alpha.18

1 year ago

1.27.0-alpha.20

1 year ago

1.27.0-alpha.28

1 year ago

1.27.0-alpha.27

1 year ago

1.27.0-alpha.26

1 year ago

1.27.0-alpha.25

1 year ago

1.27.0-alpha.24

1 year ago

1.27.0-alpha.23

1 year ago

1.27.0-alpha.22

1 year ago

1.27.0-alpha.21

1 year ago

1.27.0-alpha.29

1 year ago

1.27.0-alpha.31

1 year ago

1.27.0-alpha.30

1 year ago

1.27.0-alpha.39

1 year ago

1.27.0-alpha.38

1 year ago

1.27.0-alpha.37

1 year ago

1.27.0-alpha.36

1 year ago

1.27.0-alpha.35

1 year ago

1.27.0-alpha.34

1 year ago

1.27.0-alpha.33

1 year ago

1.27.0-alpha.32

1 year ago

1.27.0-alpha.42

12 months ago

1.27.0-alpha.41

12 months ago

1.27.0-alpha.40

12 months ago

1.27.0-alpha.49

11 months ago

1.27.0-alpha.48

11 months ago

1.27.0-alpha.47

12 months ago

1.27.0-alpha.46

12 months ago

1.27.0-alpha.45

12 months ago

1.27.0-alpha.44

12 months ago

1.27.0-alpha.43

12 months ago

1.27.0-alpha.12

1 year ago

1.27.0-alpha.11

1 year ago

1.27.0-alpha.10

1 year ago

1.27.0-alpha.9

1 year ago

1.27.0-alpha.8

1 year ago

1.27.0-alpha.7

1 year ago

1.27.0-alpha.6

1 year ago

1.27.0-alpha.5

1 year ago

1.27.0-alpha.4

1 year ago

1.27.0-alpha.3

1 year ago

1.27.0-alpha.2

1 year ago

1.27.0-alpha.1

1 year ago

1.26.0

1 year ago

1.26.0-alpha.5

1 year ago

1.26.0-alpha.4

1 year ago

1.26.0-alpha.2

1 year ago

1.26.0-alpha.3

1 year ago

1.26.0-beta.2

1 year ago

1.26.0-beta.3

1 year ago

1.26.0-beta.1

1 year ago

1.26.0-alpha.1

1 year ago

1.25.1

1 year ago

1.25.0-alpha.2

2 years ago

1.25.0

2 years ago

1.24.0-alpha.7

2 years ago

1.25.0-alpha.1

2 years ago

1.24.0

2 years ago

1.24.0-alpha.6

2 years ago

1.24.0-alpha.5

2 years ago

1.24.0-alpha.4

2 years ago

1.24.0-alpha.3

2 years ago

1.24.0-alpha.2

2 years ago

1.24.0-alpha.1

2 years ago

1.23.1-alpha.1

2 years ago

1.18.1

2 years ago

1.18.0

2 years ago

1.18.2

2 years ago

1.20.0-alpha.8

2 years ago

1.20.0-alpha.6

2 years ago

1.20.0-alpha.7

2 years ago

1.20.0-alpha.4

2 years ago

1.20.0-alpha.5

2 years ago

1.21.0

2 years ago

1.20.0-alpha.2

2 years ago

1.20.0-alpha.3

2 years ago

1.20.0-alpha.1

2 years ago

1.19.0

2 years ago

1.22.0-alpha.2

2 years ago

1.22.0-alpha.1

2 years ago

1.22.0

2 years ago

1.18.2-alpha.2

2 years ago

1.18.2-alpha.1

2 years ago

1.23.0-alpha.1

2 years ago

1.23.0-alpha.2

2 years ago

1.23.0-alpha.3

2 years ago

1.23.0-alpha.4

2 years ago

1.17.0-alpha.2

2 years ago

1.17.0-alpha.1

2 years ago

1.22.1-alpha.1

2 years ago

1.23.0

2 years ago

1.18.1-alpha.1

2 years ago

1.21.0-dev.1

2 years ago

1.21.0-dev.2

2 years ago

1.21.0-alpha.1

2 years ago

1.17.1-alpha.1

2 years ago

1.17.1

2 years ago

1.17.0

2 years ago

1.19.0-alpha.3

2 years ago

1.19.0-alpha.2

2 years ago

1.19.0-alpha.4

2 years ago

1.19.0-alpha.1

2 years ago

1.18.0-alpha.9

2 years ago

1.18.0-alpha.7

2 years ago

1.18.0-alpha.8

2 years ago

1.20.0

2 years ago

1.18.0-alpha.1

2 years ago

1.18.0-alpha.2

2 years ago

1.18.0-alpha.5

2 years ago

1.18.0-alpha.6

2 years ago

1.18.0-alpha.3

2 years ago

1.18.0-alpha.4

2 years ago

1.14.0

2 years ago

1.15.0

2 years ago

1.16.0-alpha.5

2 years ago

1.16.0-alpha.6

2 years ago

1.16.0-alpha.7

2 years ago

1.16.0-alpha.8

2 years ago

1.16.0-alpha.1

2 years ago

1.16.0-alpha.2

2 years ago

1.16.0-alpha.3

2 years ago

1.16.0-alpha.4

2 years ago

1.15.0-alpha.2

2 years ago

1.15.0-alpha.3

2 years ago

1.15.0-alpha.4

2 years ago

1.15.0-alpha.5

2 years ago

1.15.0-alpha.6

2 years ago

1.15.0-alpha.7

2 years ago

1.15.0-alpha.1

2 years ago

1.16.1

2 years ago

1.16.0

2 years ago

1.14.0-alpha.8

2 years ago

1.14.0-alpha.7

2 years ago

1.14.0-alpha.9

2 years ago

1.14.0-alpha.6

2 years ago

1.14.0-alpha.5

2 years ago

1.14.0-alpha.15

2 years ago

1.13.1

2 years ago

1.14.0-alpha.14

2 years ago

1.14.0-alpha.13

2 years ago

1.14.0-alpha.12

2 years ago

1.14.0-alpha.11

2 years ago

1.14.0-alpha.10

2 years ago

1.14.0-alpha.22

2 years ago

1.16.1-alpha.2

2 years ago

1.14.0-alpha.21

2 years ago

1.16.1-alpha.1

2 years ago

1.14.0-alpha.20

2 years ago

1.14.0-alpha.19

2 years ago

1.14.0-alpha.18

2 years ago

1.14.0-alpha.17

2 years ago

1.14.0-alpha.16

2 years ago

1.0.0-alpha.1

2 years ago

1.13.0-alpha.2

2 years ago

1.13.0-alpha.3

2 years ago

1.13.0-alpha.0

2 years ago

1.13.0-alpha.1

2 years ago

1.13.0-alpha.6

2 years ago

1.13.0-alpha.7

2 years ago

1.13.0-alpha.4

2 years ago

1.13.0-alpha.5

2 years ago

1.13.1-alpha.0

2 years ago

1.12.1

2 years ago

1.12.0

2 years ago

1.14.0-alpha.3

2 years ago

1.14.0-alpha.0

2 years ago

1.14.0-alpha.2

2 years ago

1.14.0-alpha.1

2 years ago

1.12.0-alpha.10

2 years ago

1.13.0

2 years ago

1.12.0-alpha.9

2 years ago

1.12.0-alpha.7

2 years ago

1.12.0-alpha.8

2 years ago

1.12.0-alpha.6

2 years ago

1.11.0

2 years ago

1.12.0-alpha.3

2 years ago

1.12.0-alpha.4

2 years ago

1.12.0-alpha.1

2 years ago

1.12.0-alpha.2

2 years ago

1.12.0-alpha.0

2 years ago

1.12.0-alpha.5

2 years ago

1.10.0-alpha.0

3 years ago

1.10.0-alpha.1

3 years ago

1.10.0-alpha.2

3 years ago

1.10.0-alpha.3

3 years ago

1.10.0-alpha.4

3 years ago

1.10.0-alpha.5

3 years ago

1.10.0-alpha.6

3 years ago

1.10.0-alpha.7

3 years ago

1.10.0-alpha.8

3 years ago

1.9.1

3 years ago

1.11.0-alpha.0

3 years ago

1.10.1

3 years ago

1.10.0

3 years ago

1.9.0-alpha.16

3 years ago

1.9.0-alpha.17

3 years ago

1.9.0-alpha.15

3 years ago

1.9.0

3 years ago

1.9.0-alpha.10

3 years ago

1.9.0-alpha.11

3 years ago

1.8.1-alpha.0

3 years ago

1.9.0-alpha.14

3 years ago

1.9.0-alpha.12

3 years ago

1.9.0-alpha.13

3 years ago

1.9.0-alpha.4

3 years ago

1.9.0-alpha.3

3 years ago

1.9.0-alpha.6

3 years ago

1.9.0-alpha.5

3 years ago

1.9.0-alpha.2

3 years ago

1.9.0-alpha.1

3 years ago

1.9.0-alpha.8

3 years ago

1.9.0-alpha.7

3 years ago

1.9.0-alpha.9

3 years ago

1.9.0-alpha.0

3 years ago

1.8.0

3 years ago

1.8.0-alpha.1

3 years ago

1.7.2-alpha.0

3 years ago

1.7.2-alpha.2

3 years ago

1.7.2-alpha.1

3 years ago

1.7.2

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.8.0-alpha.0

3 years ago

1.6.0

3 years ago

1.5.7

3 years ago

1.5.6

3 years ago

1.5.5-alpha.3

3 years ago

1.5.5-alpha.2

3 years ago

1.5.4-alpha.5

4 years ago

1.5.4-alpha.6

4 years ago

1.5.5-alpha.1

3 years ago

1.5.5-alpha.0

3 years ago

1.5.4-alpha.11

4 years ago

1.5.4

4 years ago

1.5.4-alpha.10

4 years ago

1.5.4-alpha.9

4 years ago

1.5.4-alpha.7

4 years ago

1.5.4-alpha.8

4 years ago

1.5.4-alpha.16

4 years ago

1.5.4-alpha.15

4 years ago

1.5.4-alpha.14

4 years ago

1.5.4-alpha.13

4 years ago

1.5.4-alpha.12

4 years ago

1.5.4-alpha.4

4 years ago

1.5.4-alpha.3

4 years ago

1.5.4-alpha.2

4 years ago

1.5.4-alpha.1

4 years ago

1.5.4-alpha.0

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago