前言近期项目需要图形编辑工具，综合考虑使用paperjs。感谢@jackwang的二维绘图库-paper.js踩坑攻略一文，避免了很多坑。当时在实战项目中还是发现了一些问题。项目中使用paperjs完成了一个图形选框工具，支持矩形、多边形、多点、直线、虚线工具。功能包括选框、编辑、标注、位移、边界约束、缩放、放大镜、辅助线等常用功能。在开始paperjs层级关系之前，一定要熟悉paper项目层级，以免打码的时候无从下手！！！使用paper.setup()初始化项目后，paperjs会自动创建活动项目和子属性层，工具需要自己添加。注意project和layer的激活，只有当前item的激活会发生变化。分组是可选的，可以直接将path、text、raster放入图层中（如果项目中创建的对象包含多个path、text，建议使用group进行集中统一管理）rasterconstraster=newpaper。Raster({//来源：'https://xxxxxx.jpg',//来源：`data:image/jpg;base64,xxxxxxxxxxxx`//图像：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，切换图片时，每次都要调用newpaper.Raster()。第一次加载A时，可以通过onLoad参数获取图片信息。这就是我们切换到图片B时，仍然通过onLoad参数获取图片信息，但是当切换到加载好的A时，onLoad会将图片信息返回为null。通过查看源码发现，它是根据complete来判断当前图片是否加载完成，以节省性能。源码逻辑见paper-full.js_setImage()约5514行。解决方法：通过constraster=newpaper.Raster({visible:(优化)的栅格变量读取信息多张图片切换时，画布会出现短时间空白或者图片尺寸瞬间变大。这个是因为canvas默认加载图片大小，解决方法：默认visible为false，在onLoad中重新计算图片大小，恢复visible检测点区域的Rectangle，Path等，绘制图形需要添加fillColor进行区域检测，如果想要透明形状，需要区域内检测，设置透明值item.fillColor.alpha=0.0001即可；检测点是否在图形范围内hitTest(point)textwithbackgroundpaperjsdoes没有自带文字背景功能，需要添加consttext=newpaper.PointText({content:content,});constbg=newpaper.Path.Rectangle({point:text.bounds.point,size:text.bounds.size,fillColor:'#cccccc',});其他er获取Selectedselectindex：获取当前点击的handle的索引e.location.indexid，查找匹配：不要使用item自带的id！，item.id在运行过程中很可能会自动改变，把所有关联dataindata，并搜索UseLAYER.getItem({xxx:xxx})clonetocopy：克隆的item默认插入到activelayer中。如果想插入到其他位置，HierarchyOperations下的api清除画布：paper自带清除画布的api，但是文档没有说明paper.remove();获取多个图形的bounds：对多个item进行分组，得到分组后的Group.bounds冒泡问题：items绑定的事件可以使用e.stopPropagation();以防止叠加的items事件被触发，但tool工具不受影响。快速获取：为项目设置名称（可重复），item.name='testName',consttestName=group.children['testName']或const{testName}=group.children
