前言

最近我的项目中须要用到图形编辑工具，综合思考下应用了paperjs。感激 @jackwang的文章二维绘图库-paper.js踩坑指南，防止了很多坑，过后在实战我的项目中仍然发现到一些问题。

我的项目中应用paperjs实现了一个图形框选工具，反对矩形、多边形、多点、线、虚线工具，性能上有框选、编辑、标签、位移、边界束缚、缩放、放大镜、辅助线等罕用性能 。

paperjs层级关系

开始之前肯定要相熟paper的我的项目层次结构防止codeing时无从下手！！！

  1. 我的项目初始化paper.setup()后，paperjs将主动创立一个active状态的project和子属性layer，而tool须要自行添加。
  2. 留神project和layer的激活，只有激活了以后项才会扭转。
  3. group分组可有可无，能够间接将path、text、raster放到layer中（如果我的项目中创立的物体蕴含多个path、text，倡议应用group以便集中统一治理）

raster

 const raster = new paper.Raster({        // source: 'https://xxxxxx.jpg',        // source:`data:image/jpg;base64,xxxxxxxxxxxx`        // image: document.getElementById('img'),        // crossOrigin: 'anonymous',        visible: false,        name: 'raster',        onLoad: e => {},        onError: e => {},      });

source: 这个参数可传入URL,也能够传入base64，base64格局肯定要留神后面加上”data:image/jpg;base64“
crossOrigin: canvas对外链图片有跨域问题，如果提醒’Access-Control-Allow-Originxxxxxxx‘可自行尝试.
onLoad: 最坑的一个！
多图切换：假如两张图片A、B，当切换图片时，每次都要调用new paper.Raster(),首次加载A能够通过onLoad参数获取到图片信息，这是咱们切换到B图片仍旧通过onLoad参数获取到图片信息，然而在切换到已加载过的A时onLoad会返回图片信息为null，通过查阅源码发现其依据complete判断是否加载过以后图片以节约性能。源码逻辑可见paper-full.js _setImage() 约5514行。
解决方案：通过 const raster = new paper.Raster({的raster变量来读取信息
visible: （优化）多图切换是会呈现短暂画布空白或图片尺寸霎时变大的状况，这是因为画布默认加载出示图片大小，
解决方案：默认visible为false在onLoad中从新计算图片大小后在复原visible即可

point区域内检测

Rectangle、Path、等绘制图形须要加上fillColor能力进行区域内检测，
如果想要通明形态并且须要区域内检测，设置通明值即可item.fillColor.alpha = 0.0001;
检测点是否在图形范畴内hitTest(point)

带有背景的文本

paperjs没有自带的文本背景性能须要自行添加

const text = new paper.PointText({      content: content,    });const bg = new paper.Path.Rectangle({      point: text.bounds.point,      size: text.bounds.size,      fillColor: '#cccccc',    });

其余

获取选中的select索引：获取以后点击手柄的索引 e.location.index
id、查找匹配：不要应用item自带的id！，item.id在操作中很可能会主动变更，所有关联数据放到data中，查找应用LAYER.getItem({xxx: xxx})
clone复制: clone后的item默认插入到激活的layer中，如果想要插入到其余地位，Hierarchy Operations下的api
清空画布：paper自带了清空画布api，然而文档未说明paper.remove();
获取多个图形的bounds：将多个item编组，获取编组的Group.bounds
冒泡问题：item绑定的事件能够应用e.stopPropagation();阻止叠加的item触发事件，然而tool工具不受影响
快去获取：给item设置名称(可反复)，item.name = 'testName',

const testName = group.children['testName']或const { testName } = group.children