其他元素就不再贅述。

通過以上對背景以及一些前置知識的介紹，相信大家已經(jīng)對svg有了一個初步的了解，接下來我們就回到最初的問題，如何通過svg來從頭開始繪制一個曲線面積圖？我主要分了以下幾個步驟，下文會對每個步驟逐一進行說明。

計算機繪圖使用的坐標(biāo)系統(tǒng)都是網(wǎng)格坐標(biāo)系。其以左上角作為坐標(biāo)系的原點，X軸正方形向右逐漸開始增大，Y軸正方向向下逐漸開始增大。

圖例來源于網(wǎng)絡(luò)

了解了svg的坐標(biāo)系之后，我們來繪制曲線面積圖中的坐標(biāo)系，坐標(biāo)系其實就是由兩條線相交而成，svg中的line元素就是用來繪制直線的，所以使用line元素就可以繪制出X軸和Y軸。需要注意的是svg的坐標(biāo)系原點在左上角，而我們需要實現(xiàn)的圖表中坐標(biāo)系原點在左下角，所以在實現(xiàn)的時候要對y軸的實際坐標(biāo)進行處理。

createCoordinate() {      this.svg.createLine(        [          {            x1: "0",            y1: "0",            x2: "0",            // ui設(shè)計稿上y軸高度為205，由于頂部游標(biāo)的存在（游標(biāo)高度57，寬度122），所以y軸變?yōu)?05+57；            // 由于整個坐標(biāo)軸往下平移了57，所以最下面的坐標(biāo)會出現(xiàn)不顯示的情況，故再增加50的buffer            y2: `${this.$toRealPx(262 + 50)}px`,            stroke: "#F0F0F0",            "stroke-width": "1",          },          {            x1: "0",            y1: `${this.$toRealPx(262 + 50)}px`,            x2: `${this.$toRealPx(595)}px`,            y2: `${this.$toRealPx(262 + 50)}px`,            stroke: "#F0F0F0",            "stroke-width": "1",          },        ],        this.svgObj      )    }

在我們需要實現(xiàn)的兩個圖表中，圖表背景處均有網(wǎng)格，網(wǎng)格的實現(xiàn)原理也是使用line元素，只要標(biāo)記好起點以及終點，就可以完美繪制。此處不再展開。

數(shù)據(jù)點：即用來標(biāo)記當(dāng)前數(shù)據(jù)位置的小原點，數(shù)據(jù)點有兩種狀態(tài)，分別是未點擊態(tài)和點擊態(tài)，實現(xiàn)數(shù)據(jù)點我們使用svg中的circle元素即可。當(dāng)數(shù)據(jù)點被點擊時，我們只需要更改circle元素的填充屬性。

const circlePoints = this.graphAxisData.map((v, idx) => {        return {          cx: v.xAxis,          cy: v.yAxis || 0,          r: this.$toRealPx(5),          stroke: "#7792D8",          "stroke-width": this.$toRealPx(3),          fill: "white",          title: `class${idx + 1}`,          imageIndex: `imageClass${idx + 1}`,        }      })

數(shù)據(jù)游標(biāo)：數(shù)據(jù)游標(biāo)在我們的圖表里是一個不規(guī)則圖形，其有點類似于會話氣泡。我們要實現(xiàn)數(shù)據(jù)游標(biāo)有兩種方式，第一種方式是使用svg的path元素來繪制，那path元素的參數(shù)具體應(yīng)該怎么設(shè)置呢？其實可以跟設(shè)計師同學(xué)溝通，一般設(shè)計同學(xué)在用設(shè)計軟件導(dǎo)出的時候，設(shè)計軟件會攜帶path元素的具體參數(shù)，這是方案一；還有第二種比較簡單的方案是利用svg中的image元素，也就是將數(shù)據(jù)游標(biāo)當(dāng)作一個圖片繪制到圖表中，這種方案比較簡單省事，我采用的也是此方案。

const circleImage = this.graphAxisData.map((v, idx) => {        return {          x: (v.xAxis - this.$toRealPx(122) / 2),          y: (v.yAxis - this.$toRealPx(52) - this.$toRealPx(8)) || 0,          height: this.$toRealPx(52),          width: this.$toRealPx(122),          id: `imageClass${idx + 1}`,          href: "https://pic3.zhuanstatic.com/zhuanzh/b13744dd-c240-4961-8054-9f923586ea5a.png",        }      })      const circleText = this.graphAxisData.map((v, idx) => {        return {          x: v.xAxis,          y: (v.yAxis - this.$toRealPx(52 / 2)) || 0,          fill: "#111111",          "font-size": this.$toRealPx(24),          "text-anchor": "middle",          title: `￥${v.oriYAxis}`,          id: `class${idx + 1}`,        }      })

接下來就要繪制圖表中最重要的一個部分，也就是用真實數(shù)據(jù)渲染出來的一條曲線，繪制曲線我們依然是利用path元素繪制貝塞爾曲線，貝塞爾曲線只需要少量的點就可以繪制一條光滑曲線。在svg中，path元素用來繪制貝塞爾曲線的命令有兩組，第一組是C,S命令，用來繪制三次貝塞爾曲線；第二組是Q,T命令，用來繪制二次貝塞爾曲線。

我繪制圖表使用的是三次貝塞爾曲線，那首先了解一下三次貝塞爾曲線。

其中，t代表斜率，取值為0-1;p0代表起始點坐標(biāo)(x0,y0);p1代表第一個控制點坐標(biāo)(x1,y1);p2代表第二個控制點坐標(biāo)(x2,y2);p3代表終點坐標(biāo)(x3,y3);pt代表這條曲線上的任意一個點坐標(biāo)(xt,yt)。當(dāng)t由0-1逐漸變化的時候，可以得到一系列的(xt,yt),這一系列(xt,yt)就組成了一條三次貝塞爾曲線，這就是三次貝塞爾曲線的定義。

通過以上介紹可知，繪制三次貝塞爾曲線必須得知道起始點、兩個控制點以及終點。后端會返回給我們相應(yīng)的幾個數(shù)據(jù)點，也就是說這幾個數(shù)據(jù)點的坐標(biāo)是已知的，現(xiàn)在的問題就成了給定一組已知數(shù)據(jù)點，如何擬合成一條曲線？其實思路很簡單，假如說有已知的5個點，那么我們將第一個點作為起始點，第二個點作為終點，計算出他們之間的控制點，繪制一條曲線，同樣的，又以第二個點作為起點，第三個點作為終點，再重復(fù)以上過程，最終即繪制出一條橫穿五個點的平滑曲線。

此處附上算法源碼

createBezierLine() {      const polygonPath = this.getCubicBezierCurvePath(        this.graphAxisData.map((v) => {          return {            x: v.xAxis,            y: v.yAxis,          }        })      )      this.svg.createPath(        {          d: polygonPath,          fill: "none",          stroke: "#7792D8",          "stroke-width": 2        },        this.svgObject      )    }    getCubicBezierCurvePath(knots) {      const firstControlPoints = []      const secondControlPoints = []      const path = []      this.getCubicBezierCurvePoints(knots, firstControlPoints, secondControlPoints)      for (let i = 0, len = knots.length; i < len; i++) {        if (i === 0) {          path.push(["M", knots[i].x, knots[i].y].join(" "))        } else {          const firstControlPoint = firstControlPoints[i - 1]          const secondControlPoint = secondControlPoints[i - 1]          path.push(            [              "C",              firstControlPoint.x,              firstControlPoint.y, // 第一個控制點              secondControlPoint.x,              secondControlPoint.y, // 第二個控制點              knots[i].x,              knots[i].y, // 實點            ].join(" ")          )        }      }      return path.join(" ")    }    getCubicBezierCurvePoints(knots, firstControlPoints, secondControlPoints) {      const rhs = []      const n = knots.length - 1      let x = 0      let y = 0      let i = 0      if (n < 1) {        return      }      // Set right hand side X values0      for (i = 0; i < n - 1; ++i) {        rhs[i] = 4 * knots[i].x + 2 * knots[i + 1].x      }      rhs[0] = knots[0].x + 2 * knots[1].x      rhs[n - 1] = 3 * knots[n - 1].x      // Get first control points X-values      x = this.getFirstControlPoints(rhs)      // Set right hand side Y values      for (i = 1; i < n - 1; ++i) {        rhs[i] = 4 * knots[i].y + 2 * knots[i + 1].y      }      rhs[0] = knots[0].y + 2 * knots[1].y      rhs[n - 1] = 3 * knots[n - 1].y      // Get first control points Y-values      y = this.getFirstControlPoints(rhs)      for (i = 0; i < n; ++i) {        // First control point        firstControlPoints[i] = {          x: x[i],          y: y[i],        }        // Second control point        if (i < n - 1) {          secondControlPoints[i] = {            x: 2 * knots[i + 1].x - x[i + 1],            y: 2 * knots[i + 1].y - y[i + 1],          }        } else {          secondControlPoints[i] = {            x: (knots[n].x + x[n - 1]) / 2,            y: (knots[n].y + y[n - 1]) / 2,          }        }      }    }    getFirstControlPoints(rhs) {      const n = rhs.length      const x = [] // Solution vector.      const tmp = [] // Temp workspace.      let b = 2.0      let i = 0      x[0] = rhs[0] / b      for (i = 1; i < n; i++) {        // Decomposition and forward substitution.        tmp[i] = 1 / b        b = (i < n - 1 ? 4.0 : 2.0) - tmp[i]        x[i] = (rhs[i] - x[i - 1]) / b      }      for (i = 1; i < n; i++) {        x[n - i - 1] -= tmp[n - i] * x[n - i] // Backsubstitution.      }      return x    }

最后一步就是繪制曲線與X軸和Y軸相交而形成的面積部分。假如說這條曲線不是一條曲線而是一條折線的話，那么其實很容易就能實現(xiàn)。我們將這條折線與X軸和Y軸連接起來形成一個閉合圖形polygon，然后通過給polygon進行填充即可得到折線的面積圖。

我們利用這個思路，如果一條折線上的點足夠多的話，那么這條折線就會無限趨近于一條曲線。反之，一條曲線也可以看成是無限多的點構(gòu)成的折線，所以我們利用svg中的getTotalLength()和getPointAtLength()這兩個方法就可以將path轉(zhuǎn)換為多邊形，最后再填充多邊形即可得到最終的面積圖。

通過以上5個步驟，我們就能夠基于svg從頭開始實現(xiàn)一個簡單的曲線面積圖。svg的使用場景還是非常豐富的，并且兼容性一直都不錯，如果需要實現(xiàn)這種相對不那么復(fù)雜且交互少的圖形，svg還是一個不錯的方案。如果要實現(xiàn)復(fù)雜圖層、復(fù)雜動效以及復(fù)雜交互，canvas框架可能會是一個更好的選擇。

最后，開年第一篇，祝大家新年快樂，2023突（兔）飛猛進，大展鴻圖（兔），前途（兔）無量！

??https://www.infoq.cn/article/ogwddr4u8x0s*5aaytsh??? ??https://gist.github.com/mingzhi22/be3324ffd9765687ea2f??

關(guān)鍵詞： 事件系統(tǒng) 矢量圖形 當(dāng)前數(shù)據(jù) 從頭開始