在前端开发中，数据可视化是一个非常重要的领域，其中多边形图形的生成是一个普遍且基础的需求，而 envision-voronoi 是一个能够生成 Voronoi 多边形图形的 npm 包，本篇文章将详细介绍其使用教程。
什么是 Voronoi 图形
Voronoi 图形是一种基于点位置的多边形图形，在生成 Voronoi 图形时，一定数量的点被随机生成，并将空间分成若干个区域，每个区域中的点最近的点距离相同，并以这个点为中心生成一个多边形。如下图所示：
envision-voronoi 的安装
使用 npm 包管理工具进行安装，可以通过以下命令安装 envision-voronoi ：
npm install envision-voronoi
envision-voronoi 的使用
安装后，我们需要从向量对象或数组中获取点的列表，并将其传递到 envision-voronoi 以生成 Voronoi 图形。下面是一个简单的示例代码：
-- -------------------- ---- ------- ----- ---------- - ---------------------------- ----- ------ - - - -- --- -- -- -- - -- --- -- -- -- - -- ---- -- -- -- - -- ---- -- -- - -- ----- ------- - ----------------------------------------- ---------------------
以上代码中，我们通过 require 引入 envision-voronoi 包，定义了一个点列表 points ，并通过 computeVoronoiDiagram() 方法生成 Voronoi 图形。
envision-voronoi 的二次开发
在使用 envision-voronoi 的基础上，我们还可以通过其提供的一些接口对其进行二次开发。
computeVoronoiDiagram()
这是用于生成 Voronoi 图形的主要方法。传入一个点数组，可以得到一个 Voronoi 图形。
envVoronoi.computeVoronoiDiagram(points, boundingBox);
其中，boundingBox 是可选的边框，可以通过这个参数来控制 Voronoi 图形的外观和大小。
computeDelaunayTriangulation()
使用两个点生成一条连线，将点集分为若干个三角形区域。computeDelaunayTriangulation() 可以用来生成 Delaunay 三角剖分图形。
envVoronoi.computeDelaunayTriangulation(points);
computeVoronoiDiagramAndDelaunayTriangulation()
产生 Voronoi 图形和 Delaunay 三角剖分图形的对象。
envVoronoi.computeVoronoiDiagramAndDelaunayTriangulation(points, boundingBox);
computeDelaunayTriangulationAndCoords()
根据输入的点（Point），生成 Delaunay 三角剖分图形，并返回所有点的坐标。
envVoronoi.computeDelaunayTriangulationAndCoords(points);
总结
envision-voronoi 是一个非常有用的 npm 包，可以用来生成 Voronoi 图形、Delaunay 三角剖分图形，以及各种边框和坐标等相关信息。它的使用十分简单，只需传入一组点就可以生成特定的图形。如果需要生成多边形、点、线等复杂图形，envision-voronoi 将会成为您最佳的选择之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf56