FabricJS – 如何更改 Line 对象的 URL 字符串的格式？

介绍

在 web 开发中，很多时候都需要绘制图形，比如一些图表或者地图等等。而 Fabric.js 就是一个非常受欢迎的前端绘图库，它提供了各种各样的图形绘制方法和属性，而其中的 Line 对象就是其中一个非常基础的图形对象。在这篇文章中，我们将介绍如何在 Fabric.js 中更改 Line 对象的 URL 字符串的格式。

Line 对象

在 Fabric.js 中，Line 对象用于绘制直线，其属性包括起点坐标、终点坐标等等。下面是 Line 对象的一个示例代码：

var line = new fabric.Line([50, 50, 200, 200], {

  stroke: 'red'
});
canvas.add(line);

上面的代码会在画布上绘制一条起点为 (50, 50) 、终点为 (200, 200) 的红色直线。

更改 URL 字符串的格式

在 Fabric.js 中，Line 对象可以被导出为 SVG 格式的字符串，这个字符串可以用作图片的 url 或者下载文件时使用。但是默认格式下，该字符串会非常庞大，特别是当需要导出的对象越来越多的时候，这会非常的影响性能。

所以，我们可以修改导出的 URL 字符串的格式来减小其大小，通常可以使用更加紧凑的路径表达方式：从起点开始，依次指定每一个点到终点所需要走的方向和路径长度，例如 "M 0 0 L 200 0 L 200 200 L 0 200 Z"。这种方式利用了 SVG 所提供的相对路径最小化字符串的方式。

在 Fabric.js 中，我们可以使用 `toSVG` 方法获取 Line 对象的 SVG 字符串，并在其中进行修改。举个例子，我们可以将上面的 Line 对象转换为 SVG 字符串：

var line = new fabric.Line([50, 50, 200, 200], {

  stroke: 'red'
});
var svgString = line.toSVG();
console.log(svgString);

输出的结果如下：

我们可以看到，该 SVG 字符串很长，包含了很多无用的信息。我们可以对其进行修改，将其中的 `d` 属性改为更加紧凑的路径表达方式。

下面就是代码实现的一个示例：

// 重写了 toSVG 方法，返回更紧凑的路径表达方式。

fabric.Object.prototype.toSVG = (function() {
  function createSVGElement() {
    const xmlns = 'http://www.w3.org/2000/svg';
    return document.createElementNS(xmlns, 'svg');
  }
  function createPathElement() {
    const xmlns = 'http://www.w3.org/2000/svg';
    return document.createElementNS(xmlns, 'path');
  }
  function getPointCoords(point) {
    return point.x + ' ' + point.y;
  }
  function getPathData(path) {
    const data = [];
    for (let i = 0; i < path.length; i++) {
      const cmd = path[i].command;
      const points = path[i].points;
      data.push(cmd);
      for (let j = 0; j < points.length; j++) {
        data.push(getPointCoords(points[j]));
      }
    }
    return data.join(' ');
  }
  return function(options) {
    options || (options = {});
    const attributes = [];
    attributes.push('width="' + this.width + '"');
    attributes.push('height="' + this.height + '"');
    attributes.push('viewBox="' + this.getViewBox() + '"');
    attributes.push('xmlns="http://www.w3.org/2000/svg"');
    if (options.additionalTransform) {
      const matrix = this.calcTransformMatrix(options.multiplicator);
      matrix[4] += options.offsetX || 0;
      matrix[5] += options.offsetY || 0;
      attributes.push('transform="' + matrix.join(' ') + '"');
    }
    const path = this.path;
    if (!path) {
      return '';
    }
    const data = getPathData(path);
    const pathNode = createPathElement();
    pathNode.setAttribute('d', data);
    const container = createSVGElement();
    attributes.forEach(function(attr) {
      container.setAttribute(attr.split('=')[0], attr.split('=')[1].replace(/"/g, ''));
    });
    container.appendChild(pathNode);
    return container.outerHTML;
  };
})();
// 实例化一个新的 Line 对象
var line = new fabric.Line([50, 50, 200, 200], {
  stroke: 'red'
});
// 获取 Line 对象的紧凑的 SVG 字符串
var svgString = line.toSVG();
console.log(svgString);

运行上述代码，我们得到了一个更加紧凑的路径表达方式的 SVG 字符串：

我们可以看到，输出的 SVG 字符串相对于默认的格式而言，更加紧凑，能够大大的减小其大小，提高性能。

总结

在 Fabric.js 中，通过自定义 `toSVG` 方法可以实现更加紧凑的路径表达方式，从而减小 SVG 字符串的大小。这对于需要绘制大量图形的应用程序而言，有些实用性。但是需要注意的是，修改后的路径表达方式需要兼容各种浏览器和设备，有一定的技术门槛。