在前端开发中，通常需要对网页进行交互式绘图或动画操作。其中，网格点插值技术是实现这些操作的重要基础。npm 包 bridson 就是一个可以进行网格点插值的工具库。使用 bridson 库可以快速创建图像，同时还能使用生成的图像进行交互，有效提升开发效率。
本篇教程将详细讲解 npm 包 bridson 的基本使用方法，帮助大家快速上手这一实用的工具库。
1. bridson 包的安装
在开始使用 bridson 包之前，需要先安装该包。
可以使用 npm 来进行安装：
npm install bridson
2. bridson 包的基本使用
bridson 包的使用非常简单。我们以一个简单的示例来进行介绍。
首先，我们需要在 HTML 文件中创建一个 canvas 元素，用于显示我们生成的图像：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---------- ----- ---------------- ------- ------ ------- ------------- ----------- ---------------------- ------- -------------------------- ------- -------
接着在 JavaScript 文件 example.js 中进行包的引用：
const bridson = require('bridson');我们可以使用 bridson 包中提供的 createImage() 方法生成一张新的图像：
const canvas = document.getElementById('myCanvas');
const image = bridson.createImage(canvas.width, canvas.height);
// 在此处对图像进行操作createImage() 方法将创建一个新的 ImageData 对象，其大小可以指定为 canvas 的大小。ImageData 对象是 HTML5 中表示图像数据的类型之一，对其进行操作可以让我们轻松地绘制图像。
接下来，我们可以使用 bridson.pack() 方法对图像进行填充。该方法可以在图像中生成一组随机点，随机点的数量影响插值的精度。
bridson.pack(image, [
{x: 30, y: 30, size: 10},
{x: 80, y: 90, size: 20},
{x: 200, y: 150, size: 30},
]);pack() 方法接受两个参数，第一个参数是要进行操作的 ImageData 对象，第二个参数是一个包含多个点的数组。在上面的示例中，我们在图像中生成了三个随机点。
现在，我们可以使用 bridson.interpolate() 方法对图像进行插值。
bridson.interpolate(image);
interpolate() 方法即为 bridson 包的核心方法，它将用随机点的权值对图像进行插值，生成一张平滑的图像。最后，我们可以使用 canvas 的 2D 上下文对象将 ImageData 对象绘制到画布上。
const ctx = canvas.getContext('2d');
ctx.putImageData(image, 0, 0);至此，我们已经成功地生成了一张插值图像。
3. bridson 包的高级使用
除了基本的图像生成和插值操作之外，bridson 包还提供一些高级的功能。下面我们将介绍一些手动控制及自定义随机点位置的方法。
3.1 手动控制随机点位置
如果需要手动控制随机点的位置，可以使用 bridson.addPoint() 方法。该方法可以在图像上添加多个随机点，这些点可以跟随鼠标位置进行移动。
bridson.addPoint(image, [
{x: 30, y: 30, size: 10},
{x: 80, y: 90, size: 20},
{x: 200, y: 150, size: 30},
]);addPoint() 方法的参数和 pack() 方法相同，第一个参数是 ImageData 对象，第二个参数是一个包含多个点的数组。在上面的示例中，我们添加了三个随机点。
3.2 对随机点进行排序
bridson 包提供了一些用于控制随机点顺序的方法。可以通过控制随机点的顺序来影响插值的效果。
例如，我们可以使用 bridson.sortPoints() 方法对随机点进行排序，让距离画布中心点最近的点排在最前面。
-- -------------------- ---- -------
------------------------- ----------- ---
----- ----- - ----------
------------ - -------------- ---
------------ - --------------- --
--
----- ----- - ----------
------------ - -------------- ---
------------ - --------------- --
--
------ ----- - ------
---sortPoints() 方法接受两个参数：第一个参数是 ImageData 对象，第二个参数是一个数组排序函数。在上面的示例中，我们使用自定义的函数对随机点进行排序，让距离画布中心点最近的点排在最前面。
3.3 定义随机点位置
如果需要自定义随机点的位置，可以使用 bridson.pointSampler() 方法。该方法可以在 canvas 上为所有随机点定义一个自定义随机分布。
const sampler = bridson.pointSampler(bridge, 100, function(x, y){
return 0.2 + (Math.sin(x/10) * Math.sin(y/13));
});
bridson.generatePoints(image, 100, sampler);pointSampler() 方法接受三个参数：第一个参数是 ImageData 对象，第二个参数是所需的随机点数量，第三个参数是一个用于计算随机分布值的函数。在上面的示例中，我们使用自定义的函数计算随机分布值，并定义了 100 个随机点。后面的 generatePoints() 方法可以使用 sampler 对象来对随机点进行生成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde5033