npm 包 ppem 使用教程

1. 什么是 ppem

ppem 是一个用于处理字形（glyph）的 npm 包。通过该包，我们可以很方便地获取、处理和展示字形信息。

该包的全称是 "Pretty Print EM"，意为 "漂亮地打印 EM"，其中 EM 是字体设计中一个重要的单位。

2. 安装 ppem

要使用 ppem，我们首先需要安装它。可以通过以下命令进行安装：

npm install ppem

在安装完成后，我们就可以在我们的代码中使用 ppem 了。

3. ppem 的基本使用

ppem 最基本的功能是展示字形信息。我们可以通过如下代码来展示一个字形：

const Ppem = require('ppem');
const ppem = new Ppem();
ppem.render('A');

这里我们首先引入了 ppem，然后创建了一个 ppem 的实例。接下来，我们传入参数 'A' 来展示大写字母 A 的字形信息。

运行代码后，我们可以得到类似如下的输出：

A: [geometry = 90,0 90,606.775 534.25,606.775 534.25,0]

其中， "A" 是我们传入的参数，[geometry = ...] 则是该字形的轮廓信息，后面会详细介绍。

4. 获取字形信息

ppem 还提供了获取字形信息的功能，我们可以通过调用 get 方法来获取指定字形的信息，例如：

const glyph = ppem.get('A');
console.log(glyph.geometry);

这里我们先获取了字形信息，然后输出了该字形的轮廓信息。

5. 处理字形信息

ppem 还提供了一些方便的方法来处理字形信息。例如，我们可以使用 mirror 方法来将字形进行镜像变换：

const glyph = ppem.get('A');
ppem.mirror(glyph);
console.log(glyph.geometry);

这里我们先获取了字形信息，然后将其进行了镜像变换，最后输出了变换后的轮廓信息。

6. 展示更多字形信息

在前面的例子中，我们只是展示了单个字形的信息。ppem 还提供了一些方法来展示更多的字形信息。

例如，我们可以通过如下代码来展示拉丁字母表：

for (let i = 65; i <= 90; i++) {
  ppem.render(String.fromCharCode(i));
}

这里我们使用循环来遍历拉丁字母表中的每个字母，并调用 ppem 的 render 方法来展示每个字母的信息。

运行代码后，我们可以得到类似如下的输出：

A: [geometry = 90,0 90,606.775 534.25,606.775 534.25,0]
B: [geometry = 100,0 90,575.374 416.844,606.775 534.25,579.401 534.25,534.785 416.125,562.313 416.125,19.13 534.25,46.656 534.25,1.984 416.094,29.535 248.094,29.535 234.75,16.188 228.062,0 100,0]
C: [geometry = 461.453,29.535 326.75,29.535 249.844,148.813 249.844,445.938 326.75,564.25 461.453,564.25 461.453,482.695 392.672,482.695 392.672,446.219 461.453,446.219 ... ]
...

7. 小结

ppem 是一个非常有用的 npm 包，可以帮助我们处理字形信息。通过本文的介绍，我们了解了 ppem 的基本使用、如何获取字形信息、如何处理字形信息、以及如何展示更多字形信息。相信在实际开发中，ppem 会为我们带来更多的便利。

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