Fabric.js路径文字教程详解

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

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

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

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

核心代码如下:

  fabric.Object.prototype.objectCaching = true;   var canvas = new fabric.Canvas('canvas', {     isDrawingMode: true,     freeDrawingBrush: new fabric.PencilBrush({ decimate: 8 })   });   // 监听路径开始创建回调   canvas.on('before:path:created', function(opt) {      // 获得当前路径     var path = opt.path;     var pathInfo = fabric.util.getPathSegmentsInfo(path.path);     path.segmentsInfo = pathInfo;     var pathLength = pathInfo[pathInfo.length - 1].length;     var text = 'This is a demo of text on a path. This text should be small enough to fit in what you drawn.';     var fontSize = 2.5 * pathLength / text.length;     // 核心代码...     // 创建文本利用第二参数中 path 挂载到指定路径 path对象     var text = new fabric.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｝path fabricJS解析路径命令  *@return｛Array｝路径命令信息          { length: totalLength, x: x1, y: y1,          tempInfo: {             x: x1,             y: y1,             command: current[0],           }             }     */   function getPathSegmentsInfo(path) {     var totalLength = 0, len = path.length, current,         //x2 and y2 are the coords of segment start         //x1 and y1 are the coords of the current point         x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder;     for (var i = 0; i < len; i++) {       current = path[i];       tempInfo = {         x: x1,         y: y1,         command: current[0],       };       switch (current[0]) { //first letter         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':           // we add those in order to ease calculations later           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 });     return info;   }

以上就是Fabric.js路径文字教程详解全部内容,感谢大家支持自学php网。

查看更多关于Fabric.js路径文字教程详解的详细内容...