README
polygon_line_point
基于canvas点线框vue组件
Build Setup
# install dependencies
npm install polygon-line-point
import Vue from 'vue'
import polygonLinePoint from 'polygon-line-point'
Vue.use(polygonLinePoint)
组件调用
####非弹窗
<polygon-line-point
ref="drawPic1"
:dom-id="canvasDraw"
:draw-type-arr="drawTypeArr"
:draw-pic="drawPic1"
>
<Button type="primary" @click="updatePic('1')">随机更新图片</Button>
</polygon-line-point>
####弹窗
<polygon-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>
</polygon-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:
动态改变图片按钮