poly-line-point

基于canvas点线框vue组件 组件按钮用的是iview的button组件，可以参考iview组件按需引用

Build Setup

# install dependencies
npm install poly-line-point

import Vue from 'vue'
import polyLinePoint from 'poly-line-point'

Vue.use(polyLinePoint)


组件调用

####非弹窗
<poly-line-point
  ref="drawPic1"
  :dom-id="canvasDraw"
  :draw-type-arr="drawTypeArr"
  :draw-pic="drawPic1"
>
  <Button type="primary" @click="updatePic('1')">随机更新图片</Button>
</poly-line-point>

####弹窗
<poly-line-point
  :init-draw-data="initDrawData"
  :is-show-box="isShowBox"
  :is-modal="true"
  :dom-id="canvasDrawT"
  :draw-type-arr="drawTypeArr"
  :draw-pic="drawPic2"
  ref="drawPic2"
  @after-draw-cb="drawEnd"
>
  <Button type="primary" @click="updatePic('2')">随机更新图片</Button>
</poly-line-point>

props: {
      //  实例dom id
      domId: {
        type: String,
        default: 'canvasDraw'
      },
      //  画图底图url
      drawPic: {
        type: String,
        default: ''
      },
      //  初始化绘画类型
      initDrawType: {
        type: String,
        default: 'polygon'
      },
      //  点线框按钮  polygon-框 line-线 point-点 arrow-箭头
      drawTypeArr: {
        type: Array,
        default: [
          {icon: 'polygon', disabled: false},
          {icon: 'line', disabled: false},
          {icon: 'point', disabled: false},
          {icon: 'arrow', disabled: false}
        ]
      },
      //  画布高
      drawHeight: {
        type: Number,
        default: 400
      },
      //  点线框全局配置
      config: {
        type: Object,
        default: () => ({
          max: 200,                             //  点线框绘画允许最大数量
          pointColor: 'rgb(218,140,16)',        //  画点，点颜色
          pointSize: 5,                         //  画点，点尺寸大小
          lineColor: 'rgb(0, 166, 90)',         //  画线，线颜色
          lineSize: 2,                          //  线，线条宽度
          textColor: '#333',                    //  填充文案，字体颜色
          polygonFillColor: 'rgba(0,174,217,0.4)',  //  画框，框填充颜色
          polygonLineColor: 'rgb(0,174,217)',       //  画框，边框填充颜色
        })
      },
      //  是否作为弹窗
      isModal: false,
      //  弹窗显示变量
      isShowBox: {
        type: Boolean,
        default: false
      },
      //  初始化点线框数据
      initDrawData: {
        type: Array,
        default: () => ([])
      }
    }

  Events:
    @after-draw-cb="drawEnd" 每次画完回调 drawEnd(drawData, drawType)
    drawData -- 当前画布数据
    drawType -- 当前绘画类型

  Methods:
    clean(isCleanAll, imgSrc) 清空画布 （isCleanAll--Boolean, imgSrc--String 需要重绘画布背景图以及所有点线框数据则传递这两个参数，纯粹的清空点线框数据则调用clean()）

    getDrawData()  获取画布点线框数据

    setDrawType(type)  设置绘画类型（type--boolean）

    setCanDraw(boolean)  画布是否可以继续绘画

    dispose()  画布实例销毁

  Slot：
    动态改变图片按钮

  Slot：name="noImg"
  <slot name="noImg"></slot>  自定义没有图片占位符