svg-painter v1.1.2

功能安装

npm install svg-painter

基本原理依赖于：Paper.js

使用方法

初始化

在HTML模版中添加SVG元素依赖

说明：需要有一个区域用于canvas的绘制

如果需要绘制多个区域，可以添加多个canvas

<canvas id="myCanvas" width="800" height="600"></canvas>

配置SVG使用元素

import svgInit from 'svg-painter';
const svgPainter = svgInit()

svgPainter.EXP_init({
  canvasSelector: '#myCanvas', // svg的选择器，默认为 #myCanvas
  drawEnable: false, // 启用绘制，默认为false
  dragMoveBgEnable: false, // 是否可以拖拽背景，缩放大背景：注意：这个和拖动绘制会产生冲突，拖拽结束后记得关
  dragMoveOptions: {
    minScale: 1, // 最小缩放比例
    maxScale: 3, // 最大缩放比例
  }
})

设置背景图

说明：背景图加载的尺寸会是直接铺面目标canvas，自动大小缩放，所以尽量贴合比例

svgPainter.EXP_loadBackground('cat.jpg', async (img) => {
  console.log('背景图加载完成')
})

添加普通图片区域

说明：绘制普通图片区域，绘制之后的图片可以拖拽更换位置；支持事件

  svgPainter.EXP_drawImage(imgPath, positionX, positionY, imgName)
  svgPainter.EXP_drawImage('./Camera.png', 100, 100, '图标2')

绘制线条

说明：绘制普通线条；支持事件。线条有一些基本属性，具体参考官网地址

path属性参照：http://paperjs.org/reference/path/#strokecolor

const path = svgPainter1.EXP_drawLine([{x: 0, y: 0}, {x: 50, y: 50}, {x: 30, y: 90}], '标记-直线1', {
  strokeColor: '#ff0000',
  strokeWidth: 8,
})
path.smooth() // 曲线
path.closed() // 控制是否闭合
path.strokeWidth = 10 // 线宽
path.fillColor = '#ff0000' // 填充颜色
path.opacity = 0.5 // 透明度
// path.simplify(level=0) // 用于点位的自动缩减，一般用不上

添加区域线条绘制 - 贝塞尔曲线

说明：尝试用线条去拟合已有的区域，形成画线效果；支持事件

svgPainter1.EXP_drawAreaLine([areaName1, areaName2, areaName3], lineName)
const path2 = svgPainter1.EXP_drawAreaLine(['图标1', '图标2', '图标3'], '标记-线条1', {
  strokeColor: '#00ff00',
  strokeWidth: 8,
})
path2.strokeWidth = 10 // 线宽
path2.fillColor = '#ff0000' // 填充颜色

添加文字标记

说明：添加普通文字绘制；支持事件

const path3 = svgPainter1.EXP_drawText('你好，我是测试文字', 50, 50, '标记-文字1', {
  strokeColor: '#0000ff',
})

添加绘制区域 - 用户一次性绘制，绘制完成之后用户可以自己调整边界；

单击边缘会添加一个节点 shift + 单击，会删除一个节点

const area1 = svgPainter.EXP_startDraw(areaName, fillColor = randomColor)
const area2 = svgPainter.EXP_startDraw('区域-头部', '#ccaabb88')

特殊绘制功能

说明：绘制区域，绘制完成之后用户可以自己调整边界；支持事件 用于绘制一些目前不支持的元素，例如Rectangle、Path.Circle等

// 主体对象在：svgPainter.svgConfig.scope上
svgPainter.svgConfig.scope.activate()
const rect = svgPainter.svgConfig.scope.Rectangle([0, 0], [25, 25])
rect.center = view.center // 绘制在正中间

// 自定义数据的绑定 rect.data = { area_name: '区域的名字', // 区域名会用于查询 area_type: '自己取一个类名-用来给自己看的', } // 自定义数据进一步绑定 for(const name in rect.data) { rectname = rect.dataname } // 事件绑定，否则无法触发事件 svgPainter.bindPathEvent(rect)

### 修改区域填充颜色
```js
const area = svgPainter.EXP_changeAreaFillColor(areaName, fillColor = randomColor)
const area = svgPainter.EXP_changeAreaFillColor('区域-头部', '#ff0000')

获取所有区域 - 一般用于调试用

svgPainter.EXP_areaGetAll()

获取单个区域（包括图片区域） - 一般用于调试用

const area = svgPainter.EXP_findAreaByName('区域-头部')

调整绘制区域为可缩放、可拖拽 - 使用鼠标滚轮缩放(1-3倍)，之后就可以随意拖拽

注意：启用可以拖拽之后会和绘制功能有冲突，因为肯定会争抢鼠标，所以拖拽结束后，需要禁用拖拽功能

// 启用缩放、拖拽
svgPainter.EXP_enableDragMoveBg()
// 禁用缩放、拖拽
svgPainter.EXP_disableDragMoveBg()

导出JSON结果 - 推荐

svgPainter.EXP_exportJSON()
// 或者
svgPainter.svgConfig.scope.activate() // 需要先激活scope，否则多个会出现冲突
svgPainter.svgConfig.scope.paper.project.exportJSON()

导入JSON结果 - 推荐

svgPainter.EXP_importJSON(exported_json)
// 或者下面方法（注意有缺陷）
svgPainter.svgConfig.scope.activate() // 需要先激活scope，否则多个会出现冲突
svgPainter.svgConfig.scope.paper.project.importJSON(exported_json) // 但是这种方法会丢失函数触发

导出完整SVG

建议使用JSON方案，SVG方案需要图片支持跨域

svgPainter.EXP_exportAllSVG()

导出部分SVG

svgPainter.EXP_exportAreaSVG(area_names = ['区域-头部', '区域-身体'])

事件触发

取消所有元素的选中

svgPainter.EXP_deselectAll()

区域点击

svgPainter.EXP_areaEvent('click', (event, path) => {
  console.log('我的自定义函数Click：' + path.area_name, event)
})

鼠标进入区域

svgPainter.EXP_areaEvent('mouseenter', (event, path) => {
  console.log('我的自定义函数Enter：' + path.area_name, event)
})

鼠标移出区域

svgPainter.EXP_areaEvent('mouseleave', (event, path) => {
  console.log('我的自定义函数Leave：' + path.area_name, event)
})

区域内鼠标移动

svgPainter.EXP_areaEvent('mousemove', (event, path) => {
  console.log('我的自定义函数Leave：' + path.area_name, event)
})

区域拖拽事件

注意：缩放比例为1的时候，不会有拖拽事件触发（因为肯定拖不动）

// 这个函数可以用于html元素不跟随，此时，可以用回调来销毁html元素
svgPainter.EXP_areaEvent('dragmove', (event) => {
  console.log('我的自定义函数dragmove：', event)
})

区域缩放事件

// 这个函数可以用于html元素不跟随，此时，可以用回调来销毁html元素
svgPainter.EXP_areaEvent('wheel', (event) => {
  console.log('我的自定义函数wheel：', event)
})

其他说明

图层优先级

【图片 = 文字】 > 【画线|直线|曲线】 > 【手绘区域】 > 【背景图】

事件触发

点击顶层元素，不会穿透到下一层 其次不存在事件层级关系，只有绘制元素的层级关系，所以也不存在时间冒泡等

缩放说明

缩放参数：svgPainter.svgConfig.curDrawScale = 当前缩放比例 get|set 缩放中心：svgPainter.svgConfig.curDrawScaleCenter = 当前缩放中心点 get|set