Fabric.js路径文字教程详解


avatar
pcwnas 2023-04-21 249

原文来自:https://www.zixuephp.com

这是 Fabric.js 中的一个新的 beta 功能。您可以为文本指定一个名为 pathfabric.Path 属性,这将使文本呈现弯曲,跟随路径。该功能是新的,并且有很多边缘情况需要解决和改进。

在这个演示中,我们使用自由绘图来绘制路径,然后我们检查路径并尝试计算最佳字体大小以使文本适合路径。

我们使用该事件before:path:created在将路径添加到画布之前访问路径,计算将在该路径长度上起作用的近似字体大小,然后将文本添加到画布。

然后path:created用于从画布中删除路径。

image.png

核心代码如下:

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路径文字教程详解全部内容,感谢大家支持 。