在做标注系统时，使用原生js封装的一个svg图形处理插件，里面有用到es6语法，若浏览器不支持请自备梯子。
使用方法
引用相应js文件到页面，并对元素调用相应方法
<script src="svg.js"></script>
<script type="text/javascript" charset="utf-8">
var svg = new mySVG({
addLayerCallback: function(){}
});
</script>html结构
<ul id="container"></ul>
<a href="javascript:;" class="more-btn">加载更多</a>参数设置
配置参数
| 参数名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| container | Node | document.querySelector('#svg_container') | 自定义 | 创建绘图编辑器的容器 |
| gapDistance | Number | 100 | 自定义 | 画布与可绘区边界的最小距离 |
| addLayerCallback | Function | 添加图层后的回调函数，将传回该图形在layerMap中对应的Object数据 | ||
| delLayerCallback | Function | 删除图层后的回调函数，将传回删除的图形id集合 | ||
| selectLayerCallback | Function | 选择图形的回调函数，传回选中的图形id集合 和 取消选中的图形id集合 | ||
| updateCallback | Function | 编辑了图形后的回调函数，将传递进编辑的图形id集合 | ||
| switchToolCallback | Function | 切换工具后的回调函数，将传递进当前工具名 | ||
| mouseDownBeforeCallback | Function | 鼠标按下后的回调函数(该回调早于一切内置的方法)，将传递进鼠标事件event | ||
| mouseUpAfterCallback | Function | 鼠标放开后的回调函数(该回调晚于一切内置的方法)，将传递进鼠标事件event | ||
| logCallback | Function | 默认会以localStorage方式存储之前19步以及最初那步共20个记录 | 产生历史记录后的回调函数。传递进回调的参数为：{title: 记录标题, step: 第几个记录, data: 当前的layerMap对象} | |
| getLogData | Function | 默认会查localStorage里存储的数据 | 获取存储的历史记录。该方法有step和direction两个参数，step与历史记录中的step一致，direction为-1表示查该步骤之前的一个记录 0表示查该步骤对应的记录 1表示查该步骤之后的一个记录。该方法必须返回数据且返回的数据需与logCallback中回调参数格式一直，若无对应记录请返回null |
基础属性和方法
| 参数名 | 类型 | 默认值 | 示例 | 说明 |
|---|---|---|---|---|
| currentLayer | Array | [] | 当前选中的图层id集合 | |
| currentTool | String | 可选值: move、select、rect、polygon、polyline、ellipse、addPathDot、delPathDot、lasso | 当前选中的工具 | |
| sublineStatus | Boolean | false | 是否已开启辅助线 | |
| zoom | Number | 1 | 画布的缩放比例 | |
| equalRatio | Boolean | false | 在变形图形时是否保持图形宽高比 | |
| magnet | Boolean | false | 绘制线段或多边型时是否磁吸其他图形边框 | |
| graspStatus | Boolean | false | 抓手工具 | |
| buildSVG | Function | svg.buildSVG(width, height, bgColor) | 创建画布(width: 画布宽度, height: 画布高度, bgColor: 画布背景色或{url:图片地址, isImage:true},若为空则创建一个透明背景的画布) | |
| destroy | Function | svg.destroy() | 销毁已创建的画布 | |
| updateSvgSize | Function | svg.updateSvgSize(width, height) | 更新画布大小(width：画布宽度，height: 画布高度) | |
| buildPolyline | Function | svg.buildPolyline() | 创建线段图形(勾勒了超过2个线段点时可调用) | |
| tailorPolygon | Function | svg.tailorPolygon(ids) | 裁剪多边形(ids: 要裁剪的多边形id或id集合)。PS: 需先用套索工具勾画出裁剪区域 | |
| mergePolygon | Function | svg.mergePolygon(ids) | 合并多边形(ids: 要合并的多边形id数组) | |
| showTransshape | Function | svg.showTransshape(id) | 显示图形自由变形编辑框(对图形整体拉伸、旋转等)(id：要变换的图形id) | |
| importImg | Function | svg.importImg(src) | 导入图片(src：图片地址), 返回Promise | |
| exportImage | Function | svg.exportImage(name, width, height, type) | 把画布导出为图片(name: 导出的图片名-默认为'下载', width: 图片宽度-默认为画布宽度, height: 图片高度-默认为画布高度, type: 图片类型-默认为png) | |
| importData | Function | svg.importData(map) | map为导入的数据，格式为{图形id: 图形配置信息}(同layerMap) | |
| exportData | Function | svg.exportData() |
{
图形id1: {
id: xx,
tagName: 图形类型,
lock: 是否锁定,
hide: 是否隐藏状态,
attr: {
d: 图形路径,
tX: x方向偏移值,
tY: y方向偏移值,
rotate: 旋转角度
}
},
图形id2: ...,
图形id3: ...,
...
}
| 导出用户创建的图层JSON |
| putTop | Function | svg.putTop(ids) | 置顶图层(ids: 要置顶的图形id或id数组) | |
| putAbove | Function | svg.putAbove(id) | 置于上一层(id: 要置于上一层的图形id) | |
| putBelow | Function | svg.putBelow(id) | 置于下一层(id: 要置于下一层的图形id) | |
| putBottom | Function | svg.putBottom(ids) | 置底图层(ids: 要置底的图形id或id数组) | |
| lockLayer | Function | svg.lockLayer(id, lock) | 锁定/解锁图层，锁定后不能编辑、移动、删除图层(id: 要操作的图层id, lock: true锁定-false解锁) | |
| hideLayer | Function | svg.hideLayer(ids, isHide) | 隐藏/显示图层(ids: 要操作的图形id或id数组, isHide: true隐藏-false显示) | |
| delLayer | Function | svg.delLayer(ids) | 删除图层(ids: 要删除的图形id或id数组) | |
| renderHistoryLog | Function | svg.renderHistoryLog(obj) | 渲染历史数据(obj：要渲染的历史数据对象，格式同logCallback回调中获取到的数据，为{title:xx, step:xx, data:xx} ) | |
| forwardStep | Function | svg.forwardStep(stepNum) | 回退/前进(stepNum: 回退/前进的步数) | |
| movePathDot | Function | svg.movePathDot($dot, distanceObj, updateData = true) | 移动路径点($dot：需要移动的点, distanceObj：x、y方向计算了缩放比的移动距离, updateData：是否需要更新图形配置) | |
| moveLayer | Function | svg.moveLayer(ids, distanceObj, updateLayerMap = true) | 移动图层(ids：要移动的图形或图形集合id, distanceObj：x、y方向计算了缩放比的移动距离, updateLayerMap：是否需要更新图形配置) | |
| copyLayer | Function | svg.copyLayer(ids) | 复制图层(ids：要复制的图形或图形集合id) | |
| delPathDot | Function | svg.delPathDot($dot) | 删除多边形/线段节点($dot：要删除的节点) | |
| addPathDot | Function | svg.addPathDot(id, point, onlyDetection) | 添加多边形/线段节点。PS：追加的节点坐标与图形的边线距离不得超过10px(id：要追加节点的图形id, point：追加的节点坐标, onlyDetection：是否仅检测可追加节点的线段)。返回检测到的可追加节点线段两端坐标数组 或 null |