Tj-label-draw NPM

安装

npm i tj-label-draw

用法

import Label from 'label'

const label = new Label('#container', {
  width: 800,
  height: 400
  // 更多配置查看下方 Options
})

document.getElementById('btn').addEventListener(() => {
  // 创建标注 Polygon / Line / Rect
  label.createDraw('Polygon')
})

Options

export interface LabelOption {
  width: number // 宽
  height: number // 高
  shortcutKey?: boolean // 开启快捷键
  closedGraphRevoke?: boolean // 闭合图形撤回操作，默认为 true，即可以撤回闭合图形，false 则闭合图形无法进行撤回
  canvasOption?: {
    lineColor?: string // 线颜色
    fillColor?: string // 填充颜色
  }
  hotkeyOption?: { // 快捷键配置，shortcutKey: true 时才会生效
    revokeKey?: string // 撤回快捷键配置, 默认 Mac: 'command+z' \ Window: 'ctrl+z'
    recoverKey?: string // 恢复快捷键配置 默认 Mac: 'command+shift+z' \ Window: 'ctrl+y'
    deleteKey?: string // 删除快捷键配置 默认 backspace
  }
}

API

createDraw

  function(type, [option | position], [ option]): void

type 图形类型
- Line 线段, Polygon 多边形, Rect 矩形
positions 图形默认绘制的位置信息 (可选)
option 其他配置 (可选)
- name 图形名称 (可选)
- drawOption
  - lineColor 线条颜色
  - fillColor 填充颜色