Package Exports

label-img

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 (label-img) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

图片标注工具

image annotation tool with javascript

本工具专注图形标注,不局限某种方式与格式,只输出关键点位信息,不与业务逻辑耦合,并提供方法自定义展示方式与实体属性填写的实现（持续开发当中,文档更新可能滞后）

示例

基础示例

安装

npm install label-img

  <script src="./labelImg.js"></script>

使用

/**
 * 生成实例
 * @element   挂载节点
 * @options   配置 非必填
 */
const labeler = new LabelImg(element, {
  width: 800,
  height: 600,
    bgColor: `#000`, // 背景色
})
// 注册图形
labeler.register("polygon", {
  type: "Polygon",
  tag: "多边形",
})
// 加载图片
labeler.load(url)
// 选择标注多边形
labeler.label("polygon")

图形

const { Shape } from "label-img"
// or
const Shape = LabelImg.Shape

// IShapeOptions
const shapeOptions = {
  id, // 图形唯一id 可自动生成
  type, // 图形类型 必填 Polygon | Ract
  name, // 图形名称
  positions, // 坐标集合 ex: [[0, 0], [100, 100]]
  data, // 自定义数据 可用于存储实体属性等内容
  tag, // 展示在图形上的说明标签
  showTag, // 是否展示标签
  closed, // 是否闭合
  visible, // 是否可见
  active, // 是否被选中
  disabled, // 是否禁用
  /**
   * { normal, active, disabled }
   * {
   *  normal: {
   *    dotColor: "red", // 坐标点颜色
   *    dotRadius: 3, // 坐标点大小
   *    lineColor: "#c30", // 连线颜色
   *    lineWidth: 2, // 连线宽度
   *    fillColor: "pink", // 填充色
   *  }
   * }
   */
  style, // 图形样式
}
const shape = new Shape(shapeOptions)
// or
/**
 * @id      图形注册ID
 * @options 配置  Partial<Omit<IShapeOptions, "type">>
 * 
 */
const shape = LabelImg.createShape(id, options)
// 添加到画布中
labeler.addShape(shape)

注册图形

/**
 * @id        图形ID   Polygon: 多边形, Ract: 矩形
 * @options   图形配置  Omit<IShapeCfg, "registerID">
 */
labeler.register(id, options)

加载图片

/**
 * @param   url || file
 * return   Promise
 */
labeler.load(param)

labeler API

isRegister(id)  // 判断是否注册
label(id, continuity)  // 选择标注类型
labelOff()  // 取消当前标注
addShape(shape, index)  // 添加图形
remove(shape || id)  // 删除图形
setActive(shape)  // 选中某一图形
getShapeList()  // 获取图形列表
setGuideLine(status?: boolean)  // 是否启用参照线
setTagShow(status?: boolean)  // 是否启用标签
isTagShow()  // 获取是否启用标签
setContinuity(status: boolean)  // 设置是否连续标注
render()  // 渲染画面
forceRender()  // 强制渲染

Shape API

getPositions()  // 获取坐标点集合
updatePositions(positions) // 更新坐标信息
setActive(status) // 设置选中
isActive()  // 是否被选中
close()  // 图形闭合
isClose()  // 是否闭合
disabled() //禁用
isDisabled()  // 是否禁用
hidden()  // 隐藏
isHidden()  // 是否隐藏
show()  // 显示
isShowTag()  // 是否展示标签
tagShow(status?: boolean) // 控制标签展示
setTag(val)  // 标签内容