这是 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网。