直线、曲线与基础绘图

2023-10-18 01:48:09

如今，WebGL 作为一种强大的图形编程工具，因其丰富而灵动的视觉呈现效果而风靡全球，基于 WebGL 技术打造的网站往往令人惊叹。

在上一篇文章中，我们已经领略了使用距离来构图的基本方法。现在，让我们深入剖析直线与曲线的绘制原理，从细节处理解这项技术如何赋能图形编程。

绘制直线

首先，我们以绘制直线为例。假设我们有两个点 A 和 B，它们在画布上的坐标分别为 (x1, y1) 和 (x2, y2)。为了在画布上描绘出从 A 点到 B 点的直线，我们需要运用以下步骤：

计算两点之间的距离。 可以使用距离公式来计算 A 点和 B 点之间的距离。距离公式为：

d = √((x2 - x1)² + (y2 - y1)²)

确定直线的方向。 计算出直线方向后，就可以开始在画布上绘制直线了。绘制直线最常用的算法是 Bresenham 算法。该算法以每个像素点为基准，通过比较每个像素点的距离来判断其是否在直线上。Bresenham 算法的伪代码如下：

1. x0 := x1
2. y0 := y1
3. dx := abs(x2 - x1)
4. dy := abs(y2 - y1)
5. if x0 < x2 then sx := 1 else sx := -1
6. if y0 < y2 then sy := 1 else sy := -1
7. err := dx - dy
8. loop
9.      plot(x0, y0)
10.     if x0 = x2 and y0 = y2 then leave
11.     e2 := 2*err
12.     if e2 > -dy then
13.          err := err - dy
14.          x0 := x0 + sx
15.     end if
16.     if e2 < dx then
17.          err := err + dx
18.          y0 := y0 + sy
19.     end if
20. end loop

绘制曲线

现在，我们来看看如何绘制曲线。同样地，我们假设我们有两个点 A 和 B，它们在画布上的坐标分别为 (x1, y1) 和 (x2, y2)。要绘制从 A 点到 B 点的曲线，我们可以使用 Bézier 曲线。

Bézier 曲线是一种常用的曲线绘制算法，它通过控制点来定义曲线的形状。控制点可以是任何数量的点，但最常用的控制点是三个：起始点、结束点和一个控制点。控制点决定了曲线的形状和方向。

Bézier 曲线的绘制方法如下：

计算控制点的坐标。 控制点的坐标可以根据起始点和结束点的坐标以及曲线的形状来计算。
绘制曲线。 计算出控制点的坐标后，就可以开始在画布上绘制曲线了。绘制曲线最常用的算法是 De Casteljau 算法。该算法以递归的方式来计算曲线上每个点的坐标。De Casteljau 算法的伪代码如下：

1. function deCasteljau(points, t)
2.      if points.length == 1 then
3.          return points[0]
4.      else
5.          new_points := []
6.          for i = 0 to points.length - 1 do
7.              new_points.append((1 - t) * points[i] + t * points[i + 1])
8.          end for
9.          return deCasteljau(new_points, t)
10.     end if
11. end function