如何使用 JavaScript 通过多个点绘制平滑曲线？

介绍

绘制平滑曲线是Web应用程序中的常见需求。用于可视化数据或图形的呈现。JavaScript是一种支持数据可视化的强大语言。我们可以使用JavaScript创建平滑曲线。

本文将介绍如何使用JavaScript在Web应用程序中绘制多个点的平滑曲线。

理论知识

Bezier曲线

Bezier曲线是平面或三维空间中的一种参数曲线。曲线由一组控制点和参数t（0≤t≤1）组成。在二维平面中，Bezier曲线的一般形式为：

B(t) = P0(1 - t)^3 + 3P1t(1 - t)^2 + 3P2t^2(1 - t) + P3t^3

其中，P0、P1、P2、P3是一组控制点。

使用一种计算方法可以绘制出Bezier曲线的平滑曲线。每个点都是一组控制点的曲线端点。为了绘制多个点的平滑曲线，我们需要在点之间绘制Bezier曲线。

Catmull-Rom曲线

Catmull-Rom曲线是一种样条插值曲线，在计算机图形学中广泛应用。Catmull-Rom曲线经常用来近似一组给定的点，得到一条平滑的曲线。Catmull-Rom曲线采用一定数量的点，并生成一个平滑的曲线，两个点之间的转换是光滑的。Catmull-Rom曲线具有良好的几何性质，可以很容易地进行计算和展示。

在计算机图形中计算Catmull-Rom曲线时，需要进行向量运算。具体实现包括向量的加、减、点乘、叉乘等。

实现过程

Step1 定义数据

首先，我们定义一些数据。包括点的数量、颜色、边框等。

const data = [
  {x: 10, y: 30},
  {x: 80, y: 50},
  {x: 170, y: 90},
  {x: 250, y: 60},
  {x: 340, y: 120},
  {x: 400, y: 80},
  {x: 470, y: 50},
  {x: 560, y: 100}
];
const lineColor = "#cff09e";
const lineBorder = "#ced3d9";
const lineWidth = 2;

Step2 创建画布和上下文

创建HTML画布并设置样式。

const canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.style.border = `1px solid ${lineBorder}`;
document.body.appendChild(canvas);
const context = canvas.getContext("2d");

Step3 计算Catmull-Rom曲线

我们需要先计算每个点之间的Catmull-Rom曲线，以绘制平滑曲线。计算方法如下：

function catmullRomInterpolate(t, p0, p1, p2, p3) {
  const v0 = [(p2.x - p0.x) / 6, (p2.y - p0.y) / 6];
  const v1 = [(p3.x - p1.x) / 6, (p3.y - p1.y) / 6];
  const t2 = t * t;
  const t3 = t * t2;
  
  const result = [
    (2 * p1.x) + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3,
    (2 * p1.y) + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3
  ];
  
  return result;
}

catmullRomInterpolate是一个计算两个点之间的Catmull-Rom曲线的函数。给定四个控制点，它将计算两个相邻点的曲线。

函数的参数分别是：t，表示曲线上的点在曲线上所占的百分比。p0,p1,p2,p3表示控制点。

该函数返回曲线上的点。

Step4 绘制平滑曲线

现在我们已经计算了Catmull-Rom曲线，可以开始绘制平滑曲线。实现过程如下：

context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.beginPath();
for (let i = 0; i < data.length - 1; i++) {
  const p0 = (i === 0) ? data[i] : data[i - 1];
  const p1 = data[i];
  const p2 = data[i + 1];
  const p3 = (i === data.length - 2) ? data[i + 1] : data[i + 2];
  for (let t = 0; t <= 1; t += 0.1) {
    const point = catmullRomInterpolate(t, p0, p1, p2, p3);
    if (t === 0) {
      context.moveTo(point[0], point[1]);
    } else {
      context.lineTo(point[0], point[1]);
    }
  }
}
context.stroke();

上述代码的主要工作是从一个点到另一个点计算Catmull-Rom曲线。我们用for循环遍历数据点，计算每个点相邻的Catmull-Rom曲线。遍历曲线上的点，使用moveTo和lineTo函数将点连接起来，绘制平滑曲线。

总结

通过本文所述的步骤和理论知识，我们能够使用JavaScript绘制平滑曲线。我们了解了Catmull-Rom曲线的含义，并使用贝塞尔曲线计算两个点之间的平滑曲线。使用画布API，我们可以轻松地在Web应用程序中创建平滑曲线。