原文来自:https://www.zixuephp.com
这是 Fabric.js 中的一个新的 beta 功能。您可以为文本指定一个名为 path 的 fabric.Path 属性,这将使文本呈现弯曲,跟随路径。该功能是新的,并且有很多边缘情况需要解决和改进。
在这个演示中,我们使用自由绘图来绘制路径,然后我们检查路径并尝试计算最佳字体大小以使文本适合路径。
我们使用该事件before:path:created
在将路径添加到画布之前访问路径,计算将在该路径长度上起作用的近似字体大小,然后将文本添加到画布。
然后path:created
用于从画布中删除路径。
核心代码如下:
fabric.Object.prototype.objectCaching=true; varcanvas=newfabric.Canvas('canvas',{ isDrawingMode:true, freeDrawingBrush:newfabric.PencilBrush({decimate:8}) }); //监听路径开始创建回调 canvas.on('before:path:created',function(opt){ //获得当前路径 varpath=opt.path; varpathInfo=fabric.util.getPathSegmentsInfo(path.path); path.segmentsInfo=pathInfo; varpathLength=pathInfo[pathInfo.length-1].length; vartext='Thisisademooftextonapath.Thistextshouldbesmallenoughtofitinwhatyoudrawn.'; varfontSize=2.5*pathLength/text.length; //核心代码... //创建文本利用第二参数中path挂载到指定路径path对象 vartext=newfabric.Text(text,{fontSize:fontSize,path:path,top:path.top,left:path.left}); //核心代码end... canvas.add(text); }); //路径创建完毕回调事件 canvas.on('path:created',function(opt){ canvas.remove(opt.path); })
@fn解释:getPathSegmentsInfo
/** *运行经过解析和简化的路径并提取一些信息。 *信息是每个命令的长度和起点 *@param{Array}pathfabricJS解析路径命令 *@return{Array}路径命令信息 {length:totalLength,x:x1,y:y1, tempInfo:{ x:x1, y:y1, command:current[0], } } */ functiongetPathSegmentsInfo(path){ vartotalLength=0,len=path.length,current, //x2andy2arethecoordsofsegmentstart //x1andy1arethecoordsofthecurrentpoint x1=0,y1=0,x2=0,y2=0,info=[],iterator,tempInfo,angleFinder; for(vari=0;i<len;i++){ current=path[i]; tempInfo={ x:x1, y:y1, command:current[0], }; switch(current[0]){//firstletter case'M': tempInfo.length=0; x2=x1=current[1]; y2=y1=current[2]; break; case'L': tempInfo.length=calcLineLength(x1,y1,current[1],current[2]); x1=current[1]; y1=current[2]; break; case'C': iterator=getPointOnCubicBezierIterator( x1, y1, current[1], current[2], current[3], current[4], current[5], current[6] ); angleFinder=getTangentCubicIterator( x1, y1, current[1], current[2], current[3], current[4], current[5], current[6] ); tempInfo.iterator=iterator; tempInfo.angleFinder=angleFinder; tempInfo.length=pathIterator(iterator,x1,y1); x1=current[5]; y1=current[6]; break; case'Q': iterator=getPointOnQuadraticBezierIterator( x1, y1, current[1], current[2], current[3], current[4] ); angleFinder=getTangentQuadraticIterator( x1, y1, current[1], current[2], current[3], current[4] ); tempInfo.iterator=iterator; tempInfo.angleFinder=angleFinder; tempInfo.length=pathIterator(iterator,x1,y1); x1=current[3]; y1=current[4]; break; case'Z': case'z': //weaddthoseinordertoeasecalculationslater tempInfo.destX=x2; tempInfo.destY=y2; tempInfo.length=calcLineLength(x1,y1,x2,y2); x1=x2; y1=y2; break; } totalLength+=tempInfo.length; info.push(tempInfo); } info.push({length:totalLength,x:x1,y:y1}); returninfo; }
以上就是Fabric.js路径文字教程详解全部内容,感谢大家支持 。