一、简介RaphaelJS是一个用于在网页中绘制矢量图形的Javascript库。它使用SVGW3C推荐和VML作为创建图形的基础，几乎所有浏览器都支持。Raphael绘制的内容是一个真实的DOM节点。你不仅可以动态修改它的大小、颜色等操作来创建你想要的内容，还可以给你创建的内容赋予点击、悬停、动画等操作。二、安装1、脚本标签：2、AMD加载方式：define(['path/to/raphael'],function(Raphael){console.log（拉斐尔）});3.npm安装：npmiraphael-S3.使用：查看API文档1.创建画布Raphael有两种创建画布的方式：第一种是在浏览器窗口创建画布，第二种是创建画布元素上的画布（推荐第二个）。第一种方法：在浏览器窗口创建画布varpaper=Raphael(x,y,width,height);//X坐标，Y坐标，宽高，画布定位在浏览器窗口中，所以画布的位置是绝对定位的，所以和其他HTML元素重叠。第二种方式：在元素中创建画布varpaper=Raphael(element,width,height);//元素节点本身或ID宽高要在元素上创建画布，需要传入元素本身或元素ID//以元素本身作为参数varpaper=Raphael(document.getElementById('paper'),500,500);//元素ID作为参数varpaper=Raphael('paper',500,500);2.绘制基本图形Raphael可以绘制的基本图形有圆形、矩形、椭圆：paper.circle(x,y,r);//x坐标y坐标半径paper.rect(x,y,width,height,r);//x坐标y坐标widthheight圆角半径（可选）paper.ellipse(x,y,rx,ry);//x坐标y坐标水平半径垂直半径3.为图形设置属性使用attr方法为图形设置属性，attr方法可以接受一个或两个参数：paper.circle(200,25,20).attr({'fill':'blue','stroke':'red','stroke-width':1})paper.rect(235,5,70,40).attr('fill','yellow')纸张。ellipse(345,25,25,15).attr('stroke-width',4)读取图形属性：letcircleAttr=circle.attr(['fill','stroke'])letrectAttr=rect.attr('fill')4.绘制除圆、矩形、椭圆以外的复杂图形。在使用中，我们经常需要绘制一些三角形、心形等图形。然后使用path方法绘制图形。path方法只有一个参数（SVG格式的路径字符串paper.path([pathString])），路径字符串由一个或多个命令组成。每个命令都以字母开头，后面是用逗号(',')分隔的参数。例如：'M10,20L30,40'我们看到两个命令：'M'带参数（10,20）和'L'带参数（30,40），大写字母表示命令是绝对的，小写是相对的.以下是可用命令的简要列表，详情请参阅：SVG路径字符串格式。letpaper=Raphael('complexShapes',800,100)paper.path('M10,30A20,20,0,0,1,50,30A20,20,0,0,1,90,30Q90,60,50,90Q10,60,10,30Z').attr({'fill':'red','stroke-width':0})//心形图案1paper.path('M100,30L110,30L110,20L130,20L130,30L140,30L140,20L160,20L160,30L170,30L170,50L160,50L160,60L150,60L150,70L140,70L140,80L130,80L130,70L120,70L120,60L110,60L110,50L100,50Z').attr('fill','green')//心形图案2paper.path('M190,40L215,15L240,40L265,15L290,40L240,90Z').attr('fill','purple')//心形图案3paper.path('M305,20l0,70Z').attr('stroke-width',2)//垂直直线paper.path('M315,55l80,0Z').attr('stroke-width',2)//水平直线paper.path('M415,35l40,40,l40,-40').attr('stroke-width',2)//折线paper.path('M515,75l40,-40,l40,40Z').attr('stroke-width',2)//三角形paper.path('M620,50L720,50')//画一条直线.attr({'stroke':'lime','stroke-width':3,'arrow-end':'classic-wide-中'//Arrowhead属性})将箭头添加到线条路径的末尾。字符串格式为[-[-]]。可能的类型：经典、块状、开放式、椭圆形、菱形、无宽度：宽、窄、中等长度：长、短、中等。5.绘制其他图形(1)绘制文字text方法用于绘制文字，如果需要换行，使用“\n”。一共有三个参数，paper.text(x,y,text);。x坐标，y坐标，文本字符串。可以为文本设置属性attr。如：font-size、text-anchor、font-family、fill属性。其中，text-anchor属性有start、middle、end三个值，表示对齐方式是开始、居中还是结束，默认为middle。paper.text(10,50,'drawntext').attr({'font-size':20,'font-family':'STXingkai','text-anchor':'start'})//绘制文本(2)导入图片Raphael可以使用paper.image()方法导入图片。该方法有五个参数：src,x,y,width,height（源图片的URI，x坐标，y坐标，width，height）。paper.image('./abc.png',600,20,600,600);6、绘制渐变图形Raphael支持线性渐变和渐变渐变填充图形：线性渐变语法：-[-[:]]-径向渐变语法：r[(,)][-[:]]-//线性渐变paper.rect(5,5,100,80).attr('fill','0-red-blue').attr('fill','45-red-yellow')//径向渐变paper.circle(170,50,40).attr('fill','rblack-white-black').attr('fill','rblack-white:60-black')//在半径的60%处第二阶段渐变的分割点//渐变偏离圆心paper.circle(280,50,40).attr('fill','r(0.1,0.5)#fff-#000')//r(0.5,o.5)是圆心paper.circle(390,50,40).attr('fill','r(0.5,0.1)#fff-#000')paper.circle(510,50,40).attr('fill','r(0.9,0.5)#fff-#000')paper.circle(630,50,40).attr('fill','r(0.5,0.9)#fff-#000')7.添加事件拉斐尔一般有以下事件：click,dblclick,拖动、隐藏、悬停、mousedown、mouseout、mouseup、mouseover等和对应的释放事件，在前面加个un(unclick,undblclick)即可。(1)hover、clickletcircle=paper.circle(25,25,20).attr({'fill':'purple','cursor':'pointer'}).hover(()=>circle.attr('fill','blue'),//f_in()=>circle.attr('fill','purple')//f_out)letellipse=paper.ellipse(90,25,25,15).attr({'fill':'pink','cursor':'pointer'}).click(()=>{letfillColor=ellipse.attr('fill')==='pink'?'green':'pink'ellipse.attr('fill',fillColor)})（2）dragletrect=paper.rect(140,5,70,40).attr({'fill':'yellow','cursor':'pointer'})letrectX,rectYrect.drag((dx,dy)=>{//onmoveletx=rect.attr('x')lety=rect.attr('y')dx=(x+dx)>730?(730-x):((x+dx)<0?(0-x):dx)dy=(y+dy)>60?(60-y):((y+dy)<0?(0-y):dy)rectX=x+dxrectY=y+dyrect.transform('t'+dx+','+dy)//平移},()=>rect.attr('fill','blue'),//onstart()=>{//onendrect.transform('')rect.attr({'x':rectX,'y':rectY})rect.attr('fill','yellow')})rect.dblclick(()=>rect.undrag())//取消拖动事件绑定8、transformation和动画(1)Transformation为元素添加transformation，它独立于其他属性，即transformation不改变元素的x或y。转换字符串类似于路径字符串的语法：'t100,120r30,100,100s1.5,1.2,100,100r45s1.5'每个字母是一个命令，有四个命令：t是平移，r是旋转，s为缩放，m为矩阵，对应的大写字母为绝对变换。上面的例子可以理解为“平移100,120；围绕100,100旋转30°；围绕100,100缩放1.5、1.2倍；围绕中心旋转45°；相对于中心缩放1.5倍”。//变换lettransformFlag=falseletrect=paper.rect(5,5,50,50).attr({'fill':'yellow','cursor':'pointer'}).click(()=>{rect.transform(transformFlag?'':'t100,120r30,100,100s1.5,1.2,100,100r45s1.5')transformFlag=!transformFlag})(2)动画语法：Element.animate({keyofanimationproperty值对}，动画时间，缓动类型，回调函数）；easing类型其实就是动画过渡公式，具体是哪种类型。主要有以下几种类型："linear"（线性）"<"or"easeIn"or"ease-in"（从慢到快）">"or"easeOut"or"ease-out"（从快到慢）"<>"或"easeInOut"或"ease-in-out"(从慢到快再到慢)"backIn"或"back-in"(开头反弹)"backOut"或"back-out"(反弹最后)"elastic"(橡皮筋)"bounce"(弹跳)//animation1letcircle1=paper.circle(110,25,20).attr({'fill':'red','cursor':'pointer'}).click(()=>{circle1.animate({'cy':120,'transform':'s1.5'},1000,'bounce')})//动画2letcircle2=paper.circle(200,25,15).attr({'fill':'purple','fill-opacity':0.5,'cursor':'pointer'})//填充不透明度transparency.hover(()=>{circle2.animate({'20%':{cx:300,easing:'<>'},'40%':{cy:125,easing:'<>'},'60%':{cx:200,easing:'<>'},'80%':{cy:25,easing:'<>'}},2000)})参考：https://zhuanlan.zhihu.com/p/..https://www.jianshu.com/p/570...https://code.tutsplus.com/tut...
