npm 包 svgpath 使用教程

简介

svgpath 是一个使用 JavaScript 实现简单的 SVG 路径分解和操作的 npm 包。它可以帮助前端开发人员在开发 SVG 动画、图形等功能时，简化代码的编写过程，提高开发效率。本篇文章将为大家详细介绍 svgpath 的使用方法，包括基本的路径分解、路径转换、路径组成等方面。

安装

使用 npm 包管理器进行安装：

npm install svgpath --save

基本路径分解

在使用 svgpath 之前，我们需要先了解 SVG 路径的基本语法。在 SVG 中，路径是用一个 M 开头的命令来标示的，紧接着是一系列的 L、C、Q 等命令来定义路径。例如下面的这个路径：

<path d="M10 10 L90 40 L50 90 C70 80 90 70 80,20 Q70 30 50 40" />

表示一个从 (10, 10) 起点开始，依次通过三个线段和一个贝塞尔曲线将路径组合成一个形状。

使用 svgpath 包，我们可以很方便地对路径进行解析，返回各个命令的参数数组：

import SVGPath from 'svgpath';
const path = 'M10 10 L90 40 L50 90 C70 80 90 70 80,20 Q70 30 50 40';
const paths = new SVGPath(path).parse();
console.log(paths);

输出结果：

[
  ['M', 10, 10],
  ['L', 90, 40],
  ['L', 50, 90],
  ['C', 70, 80, 90, 70, 80, 20],
  ['Q', 70, 30, 50, 40]
]

路径转换

除了对路径进行解析，svgpath 还支持对路径进行转换。比如我们想把上面的路径缩小为原来的一半，并将横向坐标左移 20，纵向坐标上移 20，可以这样编写代码：

const path = 'M10 10 L90 40 L50 90 C70 80 90 70 80,20 Q70 30 50 40';
const newPath = new SVGPath(path).scale(0.5).translate(-20, -20).toString();
console.log(newPath);

最终结果：

<path d="M-5 0 L35 10 L20 35 C35 30 45 25 40 10 Q35 15 25 20" />

从上述例子中可以看出，svgpath 的路径转换非常方便，可以通过链式调用一步步进行操作。在实际开发中，我们可以通过该功能来快速生成不同尺寸、位置的相似形状。

路径组合

另一个常用的功能是将多个路径组合成一个复杂的形状。在 svgpath 中，通过将多个路径转成数组，可以很方便地进行组合操作。

const path1 = 'M10 10 L90 10 L50 50 Z'; // 三角形
const path2 = 'M30 30 L50 50 L70 30 Z'; // 三角形
const paths = [path1, path2].map(path => new SVGPath(path).toString());
console.log(paths.join('')); // 输出组合路径

上面的代码将两个三角形进行组合，形成一个内含另一个的图形，得到的复合路径是：

<path d="M10 10 L90 10 L50 50 ZM30 30 L50 50 L70 30 Z" />

总结

以上是 svgpath 的基本使用方法。通过对路径的解析、转换和组合等功能，我们可以在前端开发中使用 svgpath 提高代码的效率和可读性。然而，在使用 svgpath 时也要注意，路径的语法比较复杂，因此要根据实际情况进行选择合适的方法，并进行优化和测试，以保证最终结果的正确性和性能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64088