draw-mark-2d

一、安装和使用

已上传到npm仓库，可以使用npm 和 yarn 安装

npm i draw-mark-2d --save

or

yarn add draw-mark-2d

二、初始化

初始化时，需要为画布创建一个父元素，画布会根据父元素的大小，自动创建合适的大小。

  <div class="map" style="background-color:#000;margin:0 auto;width: 1200px; height: 600px;outline: 1px solid red;position: relative;">
    &nbsp;
  </div>

引入二维标点库，进行相关操作

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)

• type: 编辑模式，可选的值为: 'mark', 'range'。 为空则退出编辑模式。
• options: 编辑模式附加参数（用于业务自定义颜色，大小等属性）