友情提示

1. 请先看这里 👉 引言
2. 源码的GitHub地址 👉 源码
3. 本文内容对应的代码在feat/graphics这个分支上，建议切到这个分支查看代码。

1. 前言

本文将会补充Graphics类支持的所有图形，一些简单的图形，将会使用比较短的篇幅来介绍，重点将会放在曲线等复杂图形的绘制上。鉴于我们已经讲过了矩形的绘制，所以本文将会从圆开始。

2. 简单图形

2.1 圆

我们会用一个Circle类来代表一个圆，注意，是一个完整的圆，而不是圆弧。

export class Circle extends Shape {
  public x: number
  public y: number
  public radius: number
  public readonly type = ShapeType.Circle
  constructor(x = 0, y = 0, radius = 0) {
    super()
    this.x = x
    this.y = y
    this.radius = radius
  }
  public contains(point: Point): boolean {
    return true
  }
}

绘制圆的代码如下

if (shape instanceof Circle) {
  const circle = shape
  const { x, y, radius } = circle

  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.closePath()

  if (fillStyle.visible) {
    ctx.globalAlpha = fillStyle.alpha * this.worldAlpha
    ctx.fill()
  }
  if (lineStyle.visible) {
    ctx.globalAlpha = lineStyle.alpha * this.worldAlpha
    ctx.stroke()
  }
}

2.2 椭圆

用Ellipse类来表示椭圆，注意，是一个完整的椭圆，而不是一部分

export class Ellipse extends Shape {
  public x: number
  public y: number
  public radiusX: number
  public radiusY: number
  public readonly type = ShapeType.Ellipse
  constructor(x = 0, y = 0, radiusX = 0, radiusY = 0) {
    super()
    this.x = x
    this.y = y
    this.radiusX = radiusX
    this.radiusY = radiusY
  }
  public contains(point: Point): boolean {
    return true
  }
}

绘制椭圆的代码如下

if (shape instanceof Ellipse) {
  const ellipse = shape
  const { x, y, radiusX, radiusY } = ellipse

  ctx.beginPath()
  ctx.ellipse(x, y, radiusX, radiusY, 0, 0, Math.PI * 2)

  if (fillStyle.visible) {
    ctx.globalAlpha = fillStyle.alpha * this.worldAlpha
    ctx.fill()
  }

  if (lineStyle.visible) {
    ctx.globalAlpha = lineStyle.alpha * this.worldAlpha
    ctx.stroke()
  }
}

2.3 圆角矩形

我们将会用RoundedRectangle类来表示圆角矩形，圆角矩形就是4个四分之一圆+4条线段

export class RoundedRectangle extends Shape {
  public x: number
  public y: number
  public width: number
  public height: number
  public radius: number
  public readonly type = ShapeType.RoundedRectangle
  constructor(x = 0, y = 0, width = 0, height = 0, radius = 20) {
    super()
    this.x = x
    this.y = y
    this.width = width
    this.height = height

    const r = Math.min(width, height) / 2
    this.radius = radius > r ? r : radius
  }
  public contains(point: Point): boolean {
    return true
  }
}

绘制圆角矩形的代码如下

if (shape instanceof RoundedRectangle) {
  const roundedRectangle = shape
  const { x, y, width, height, radius } = roundedRectangle

  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.arc(x + radius, y + radius, radius, Math.PI * 1.5, Math.PI, true)
  ctx.lineTo(x, y + height - radius)
  ctx.arc(
    x + radius,
    y + height - radius,
    radius,
    Math.PI,
    Math.PI / 2,
    true
  )
  ctx.lineTo(x + width - radius, y + height)
  ctx.arc(
    x + width - radius,
    y + height - radius,
    radius,
    Math.PI / 2,
    0,
    true
  )
  ctx.lineTo(x + width, y + radius)
  ctx.arc(x + width - radius, y + radius, radius, 0, Math.PI * 1.5, true)
  ctx.closePath()

  if (fillStyle.visible) {
    ctx.globalAlpha = fillStyle.alpha * this.worldAlpha
    ctx.fill()
  }
  if (lineStyle.visible) {
    ctx.globalAlpha = lineStyle.alpha * this.worldAlpha
    ctx.stroke()
  }
}

2.4 多边形

我们将会用Polygon类来表示一个多边形

export class Polygon extends Shape {
  public points: number[] // 多边形由多个点构成，points数组每2个元素代表一个顶点的坐标
  public closeStroke = false
  public readonly type = ShapeType.Polygon
  constructor(points: number[] = []) {
    super()
    this.points = points
  }
  public contains(point: Point): boolean {
    return true
  }
}

points数组每两个元素代表一对(x,y)，也就是多边形的一个顶点

绘制多边形的代码如下

if (shape instanceof Polygon) {
  const polygon = shape

  const { points, closeStroke } = polygon

  ctx.beginPath()

  ctx.moveTo(points[0], points[1])

  for (let i = 2; i < points.length; i += 2) {
    ctx.lineTo(points[i], points[i + 1])
  }

  if (closeStroke) {
    ctx.closePath()
  }

  if (fillStyle.visible) {
    ctx.globalAlpha = fillStyle.alpha * this.worldAlpha
    ctx.fill()
  }

  if (lineStyle.visible) {
    ctx.globalAlpha = lineStyle.alpha * this.worldAlpha
    ctx.stroke()
  }
}

2.5 整体效果

测试一下所有简单图形的效果

2.5.1 代码

const graphic = new Graphics()
    .beginFill('red')
    .drawRect(100, 100, 100, 100)
    .beginFill('green')
    .drawCircle(100, 300, 100)
    .beginFill('pink')
    .drawEllipse(400, 200, 200, 100)
    .beginFill('brown')
    .drawRoundedRect(300, 400, 200, 100, 100)
    .beginFill('purple')
    .drawPolygon([
      600, 300, 700, 100, 800, 200, 1000, 100, 900, 400, 700, 600
    ])

app.stage.addChild(graphic)

2.5.2 效果

灰色的背景和虚线辅助线是另加的，大家可以忽略

code sandbox地址

3. 复杂图形

3.1 如何在这个渲染引擎中实现曲线

首先明确一点，除了第2节提到的那些带有曲线的图形(椭圆、圆等)，其他任何带有曲线的图形，都会用多边形来近似，比如二阶贝塞尔曲线的近似：

这是为了后面的碰撞检测功能作准备，碰撞检测功能做的事情就是：判断一个点是否在一个封闭的图形的内部；我们只能判断一个点是否在一个封闭的直边多边形内部(后续的文章会解释)，如果是一个曲边多边形，那么我们就无从下手了。

3.2 二阶贝塞尔曲线

我们用3个点来表示一条二阶贝塞尔曲线，这3个点分别是$P_0$、$P_1$和$P_2$，他们分别代表着这条二阶贝塞尔曲线的起始点、控制点、终点。如果对贝塞尔曲线不太熟悉，可以去看看这几篇文章

深入理解贝塞尔曲线

如何理解并应用贝塞尔曲线

我们说了，从第3节开始讲述的所有曲线，都将用多边形来近似，那么现在问题来了，我们要怎么用多边形来近似贝塞尔曲线呢？

3.2.1 把t均分成n份

我们首先要在贝塞尔曲线上采样一系列的点

贝塞尔曲线是一个$x$和$y$关于$t$的参数方程，$t\in[0,1]$，要在贝塞尔曲线上采样多个点，可以把$[0,1]$这个区间分成n份，这样我们就得到了n个$t$值，然后把这些$t$值代入贝塞尔曲线的参数方程，我们就可以得到n个位于贝塞尔曲线上的点，然后把这些点连起来，就得到了一条近似的贝塞尔曲线。

3.2.2 采样多少个点？

n的值如何求出呢？

我们会根据贝塞尔曲线的长度，来决定这个n到底有多大，如果曲线很长，那么n就会很大，意味着我们要用更多的点来近似这条贝塞尔曲线；如果曲线很短，那么n会很小，意味着我们会用比较少的点来近似这条贝塞尔曲线。

3.2.3 求贝塞尔曲线的长度

求一条曲线的长度？想必大家心中已经有了答案了，那就是定积分。定积分的应用有很多，除了最经典的求曲边梯形的面积，还有求旋转体的体积，求曲线的弧长，这里我们要用到的就是求曲线的弧长

我们要做的事情，就是得出贝塞尔曲线的弧长的积分表达式(对哪个函数进行积分以及积分区间)，在做这件事情之前，我们先来简单回顾一下如何得出一些简单的量的积分表达式。

如果不想看这些纯数学问题，可以直接跳到3.2.4代码实现。

3.2.3.1 量和一份的概念

求定积分的时候，我们要把要求的量拆解成无限多份，然后得出其中的一份的表达式，得到了这个一份的表达式之后，我们也就得到了积分表达式。

3.2.3.2 求曲边梯形的面积

以$f(x)=x^2$这个函数为例，这个函数的图像是这样的： 假设我们要求这个函数在$x\in[0,1]$ 的面积，如下图(阴影部分)： 我们要求的量是阴影部分面积，我们先将其放大(放大到特别大)，然后取其中的一小份(假设无限小)，如下: 这个阴影部分就是我们要的一份，它的宽度为$dx$(一个无穷小的值)，无穷多个这样的一份加起来，就等于我们要求的量(面积)，我们只需要表达出这个一份，就可以得出积分表达式。

可以看到，这个一份(阴影区域的面积)$S$可以表达为： $S=f(x_0)\times dx$ (其实取$[x_0,x_0+dx]$之间的任意一个点都行，这里取了左边的端点)，所以我们的积分表达式是：$\int_0^1 f(x)dx$，即$\int_0^1 x^2dx$

接下来的事情就比较简单了，根据微积分基本定理(牛顿-莱布尼兹公式)，我们需要得到$f(x)$的原函数，也就是$\frac{1}{3}x^3$，把$0$和$1$代进去减一下，就得到了结果，结果为$\frac{1}{3}$，所以$f(x)=x^2$在$x\in[0,1]$区间的面积是$\frac{1}{3}$

3.2.3.3 求曲线的弧长

这里还是以$f(x)=x^2$这个函数为例，假设我们要求这个函数在$x\in[0,1]$这一段的弧长，如下图(红色部分)：

我们要求的量是红色曲线的弧长，按照惯例，我们先将图像放大到很大，然后再截取一小段(假设无限小)： 这个红色的线段长度$L$就是我们要求的一份，我们截取的这个区间的长度依然为$dx$，当$dx$趋近于无穷小时，我们可以近似地把这个红色的线段看作直线，所以，我们可以用勾股定理来求出这个红色线段的长度$L$： 很明显，这个三角形的两条直边的其中一条的长度是$dx$，另一条直边的长度是$dy$($x$变化量为$dx$时，$y$的变化量)，很显然，$\frac {dy}{dx}$就是这个三角形的斜边的斜率，即$f(x)$在$x_0$处的导数，即$f'(x_0)$，所以$dy=f'(x_0) \times dx$

可以得到：

$L=\sqrt{(dx)^2+(dy)^2}=\sqrt{(dx)^2+(f'(x_0)\times dx)^2}$

将$dx$提出来，可以得到：

$L=\sqrt{1+(f'(x_0))^2} \times dx$

所以我们的积分表达式是：$\int_0^1\sqrt{1+(f'(x))^2}dx$，即$\int_0^1\sqrt{1+4x^2}dx$

接下来还是运用牛顿-莱布尼兹公式，但是这个根号让我们的积分变的十分困难，如果能去掉这个根号那将是绝杀，可惜去不得，不过好在$\sqrt{1+4x^2}$是一种常见的积分类型，即$\int\sqrt{x^2+a^2}dx$型，如果大家不知道怎么积，可以去看看这篇文章：zhuanlan.zhihu.com/p/349530983 ，在这里我们直接套公式，得到$\int\sqrt{1+4x^2}dx=\frac{x}{2}\sqrt{4x^2+1}+\frac{1}{4}\ln\bigg\lvert2x+\sqrt{4x^2+1}\bigg\rvert+C$，将$0$和$1$代入，得到$\int_0^1\sqrt{1+4x^2}dx=\frac{\sqrt{5}}{2}+\frac{1}{4}\ln(2+\sqrt{5})$，所以函数$f(x)=x^2$的曲线在$x\in[0,1]$这一段的弧长为$\frac{\sqrt{5}}{2}+\frac{1}{4}\ln(2+\sqrt{5})\approx1.4789$

3.2.3.4 求二阶贝塞尔曲线的弧长

我们用3个点来表示一条二阶贝塞尔曲线，这3个点分别是$P_0$、$P_1$和$P_2$，他们分别代表着这条二阶贝塞尔曲线的起始点、控制点、终点。

二阶贝塞尔曲线并不是经典的$y$对$x$的函数，而是一个$y$对$t$以及$x$对$t$的函数，它只能用参数方程来表示，我们用$P_0x$和$P_0y$来表示$P_0$的$x$坐标和$y$坐标，用$P_1x$和$P_1y$来表示$P_1$的$x$坐标和$y$坐标，用$P_2x$和$P_2y$来表示$P_2$的$x$坐标和$y$坐标，那么二阶贝塞尔曲线的参数方程为：

$\begin{cases} x=(1-t)^2\times P_0x + 2t(1-t) \times P_1x + t^2 \times P_2x \\ y=(1-t)^2\times P_0y + 2t(1-t) \times P_1y + t^2 \times P_2y \end{cases}$

我们依然会采用前面求曲线的弧长的方式来求贝塞尔曲线的弧长，以起始点$P_0$=(1,1)，$P_1$=(1,2)，$P_2$=(2,2)的贝塞尔曲线为例，它的图像是这样的： 假设我们要求$t\in[0,1]$时，这条曲线的弧长(即整条贝塞尔曲线的长度)。

我们要求的量是整条贝塞尔曲线的长度，依然是按照惯例，我们先将图像放大到很大，然后再截取一小段(假设无限小)： 这个红色的线段的长度$L$就是我们要求的一份，$dx$是这条线段在$x$轴方向上的长度，$dy$是这条线段在$y$轴方向上的长度，当$dx$和$dy$趋近于无穷小时，可以把红色的线段看作一条直线，所以，我们依然可以使用勾股定理，得出$L=\sqrt{(dx)^2+(dy)^2}$。但是，到这里还没有结束，我们要对$t$进行积分，而不是对$x$和$y$进行积分，所以这里我们还要得出$dx$和$dy$对于$dt$的表达式；由于$x$对$t$的函数和$y$对$t$的函数的形式是一样的，所以我们只需要求出$dx$对$dt$的表达式也就得到了$dy$对$dt$的表达式。

$dx$就是$x$对$t$的函数在$t$的变化量为$dt$($dt$趋近于无穷小)时，$x$的变化量。如下：

$dt$是一个无穷小量，这个时候，我们可以通过导数(即斜率)得出$\frac{dx}{dt}=x_0'$，$x_0'$是$x$对$t$的函数在$t=t_0$处的导数，将$dt$乘到右边，我们有：$dx=x_0' \times dt$。通过同样的方法，我们可以得到：$dy=y_0' \times dt$。所以我们要求的一份$L=\sqrt{(dx)^2+(dy)^2}=\sqrt{(x_0' \times dt)^2+(y_0' \times dt)^2}=\sqrt{(x_0')^2+(y_0')^2} \times dt$，所以，我们的积分表达式是：$\int_0^1\sqrt{(x')^2+(y')^2}dt$，接下来就是求函数$\sqrt{(x')^2+(y')^2}$的不定积分了。

根据贝塞尔曲线的参数方程，有：

$\begin{cases} x'=2(P_0x-2P_1x+P_2x)t-2(P_0x-P_1x) \\ y'=2(P_0y-2P_1y+P_2y)t-2(P_0y-P_1y) \end{cases}$

为了简化这个公式，我们把一些常数挪到一起，用另一些常数代替，令$a_x=2(P_0x-2P_1x+P_2x)$，$b_x=-2(P_0x-P_1x)$，$a_y=2(P_0y-2P_1y+P_2y)$，$b_y=-2(P_0y-P_1y)$，所以：

$\begin{cases} x'=a_xt+b_x \\ y'=a_yt+b_y \end{cases}$

所以$\sqrt{(x')^2+(y')^2}=\sqrt{(a_x^2+a_y^2)t^2+2(a_xb_x+a_yb_y)t+b_x^2+b_y^2}$

为了简化这个式子，我们再次将常量挪到一起，用另一些常量替换，令$A=a_x^2+a_y^2$，$B=2(a_xb_x+a_yb_y)$，$C=b_x^2+b_y^2$，

所以$\sqrt{(x')^2+(y')^2}=\sqrt{At^2+Bt+C}$

接下来我们依然会使用换元法，来求解这个不定积分，我们会用换元法将其化解成$\int\sqrt{x^2+a^2}dx$型不定积分，然后套公式得出结果，如果大家不知道怎么求$\int\sqrt{x^2+a^2}dx$型不定积分，可以去看看这篇文章：zhuanlan.zhihu.com/p/349530983…

首先，$At^2+Bt+C$是两个平方量的和($(x')^2$和$(y')^2$)，所以$At^2+Bt+C>=0$，根据一元二次方程解的个数的判断公式，我们有$B^2-4AC<=0$

接下来就是开始换元了：

$\int\sqrt{At^2+Bt+C}dt$

$=\int\frac{1}{\sqrt{A}}\times{\sqrt{A}}\times\sqrt{At^2+Bt+C}dt$

$=\int\frac{1}{\sqrt{A}}\times\sqrt{A^2t^2+ABt+AC}dt$

$=\int\frac{1}{\sqrt{A}}\times\sqrt{(At+\frac{B}{2})^2+(\sqrt{\frac{4AC-B^2}{4}})^2}dt$

$=\int\frac{1}{\sqrt{A}}\times\sqrt{(At+\frac{B}{2})^2+(\sqrt{\frac{4AC-B^2}{4}})^2}\times \frac{1}{A} \times d(At+\frac{B}{2})$

$=\frac{1}{A\sqrt{A}}\times\int\sqrt{(At+\frac{B}{2})^2+(\sqrt{\frac{4AC-B^2}{4}})^2} \times d(At+\frac{B}{2})$

令$u=At+\frac{B}{2}$，$a=\sqrt{\frac{4AC-B^2}{4}}$，我们就得到了$\int\sqrt{x^2+a^2}dx$型不定积分，即$\frac{1}{A\sqrt{A}}\int\sqrt{u^2+a^2}du$，这个时候，积分变量从$t$变成了$u$，因为对$t$的积分区间是$t\in[0,1]$且$u=At+\frac{B}{2}$，所以对$u$的积分区间为$u\in[\frac{B}{2},A+\frac{B}{2}]$，所以我们可以得出：

$\int_0^1\sqrt{(x')^2+(y')^2}dt$

$= \int_0^1\sqrt{At^2+Bt+C}dt$

$= \frac{1}{A\sqrt{A}}\int_{\frac{B}{2}}^{A+\frac{B}{2}}\sqrt{u^2+a^2}du$ ($u=At+\frac{B}{2}$，$a=\sqrt{\frac{4AC-B^2}{4}}$)

$= \frac{1}{A\sqrt{A}}\times\bigg[\frac{A+\frac{B}{2}}{2}\sqrt{(A+\frac{B}{2})^2+a^2}+\frac{a^2}{2}\ln\bigg\lvert A+\frac{B}{2}+\sqrt{(A+\frac{B}{2})^2+a^2}\bigg\rvert - \bigg(\frac{B}{4}\sqrt{\frac{B^4}{4}+a^2}+\frac{a^2}{2}\ln\bigg\lvert \frac{B}{2}+\sqrt{\frac{B^2}{4}+a^2}\bigg\rvert\bigg)\bigg]$

接下来就是把各个常量代进去了。结果$\approx1.6232$

3.2.4 代码实现

3.2.4.1 求二阶贝塞尔曲线的弧长

export const getQuadraticBezierLength = (
  P0X: number,
  P0Y: number,
  P1X: number,
  P1Y: number,
  P2X: number,
  P2Y: number
) => {
  const ax = 2 * (P0X - 2 * P1X + P2X)
  const bx = -2 * (P0X - P1X)
  const ay = 2 * (P0Y - 2 * P1Y + P2Y)
  const by = -2 * (P0Y - P1Y)

  const A = ax * ax + ay * ay
  const B = 2 * (ax * bx + ay * by)
  const C = bx * bx + by * by

  const a = Math.sqrt((4 * A * C - B * B) / 4)

  // 牛顿-莱布尼兹公式
  const F1 =
    (A / 2 + B / 4) * Math.sqrt((A + B / 2) * (A + B / 2) + a * a) +
    ((a * a) / 2) *
      Math.log(
        Math.abs(A + B / 2 + Math.sqrt((A + B / 2) * (A + B / 2) + a * a))
      )

  const F0 =
    (B / 4) * Math.sqrt((B * B) / 4 + a * a) +
    ((a * a) / 2) * Math.log(B / 2 + Math.sqrt((B * B) / 4 + a * a))

  const length = (1 / (Math.sqrt(A) * A)) * (F1 - F0) // 不要忘了前面还有个(A根号A分之一)

  return length
}

虽然公式很长，但是代码看起来就短多了。

3.2.4.2 采样多个点，然后连成一个近似于二阶贝塞尔曲线的直边多边形

public quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number) {
  const len = this.currentPath.points.length

  if (len === 0) {
    this.currentPath.points = [0, 0]
  }

  const P0X = this.currentPath.points[len - 2]
  const P0Y = this.currentPath.points[len - 1]
  const P1X = cpX
  const P1Y = cpY
  const P2X = toX
  const P2Y = toY

  // 求出这条二阶贝塞尔曲线的长度
  const curveLength = getQuadraticBezierLength(P0X, P0Y, P1X, P1Y, P2X, P2Y)

  let segmentsCount = Math.ceil(curveLength / 10) // 每10个像素采样一次

  // 最大2048份
  if (segmentsCount > 2048) {
    segmentsCount = 2048
  }

  // 最小8份
  if (segmentsCount < 8) {
    segmentsCount = 8
  }

  // 计算出采样点的坐标然后放入points数组
  for (let i = 1; i <= segmentsCount; i++) {
    const t = i / segmentsCount

    // 直接套用二阶贝塞尔曲线的公式
    const x = (1 - t) * (1 - t) * P0X + 2 * t * (1 - t) * P1X + t * t * P2X
    const y = (1 - t) * (1 - t) * P0Y + 2 * t * (1 - t) * P1Y + t * t * P2Y

    this.currentPath.points.push(x, y)
  }

  return this
}

3.3 三阶贝塞尔曲线

我们用4个点来表示一条三阶贝塞尔曲线，这3个点分别是$P_0$、$P_1$、$P_2$和$P_3$，他们分别代表着这条三阶贝塞尔曲线的起始点、控制点1、控制点2、终点。如果对贝塞尔曲线不太熟悉，可以去看看这几篇文章

深入理解贝塞尔曲线

如何理解并应用贝塞尔曲线

3.3.1 如何计算三阶贝塞尔曲线的弧长

与二阶贝塞尔曲线类似，我们会采样多个曲线上的点，然后把这些点连起来，就得到了一条近似的三阶贝塞尔曲线，三阶贝塞尔曲线的参数方程如下：

$\begin{cases} x=(1-t)^3\times P_0x + 3t(1-t)^2 \times P_1x + 3t^2(1-t) \times P_2x + t^3 \times P_3x \\ y=(1-t)^3\times P_0y + 3t(1-t)^2 \times P_1y + 3t^2(1-t) \times P_2y + t^3 \times P_3y \end{cases}$

与二阶贝塞尔曲线类似，我们可以得到三阶贝塞尔曲线弧长的积分表达式为：$\int_0^1\sqrt{(x')^2+(y')^2}dt$，将参数方程中的$x$和$y$代入，然后把一些常数凑到一起并用另一些常数来替换，我们可以得到：

$\int\sqrt{(x')^2+(y')^2}dt=\int\sqrt{At^4+Bt^3+Ct^2+Dt+E}dt$

接下来我们要怎么求这个函数的不定积分呢？答案是：直接放弃

这个函数的不定积分由于根号内的$t$的次数太高了，已经没法求了，我们只能另辟蹊径。

3.3.2 分段+勾股定理

我们将会在三阶贝塞尔曲线上采样10个点，然后得到这些点的坐标，这样我们就得到了一系列的线段，我们用勾股定理来求出这些线段的长度之和，这样就得到了三阶贝塞尔曲线的长度的近似值，如下图所示：

代码如下：

export const getBezierLength = (
  P0X: number,
  P0Y: number,
  P1X: number,
  P1Y: number,
  P2X: number,
  P2Y: number,
  P3X: number,
  P3Y: number
) => {
  const n = 10 // 取10段

  let x = P0X
  let y = P0Y

  let length = 0

  for (let i = 1; i <= n; i++) {
    const t = i / n

    const newX =
      (1 - t) * (1 - t) * (1 - t) * P0X +
      3 * t * (1 - t) * (1 - t) * P1X +
      3 * t * t * (1 - t) * P2X +
      t * t * t * P3X
    const newY =
      (1 - t) * (1 - t) * (1 - t) * P0Y +
      3 * t * (1 - t) * (1 - t) * P1Y +
      3 * t * t * (1 - t) * P2Y +
      t * t * t * P3Y

    const dx = newX - x
    const dy = newY - y

    length += Math.sqrt(dx * dx + dy * dy)

    x = newX
    y = newY
  }

  return length
}

3.3.3 采样多个点，然后连成一个近似于三阶贝塞尔曲线的直边多边形

接下来的事情就跟处理二阶贝塞尔曲线的方式差不多了，我们已经得到了三阶贝塞尔曲线的长度，然后计算出n的大小，最后采样n个点，将这些点用直线连接起来。

代码如下：

public bezierCurveTo(
  cpX: number,
  cpY: number,
  cpX2: number,
  cpY2: number,
  toX: number,
  toY: number
) {
  const len = this.currentPath.points.length

  if (len === 0) {
    this.currentPath.points = [0, 0]
  }

  const P0X = this.currentPath.points[len - 2]
  const P0Y = this.currentPath.points[len - 1]
  const P1X = cpX
  const P1Y = cpY
  const P2X = cpX2
  const P2Y = cpY2
  const P3X = toX
  const P3Y = toY

  // 求出这条三阶贝塞尔曲线的长度
  const curveLength = getBezierLength(P0X, P0Y, P1X, P1Y, P2X, P2Y, P3X, P3Y)

  let segmentsCount = Math.ceil(curveLength / 10) // 每10个像素采样一次

  // 最大2048份
  if (segmentsCount > 2048) {
    segmentsCount = 2048
  }

  // 最小8份
  if (segmentsCount < 8) {
    segmentsCount = 8
  }

  // 计算出采样点的坐标然后放入points数组
  for (let i = 1; i <= segmentsCount; i++) {
    const t = i / segmentsCount

    // 直接套用三阶贝塞尔曲线的公式
    const x =
      (1 - t) * (1 - t) * (1 - t) * P0X +
      3 * t * (1 - t) * (1 - t) * P1X +
      3 * t * t * (1 - t) * P2X +
      t * t * t * P3X
    const y =
      (1 - t) * (1 - t) * (1 - t) * P0Y +
      3 * t * (1 - t) * (1 - t) * P1Y +
      3 * t * t * (1 - t) * P2Y +
      t * t * t * P3Y

    this.currentPath.points.push(x, y)
  }

  return this
}

3.3.4 效果图

二阶和三阶贝塞尔曲线： 从效果图来看，肉眼已经看不出这是一个直边多边形了。

接下来我们处理曲线的方式跟处理贝塞尔曲线的方式是差不多的，即：先求出曲线的长度，然后求出采样的点的个数n，然后采样n个点，最后把这些点连接起来，就得到了一条近似的曲线。

3.4 圆弧arc

这里的arc函数尽量保持和canvas原生的arc函数的逻辑相同

3.4.1 代码

圆弧的代码比贝塞尔曲线简单多了，直接上代码：

public arc(
  cx: number,
  cy: number,
  radius: number,
  startAngle: number,
  endAngle: number,
  anticlockwise = false
) {
  if (!anticlockwise) {
    while (endAngle < startAngle) {
      endAngle += Math.PI * 2
    }

    if (endAngle - startAngle > Math.PI * 2) {
      endAngle = startAngle + Math.PI * 2
    }
  }

  if (anticlockwise) {
    while (endAngle > startAngle) {
      startAngle += Math.PI * 2
    }

    if (startAngle - endAngle > Math.PI * 2) {
      endAngle = startAngle - Math.PI * 2
    }
  }

  const diff = endAngle - startAngle

  if (diff === 0) {
    return this
  }

  const startX = cx + Math.cos(startAngle) * radius
  const startY = cy + Math.sin(startAngle) * radius

  this.lineTo(startX, startY)

  const curveLen = Math.abs(diff) * radius // 角度(弧度制)乘以半径等于弧长
  let segmentsCount = Math.ceil(curveLen / 10)

  // 最大2048份
  if (segmentsCount > 2048) {
    segmentsCount = 2048
  }

  // 最小8份
  if (segmentsCount < 8) {
    segmentsCount = 8
  }

  for (let i = 1; i <= segmentsCount; i++) {
    const angle = startAngle + diff * (i / segmentsCount)
    const x = cx + Math.cos(angle) * radius
    const y = cy + Math.sin(angle) * radius
    this.lineTo(x, y)
  }

  return this
}

3.4.2 效果

const cir = new Graphics()

cir.lineStyle(1)
cir.arc(200, 200, 100, Math.PI * 2.4, Math.PI * 6.5, true)

app.stage.addChild(cir)

3.5 圆弧arcTo

arcTo可以比较方便地用来构建一些具有圆角的图形，这个函数将会借用arc函数的能力来绘制圆弧，我们要做的就是求出圆心坐标，起始角度和结束角度，以及是否逆时针。

3.5.1 代码

public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) {
  const len = this.currentPath.points.length

  /**
   * 如果画笔当前没有落点，则该操作相当于moveTo(x1, y1)
   * 如果半径为0，则该操作也相当于lineTo(x1, y1)
   */
  if (len === 0 || radius === 0) {
    this.lineTo(x1, y1)
    return this
  }

  /**
   * 假设画笔落点为P0，控制点1为P1，控制点2为P2，如果向量P0P1和向量P1P2的夹角太小或者夹角接近180度，
   * 或者向量P0P1或向量P1P2其中一个的长度为0，
   * 那么该操作也相当于moveTo(x1, y1)，
   * 我们用叉积来判断这种情况
   */
  const a1 = this.currentPath.points[len - 1] - y1
  const b1 = this.currentPath.points[len - 2] - x1
  const a2 = y2 - y1
  const b2 = x2 - x1
  const crossProduct = a1 * b2 - b1 * a2
  const mm = Math.abs(crossProduct)
  if (mm < 1.0e-8) {
    this.lineTo(x1, y1)
    return this
  }

  const dd = a1 * a1 + b1 * b1
  const cc = a2 * a2 + b2 * b2
  const tt = a1 * a2 + b1 * b2
  const k1 = (radius * Math.sqrt(dd)) / mm
  const k2 = (radius * Math.sqrt(cc)) / mm
  const j1 = (k1 * tt) / dd
  const j2 = (k2 * tt) / cc
  const cx = k1 * b2 + k2 * b1
  const cy = k1 * a2 + k2 * a1
  const px = b1 * (k2 + j1)
  const py = a1 * (k2 + j1)
  const qx = b2 * (k1 + j2)
  const qy = a2 * (k1 + j2)
  const startAngle = Math.atan2(py - cy, px - cx)
  const endAngle = Math.atan2(qy - cy, qx - cx)
  const anticlockwise = b1 * a2 > b2 * a1

  return this.arc(
    cx + x1,
    cy + y1,
    radius,
    startAngle,
    endAngle,
    anticlockwise
  )
}

3.5.2 效果

const cir = new Graphics()
.lineStyle(1, 'red')
.moveTo(100, 100)
.arcTo(300, 100, 200, 200, 80)

app.stage.addChild(cir)

3.6 来一个完整的路径

目前所有的图形都讲述完毕了，接下来将用这些图形来构造一个完整的路径

3.6.1 代码

const path = new Graphics()
    .lineStyle(3, 'purple')
    .moveTo(100, 100)
    .lineTo(300, 100)
    .arc(300, 300, 200, Math.PI * 1.5, Math.PI * 2)
    .bezierCurveTo(500, 400, 600, 500, 700, 500)
    .lineTo(600, 300)
    .arcTo(700, 100, 800, 300, 150)
    .quadraticCurveTo(900, 100, 1100, 200)
    .closePath()

app.stage.addChild(path)

3.6.2 效果

不加填充

加上填充

.beginFill('pink', 0.6)

code sandbox地址

4. 最后

本篇讲述了如何构建一些简单图形以及一些比较复杂的曲线图形，到这里，我们已经可以利用Graphics类来构建所有的复杂图形了，对于一些曲线图形我们会采用直边多边形近似的方式来构建，这是为碰撞检测做准备的，也就是下一篇要讲述的内容。

谢谢观看🙏，如果觉得本文还不错，就点个赞吧👍。