canvas-anno

Installation

Using npm:

  npm install am-canvas-anno

Using

<div id='cannvas_anno'/>
<script>
  // 初始化
  const element = document.getElementById('cannvas_anno')
  const anno = new AnnoCanvas()
  anno.init(element,'../example/demo1.jpg')
  anno.config({
    color:'#00FF00',
    lineWidth: 2,
    max:4,
    paddingX:0,
    paddingY:0,
    paddingBackground:'rgba(0,0,0,.1)',
    fill:'rgba(255, 255, 255, 0.6)',
    selectedFill:'rgba(255, 255, 255, 0.8)',
    boxShadow:'2 2 1 rgba(0,0,0,.7)',
    // 变化触发
    onChange:(e) => {
      // console.log(e)
    },
    // 选中触发
    onSelect:(index,tag) => {
      console.log('选中触发',index,tag)
    },
    //取消选中触发
    deSelect:(index,tag) => {
      console.log('取消选中触发',index,tag)
    },
    // 背景加载/切换完成触发
    loaded:(e) => {
      console.log('背景图片加载完成')
      anno.draw({
        dot_line: [{
          path: [{x: 10, y: 10}, {x: 400, y: 100}, {x: 400, y: 400}, {x: 100, y: 400}],
          close:true,
          editAble:false,
          describtion:{
            text:'1',
            color:'#000',
            fontSize:16
          }
        }],
      })
    },
    // 单次绘画完成触发
    finished:(e) => {
      console.log(e)
    },

  })

  创建绘画
  anno.createTarget({
      type:'dot_line',
      options:{
        close:true,
        describtion:{
          text:'2',
          color:'#000',
          fontSize:14
        }
      }
    })
</script>

Config

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | ------------- | ------------ | ------- | --------- | --------------------------------------------------------------- | | paintBrush | 绘画标记类型 | String | '' | 'line' 'circle' 'closed_line' 'dot_line' 'rect' 'straight_line' | | color | 绘画默认颜色 | String | '#f81d22' | - | | selectedColor | 选中默认颜色 | String | '#008dff' | - | | lineDash | 虚线 | String | "" | 如："5,25" | | lineWidth | 绘画线条宽度 | Number | 2 | - | | fill | 填充颜色 | String | - | - | | selectedFill | 选中填充颜色 | String | - | - | | dotLineLimit | 点线默认点数 | Number | 4 | - | | hammerAble | 是否可拖拽 | Boolean | false | - |

描述

describtion:{
            text:'1',
            color:'#000',
            fontSize:16
          }

Methods

| 参数 | 说明 | 返回 | 默认值 | 可选值 | | --------- | -------------- | -------- | ------ | ------ | | config | 设置配置 | - | - | - | | getData | 获取数据 | tag 坐标 | - | - | | clearData | 清除数据与画板 | - | - | - | | onSelect | 选中触发 | - | - | - | | cancel | 取消绘画 | - | - | - |

resizeConfig

| 参数 | 说明 | 返回 | 默认值 | 可选值 | | ----------- | ------------ | -------- | ------ | ------ | | fillStyle | 填充颜色 | - | - | - | | strokeStyle | 边框颜色 | tag 坐标 | - | - | | strokeWidth | 边框宽度 | - | - | - | | width | 点大小 | - | - | - | | accuracy | 最小点位距离 | - | - | - |