am-canvas-anno

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

描述

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

Methods

resizeConfig