在前端开发过程中，我们常常需要使用一些图形工具来实现快速的原型设计。@thacker/primitive 是一个可爱的 npm 包，提供了渐进式的图形生成工具，可以用来制作简单的图形元素。此篇文章将带您学习如何使用该 npm 包。
安装
在终端中，通过以下命令安装 @thacker/primitive：
npm install @thacker/primitive --save
使用
在项目中，您可以通过以下方式引入该 npm 包：
const primitive = require('@thacker/primitive');可以通过以下方式，调用该 npm 包：
primitive({
input: 'path/to/image.jpg',
numSteps: 100,
outputFile: 'output.svg',
shapeType: 'circle'
}, function(err, output) {
console.log(err, output);
});上面的代码将读取图像，调用 100 次形状转换，最终导出 svg。
下面介绍该 npm 包提供的一些常用参数。
input
input 是要转换的图片的路径。可以是 svg，png 或 jpg。
numSteps
numSteps 定义了生成形状的次数。生成次数越多，结果将越准确。但是，生成次数过多，将会大大增加运算时间。该值通常在 10 至 1000 之间。如果不设置，会默认生成 100 次形状。
outputFile
outputFile 是输出 svg 文件的路径。如果未定义，则默认不导出文件。
shapeType
shapeType 定义了生成的形状的类型。可以是 circle，rectangle，ellipse 或 rotated-rectangle 中的一种。如果不设置，则默认为 circle。
shapeAlpha
shapeAlpha 定义生成的形状的不透明度。在 0 到 255 之间，255 表示完全不透明，0 表示完全透明。如果您需要自己定义颜色或者搭配图片使用，则该参数将非常的有用。如果未设置，将默认生成 rgba(0, 0, 0, 255) 颜色的形状。
示例代码
以下是示例代码，即最小代码示例，它将读取指定的图片，调用 10 次形状转换，并将最终结果保存到指定文件中。
const primitive = require('@thacker/primitive');
primitive({
input: 'example.png',
numSteps: 10,
outputFile: 'output.svg',
shapeType: 'circle'
});总结
通过本文，您已经掌握了如何使用 @thacker/primitive 这个生成图形的工具。我们希望您通过本文所讲述的内容，可以更好地利用 npm 包来编写更加优秀的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005528b81e8991b448d0036