2d mark
npm install draw-mark-2d
npm i draw-mark-2d --save
`or
`
yarn add draw-mark-2d
`二、初始化
初始化时,需要为画布创建一个父元素,画布会根据父元素的大小,自动创建合适的大小。`
`引入二维标点库,进行相关操作
`
import { DrawMark2D} from 'draw-mark-2d'
`三、创建画布
Vue
`
let el = this.refs.mapRef
let canvas = new SpaceMarker(el, {
...options // 初始化参数
})
`画布初始化参数说明
`
{
mapWidth:0, // 图纸宽度(可以不传,会更加图纸大小计算)
mapHeight: 0, // 图纸高度(可以不传,会更加图纸大小计算)
scaleX: 1, // transform缩放点位修正
scaleY: 1, // transform缩放点位修正
mapImgUrl:'', // 图纸URL
on: (event, data) => {}, // 监听事件
marks: [], // 位置落点
ranges: [], // 区域落点,根据点位形成区域
paths: [], // 轨迹,根据点位形成轨迹
editModel: null, // 是否直接进入编辑模式。'mark': 点位标注, 'range':区域标注(待开发)
editOption: null, // 编辑模式附加参数。editModel='mark' 传点位的参数,editModel='range'时传区域参数,可改变图标,颜色,大小等
}
`位置落点参数说明
`
{
id: 唯一标识,可以自定义,不传系统自动生成
center: {x: 0, y: 0}, // 落点坐标
w: 画布宽度(兼容图纸的现在的落点)
h: 画布高度(兼容图纸的现在的落点)
ext: {}, // 扩展参数
radius: 18, // 默认半径
padding: 9,// 中心圆边距
visible: true, //是否可见
highlight: false, // 是否显示高亮涟漪
highlightSize: 9, // 涟漪的大小
icon: 'default_icon', // 默认的图标,还可以传图片的URL
bgColor: 'blue' // 可以是其他自定义颜色,例如'#fff'
}`区域落点说明
`
{
id: 唯一标识,可以自定义,不传系统自动生成
ext: {}, // 扩展参数
points:[], // 区域点位
w: 画布宽度(兼容企业的现在的落点)
h: 画布高度(兼容企业的现在的落点)
bgColor: 'blue' // 可以是其他自定义颜色,例如'rgba(255, 255, 255, 0.2)'
}
`
四、重新初始化
reset 方法,参数和创建时一样`
canvas.reset({
...options
})
`
五、事件监听
on接收回调函数`
let canvas = new SpaceMarker(el, {
...
on:(event, data) =>{
console.log(event, data);
}
})
`mark_click: 点位点击事件
mark_enter: 点位鼠标悬浮事件
mark_leave: 点位鼠标移出事件
range_click: 区域点击事件
range_enter: 区域鼠标悬浮事件
range_leave: 区域鼠标移出事件
loaded: 初始化完成事件
rendered: 画布重新渲染事件回调
mark_pos: 标注点位成功事件
六、更新落点信息
#### 1. 更新位置点位`
// 更新某个点位信息
updateMarkById(id, options, path = 'id')
``
// 更新所有点位信息,不刷新画布
updateMark(marks) // marks为新返回的点位数组
`id:查询的值,
options: 更新的参数
{
icon,
bgColor,
ext,highlight,
highlightSize,
visible,
}
path: 查询值,所在路径
##### Example
`
canvas.updateMarkById('2', {
bgColor: (['blue','red','orange','yellow'])[Math.round(Math.random()*10) % 4],
ext:{},
icon: 'default_icon',
},'ext.index')
`
`
canvas.updateMark([{
{
id: 唯一标识,可以自定义,不传系统自动生成
ext: {}, // 扩展参数
points:[], // 区域点位
w: 画布宽度(兼容企业的现在的落点)
h: 画布高度(兼容企业的现在的落点)
bgColor: 'blue' // 可以是其他自定义颜色,例如'rgba(255, 255, 255, 0.2)'
}
}])
`
#### 2.更新区域
`
updateRangeById(id, options, path = 'id')
`
`
updateRange(ranges) // 最新的区域点位信息
`
id:查询的值,
options: 更新的参数
{
bgColor,
ext,
visible,
}
path: 查询值,所在路径七、更新画布信息
`
update(options)
`
可选参数
scaleX:
scaleY:八、批量设置区域和落点的辅助方法
`
// 高亮Mark
setMarkHighlight(id, path = 'id')
`
可选参数
id 可以是数组,为空则清除所有涟漪效果
path 是id的路径
`
// 显示Mark
setMarkVisible(id, path = 'id')
`
可选参数
id 可以是单个元素的id值,显示某一个;可以是数组,批量显示;可以为空,则显示所有;可以是bool值,true=都显示,false=都隐藏
path 是id的路径九、编辑模式
##### 编辑模式有两种进入方式:##### 第一种
初始化时传入editModel,editModel 参数
- editModel= 'mark' 点位标注
- editModel= 'range' 区域标注(待开发)
- editOption 编辑模式附加参数。editModel='mark' 传点位的参数,editModel='range'时传区域参数,可改变图标,颜色,大小等
##### 第二种
创建完画布以后,调用
`
// 设置编辑模式
setEditable(type, options)
``