• CLabel 数据标注框架
  • 简介
  • 使用
    • 快速开始
  • Api列表
    • drawImage
    • setLabelList

CLabel 数据标注框架

简介

clabel是一款使用canvasApi编写的在浏览器端进行数据标注的框架,框架本身提供了多标签、标签微调、标签调色等等功能。框架本身是数据驱动的，数据发生变化画布会直接重绘方便数据标注工具开发者快速完成工具的开发。

使用

使用该框架非常的简单首先需要下载框架

# 包已经上传到npm
# npm 下载
npm i clabel@latest
# pnpm 下载
pnpm add clabel@latest
# yarn 下载
yarn add clabel@latest

快速开始

下面的操作都以在vue3项目中为例，当然你也可以使用其他技术作为页面渲染框架。

1. 首先导入包

   import { CanvasLabel } from 'clabel'

2. new一个对象

   <!-- 初始化要放在钩子中 -->
    const c:CanvasLabel|null = null
    onMounted(() => {
        <!-- 使用true 开启页面大小变换监听自动改变canvas大小-->
        <!-- 第一个参数为 canvas挂载的容器Dom -->
        c = new CanvasLabel('#canvas', true)
    })

   现在 你已经能够得到一个空canvas
3. 绘制背景图像

   <!-- 这个函数是异步的 -->
   c.drawImage('/src/assets/img.png').then(()=>{
        // 这里写一些 背景图渲染完成过后的东西
   })

4. 画框

   现在 你就一可以画框了

   键盘按钮

   1. 按d绘制多边形标签
   2. 按f绘制方框标签
   3. 按q进行选择某个标签，单击某个框进行选中，拖动鼠标就能够调整方框的位置并且可以对标签进行微调
   4. 滚动鼠标滚轮画布上下移动
   5. 按住alt+鼠标滚轮画布左右移动
   6. 按住Shift拖动画布
   7. 按住ctrl+鼠标滚轮画布缩放

Api列表

drawImage

    type CanvasLabelType = 'box' | 'polygon';
type CanvasLabelListItem = {
    id: number;
    labelTypeIds: number[];
    type: CanvasLabelType | '';
    data: number[];
};
type CanvasEventType = "checkType" | "drawEnd" | "hover" | 'scale' | 'translate' | 'checkLabelType' | 'select';
type CanvasEvent = {
    type: CanvasEventType;
    data: any;
};
type CanvasEventCbk = (event?: CanvasEvent) => void;
type CanvasLabelOpType = CanvasLabelType | 'none' | 'select' | 'move';
type CanvasLabelImageData = ImageBitmap | ImageData;
type BackData = {
    mx: number;
    my: number;
    w: number;
    h: number;
    zoom: number;
    data: ImageBitmapSource;
};
type LabelType = {
    name: string;
    id: number;
    strokeWidth: number;
    strokeStyle: string;
    fillStyle: string;
    fontFillStyle: string;
    font: string;
};
type CanvasLabelSetting = {
    background?: string;
    labelTypeList?: LabelType[];
    showLabelTagType?: 'number' | 'name' | 'id';
    offKbdEvent?: boolean;
    sightBead?: {
        coordinatesColor?: string;
        coordinatesWidth?: number;
        fontColor?: string;
        fontStyle?: string;
    };
    selectStyle?: {
        strokeWidth?: number;
        strokeStyle?: string;
        fillStyle?: string;
        pointFillR?: number;
        pointFillStyle?: string;
    };
    selectIngStyle?: {
        strokeWidth?: number;
        strokeStyle?: string;
        fillStyle?: string;
    };
};
declare function deepCopy<T>(data: T): T;
declare class CanvasLabel {
    #private;
    constructor(el: string, watchResize?: boolean);
    /**
     * 重置画布大小
     * @param w
     * @param h
     */
    reSize(w?: number, h?: number): void;
    /**
     * 重绘
     */
    reDraw(): void;
    /**
     * 删除标签
     * @param id 标签id
     */
    delLabel(id: number | number[]): void;
    /**
     * 添加设置
     * @param st 设置
     */
    setSetting(st?: CanvasLabelSetting): void;
    /**
     * 获取设置
     *
     */
    getSetting(): CanvasLabelSetting;
    /**
     * 使用某个标签
     * @param id
     */
    useLabelType(id: number[]): void;
    /**
     *
     * 获取现在正在使用的标签
     */
    getUseLabelType(): number[];
    onEvent(cbk: CanvasEventCbk): void;
    offEvent(): void;
    /**
     * 设置需要隐藏的标签列表
     * @param id
     */
    setHiddenLabels(ids: number[]): void;
    /**
     * 删除被隐藏的标签列表中的某个标签
     * @param id
     */
    delHiddenLabel(id: number): void;
    /**
     * 添加需要隐藏的标签
     * @param id
     */
    addHiddenLabel(id: number): void;
    /**
     * 切换标签的 显示状态
     * @param id
     */
    checkHiddenLabel(id: number): void;
    /**
     * 设置需要隐藏的标签类型列表
     * @param id
     */
    setHiddenLabelTypes(ids: number[]): void;
    /**
     * 删除需要已经隐藏的标签类型
     * @param id
     */
    delHiddenLabelType(id: number): void;
    /**
     * 添加需要隐藏的标签类型
     * @param id
     */
    addHiddenLabelType(id: number): void;
    /**
     * 切换标签类型的显示状态
     * @param id
     */
    checkHiddenLabelType(id: number): void;
    /**
     * 检查某个标签是否被隐藏
     * @param id
     * @returns
     */
    labelIsHidden(id: number): boolean;
    /**
     * 检查某个标签类型是否被隐藏
     * @param id
     * @returns
     */
    labelTypeIsHidden(id: number): boolean;
    /**
     * 检查标签类型是否正在使用
     * @param id type id
     * @returns 返回 标签类型的使用状态
     */
    labelTypeIsUse(id: number): boolean;
    getCtx(): CanvasRenderingContext2D | null;
    /**
     * 清除指定区域的绘制 如果不传入值的话 就会清除整canvas
     * @param x 坐标
     * @param y 坐标
     * @param w 宽
     * @param h 长
     */
    clear(x?: number, y?: number, w?: number, h?: number): void;
    /**
     * 添加标注数据
     * @param data
     */
    addLabelData(data: CanvasLabelListItem[] | CanvasLabelListItem): void;
    /**
     * 获取所有的标签
     */
    getLabelList(): CanvasLabelListItem[];
    /**
     * 设置标签数据
     * @param ls 标签数组
     */
    setLabelList(ls: CanvasLabelListItem[]): void;
    /**
     * 检查现在的操作类型
     * @returns 操作类型
     */
    getOpType(): CanvasLabelOpType;
    getImageInfo(): BackData | null;
    /**
     * 查询框 是否拥有某标签类型
     * @param lid
     * @param tid
     * @returns
     */
    labelHasLabelType(lid: number, tid: number): boolean;
    /**
     * 传入数据 自动判断数据是要添加到框的 标签类型还是移除
     * @param lid
     * @param tid
     */
    checkLabelLabelType(lid: number, tid: number): void;
    checkOpType(type: CanvasLabelOpType): void;
    returnOpType(): void;
    /**
     * 缩放图片
     * @param s 添加倍数
     * @param x 相对于图片X轴坐标缩放
     * @param y 相对于图片Y轴坐标缩放
     * @returns
     */
    scale(s: number, x?: number, y?: number): void;
    /**
     * 移动图像
     * @param x 水平
     * @param y 垂直
     */
    translate(x?: number, y?: number): void;
    /**
     * 绘制背景图
     */
    drawImage(entry: ImageBitmapSource | string): Promise<null>;
    /**
     * 选择某些标签
     * @param ids 需要选中的标签
     */
    selectLabels(ids: number[], d?: boolean): void;
    /**
     * 获取被选择的所有标签ids
     * @returns 所有被选择的id
     */
    getSelectLabelsIds(): number[];
    /**
     * 查询标签是否现在处于被选择状态
     * @param id 标签id
     * @returns
     */
    labelIsSelect(id: number): boolean;
    /**
     * 移动某些标签
     * @param x x 方向移动多少
     * @param y y 方向移动多少
     */
    moveSelectLabels(x?: number, y?: number, o?: boolean): void;
    /**
     * 销毁 移除事件绑定
     */
    des(): void;
}
export { CanvasLabel, deepCopy };
export type { CanvasLabelType, CanvasLabelListItem, CanvasLabelOpType, CanvasLabelImageData, BackData, LabelType, CanvasLabelSetting, CanvasEvent, CanvasEventType, CanvasEventCbk };
//# sourceMappingURL=index.d.ts.map

setLabelList