【亲测免费】 Javascript-Voronoi: 在浏览器中生成Voronoi图的JavaScript库

2026-01-14 18:50:08作者：齐冠琰

Javascript-Voronoi是一个轻量级、高效的JavaScript库，用于在浏览器中生成Voronoi图。此库由gorhill创建并维护。

什么是Voronoi图？

Voronoi图是一种几何图形，其中每个点都与该图中的一个特定区域相关联。这些区域被称为 Voronoi 细胞，它们是所有距离给定点最近的点的集合。Voronoi 图经常被用于各种应用，如地理信息系统、计算机视觉和机器人学。

Javascript-Voronoi能用来做什么？

Javascript-Voronoi可以用于生成Voronoi图，并将其绘制到HTML5 Canvas元素上。这使得它非常适合于各种Web应用程序和游戏，其中需要实时生成Voronoi图的情况。例如，你可以使用Javascript-Voronoi来实现以下功能：

为地图应用生成基于位置的分区；
在策略游戏中生成随机地形；
在物理模拟中生成细胞结构。

Javascript-Voronoi的特点

Javascript-Voronoi具有以下特点：

轻量级：代码量小，易于集成；
高效：利用了Web Workers进行计算，可以在不影响页面性能的情况下生成Voronoi图；
易用：API简单易懂，容易上手；
支持多边形：支持带有孔洞的多边形输入。

如何开始使用Javascript-Voronoi？

要开始使用Javascript-Voronoi，请访问，下载源码或通过npm安装：

npm install javascript-voronoi

然后，在你的项目中引入javascript-voronoi.js文件，并根据文档中的示例编写代码即可开始使用。下面是简单的示例：

// 创建一个新的Voronoi实例
var voronoi = new Voronoi();

// 定义一些点的位置
var points = [
  {x: 10, y: 20},
  {x: 30, y: 40},
  {x: 50, y: 60}
];

// 生成Voronoi图
var diagram = voronoi.compute(points);

// 将结果绘制到canvas元素上
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

for (var i = 0; i < diagram.vertices.length; i++) {
  var vertex = diagram.vertices[i];
  
  context.beginPath();
  context.arc(vertex.x, vertex.y, 3, 0, Math.PI*2);
  context.fillStyle = 'black';
  context.fill();
}

for (var i = 0; i < diagram.cells.length; i++) {
  var cell = diagram.cells[i];
  
  for (var j = 0; j < cell.halfedges.length; j++) {
    var halfedge = cell.halfedges[j];
    
    if (halfedge.next.lSite === null) continue;
    
    var from = halfedge.vertex;
    var to = halfedge.next.vertex;
    
    context.beginPath();
    context.moveTo(from.x, from.y);
    context.lineTo(to.x, to.y);
    context.strokeStyle = 'red';
    context.stroke();
  }
}