使用命令npminstallzrender，而不是npminstallzrenderjs，导入模块也是importzrenderfrom"zrender"，按照其官方文档（https://ecomfe.github.io/zren...上面的方法就用到了，比如：newzrender.Circle().安装另外一个“zrenderjs”一开始不能正常使用，卸载的时候还有很多问题，不懂这个“zrenderjs”和zrender的关系，甚至是一个npm病毒？我直接把项目的node_module整个删掉，重新安装，恢复正常的依赖。1.用图形作为路径裁剪形状时，如果你用同一个zr实例（图形）做.setClipPath，裁剪结果不能对每一个都有效，比如分别响应等，应该用多个不同的路径裁剪。2，zrender的x和y位置。文字写成opt.style，fontSize必须填纯数字（加px）。文档有坑，写的小错误太多。3.zrender具体实例的on或其他事件监听。首先，必须加上响应on的元素的层级z（下面称为levela），它大于被操作事件的元素的层级，比如鼠标正在绘制的元素的z层级；初始化画布时，有约束条件（比如max-height或max-width）导致画布缩放时，zrender画布直接以width和height为尺寸，结果为：1.如果想要将canvas上的操作点与实际的鼠标按键同步，需要使用鼠标在dom中的相对x坐标/dom的实际宽度*canvas的原始宽度映射到zrender。2、由于node_moduleszrenderlibHandler.js中的isOutsideBoundary，导致zrender的hover、click、mouseout行为无法响应。函数isOutsideBoundary(handlerInstance,x,y){varpainter=handlerInstance.painter;返回x<0||x>painter.getWidth()||y<0||y>painter.getHeight();}mousemove:function(event){varx=event.zrX;vary=event.zrY;varisOutside=isOutsideBoundary(这个,x,y);...}如果你初始化一个zrender时的尺寸与后续画布的宽高不一致，就会导致计算时painter.getWidth()仍然是原来的尺寸，而这里的isOutside始终为false并且没有回应。解决方案是调整画布大小，然后init(canvas)。注意：使用zrender自带的resize方法时，调整样式的宽高可能会破坏图片的纵横比，所以resizing可能没用。我直接重写内联画布的宽度和高度以保持纵横比。4.如果多次执行newzrender.init(dom)后dom还是一样，上面的事件响应时间也会变成多次。需要使用zrender根实例的dispose方法清除。(或者说根据本就是new了一份新的，旧的没有销售遗迹)5，zrenderlibcoreevent.jsfunctionclientToLocal(el,e,out,calculate){out=out||{};//根据W3C工作草案，offsetX和offsetY应该相对于//目标元素的填充边缘。唯一使用此约定的浏览器//是IE。Webkit使用borderedge，Opera使用contentedge，而FireFox//不支持属性。//（参见http://www.jacklmoore.com/notes/mouse-position/）//在zrpainter.dom,paddingedge等于borderedge.//需要让cursorMapRadio=~~~~el.width?el.width/el.offsetWidth:1;if(calculate||!env.canvasSupported){calculateZrXY(el,e,out);}//注意：在FireFox中，layerX/layerY鼠标位置相对于最近定位的//祖先元素，因此我们应该确保el已定位（例如，不是position:static）。//BTW1，Webkit不在非简单情况下返回与FF相同的结果（例如添加//缩放因子、溢出/不透明层、变换...）//BTW2，(ev.offsetY||ev.pageY-$(ev.target).offset().top)在preserve-3d中不正确。//
