# 開發(fā)者說 #

【開發(fā)者說】欄目是為HarmonyOS開發(fā)者提供的展示和分享平臺(tái)，在這里，大家可以發(fā)表自己的技術(shù)洞察和見解，也可以展示自己的開發(fā)心得和成果。

歡迎大家積極投稿，后臺(tái)回復(fù)【投稿】，即可獲得投稿渠道。期待你們的分享~

由于對(duì)HarmonyOS的興趣與開發(fā)需求，我已經(jīng)打卡學(xué)習(xí)ArkTS語言28天了。在模擬開發(fā)歷史項(xiàng)目的時(shí)候，會(huì)經(jīng)常需要使用到圖表這類樣式展示，我決定結(jié)合之前學(xué)習(xí)的canvas繪畫知識(shí)，自己寫一個(gè)折線圖組件，希望對(duì)各位開發(fā)者有所幫助。

一

功能結(jié)構(gòu)

實(shí)現(xiàn)一個(gè)公共組件的時(shí)候，首先分析一下大概的實(shí)現(xiàn)結(jié)構(gòu)以及開發(fā)思路，方便我們少走彎路，也可以使組件更加容易拓展，維護(hù)性更強(qiáng)。然后我會(huì)把功能逐個(gè)拆開來講，這樣大家才能學(xué)習(xí)到更詳細(xì)的內(nèi)容。下面簡單闡述下折線圖組件的功能結(jié)構(gòu)：

以上是基礎(chǔ)的功能結(jié)構(gòu)框架，包含一些比較簡單的基礎(chǔ)功能，后續(xù)還有點(diǎn)擊觸發(fā)、動(dòng)畫等功能也會(huì)規(guī)劃進(jìn)去。這一期我們先實(shí)現(xiàn)上面這些基礎(chǔ)的功能，后續(xù)再慢慢拓展。

二

公共屬性

一個(gè)組件肯定會(huì)有一些公共的屬性作為動(dòng)態(tài)參數(shù)，便于組件之間的信息傳遞，我們分別講解一下五個(gè)公共屬性的作用：

1. 畫布的寬度（cWidth）和高度（cHeight），這個(gè)是最基本的。但是我這里控制是非必傳，默認(rèn)值都是100%就可以了。

2. 畫布的內(nèi)部留白間距（cSpace）。主要是用來控制內(nèi)容區(qū)與畫布外框的距離，避免繪畫的內(nèi)容被截掉。

3. 字體大?。╢ontSize）。主要是來控制整個(gè)繪畫內(nèi)容的字體大小，全局性，避免每個(gè)小功能都需要傳字體大小。

4. 字體顏色（color）。與字體大小的功能一致。

5. 圖表數(shù)據(jù)（data）。用來存儲(chǔ)圖表內(nèi)容的數(shù)組，其中name與value是必傳的。

以下是具體的代碼：

 // 圖表數(shù)據(jù)的特征接口
interface interface_data {
  name: string | number;
  value: string | number;
  [key: string]: any;
}


// 圖表的特征接口
interface interface_option {
  cWidth?: string | number,
  cHeight?: string | number,
  fontSize?: string | number,
  color?: string,
  cSpace?: number,
  data?: interface_data[]
}


// option 默認(rèn)值
const def_option: interface_option = {
  cWidth: '100%',
  cHeight: '100%',
  fontSize: 10,
  color: '#333',
  cSpace: 20,
  data: []
}


@Component
export struct McLineChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State options: interface_option = {}
  aboutToAppear() {
    this.options = Object.assign({}, def_option, this.options)
  }
  build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .onReady(() => {
        
      })
  }
}

（左右滑動(dòng)查看更多）

三

繪畫坐標(biāo)軸

繪畫圖表內(nèi)容區(qū)部分，首先是繪畫坐標(biāo)軸，坐標(biāo)軸分為X軸跟Y軸，我們要先開始畫Y軸，原因是：y軸上要顯示文本標(biāo)簽，如果一開始沒有得到文本標(biāo)簽對(duì)應(yīng)的寬度最大值，那么Y軸跟X軸的起點(diǎn)坐標(biāo)就會(huì)有偏差，會(huì)導(dǎo)致繪畫全部錯(cuò)位，下圖是完整的坐標(biāo)軸的效果。

1.繪畫Y軸

Y軸整體是由軸線、分割線、刻度線、文本標(biāo)簽四個(gè)部分組成的，四個(gè)部分都有先后關(guān)系，而且包含一定的算法邏輯，下面簡單用一個(gè)概念圖進(jìn)行講解。

首先用500*500的矩形作為我們這次的畫布，我們可以在圖上看到Y(jié)軸整體包含了文本標(biāo)簽、Y軸線、分割線、刻度線四個(gè)部分。而canvas繪畫基本都是通過坐標(biāo)來定位的，Y軸整體的四個(gè)部分的起點(diǎn)與結(jié)束坐標(biāo)都互相有關(guān)系，甚至需要把內(nèi)部間距、分割間距、y軸線高度、文本最大的寬度四個(gè)屬性計(jì)算在內(nèi)。以上是概念與思路，接下來我們逐一講解代碼：

1、計(jì)算得到文本最長寬度（maxNameW），我們可以從圖中看到，不論是y軸線、刻度線還是分割線的起點(diǎn)坐標(biāo)都是需要內(nèi)容間距、文本標(biāo)簽、文本標(biāo)簽與分割線間隔相加計(jì)算得到，而為了保持對(duì)齊，所以我們需要計(jì)算出文本最長寬度。而y軸的文本一般都是數(shù)據(jù)（data）對(duì)應(yīng)的數(shù)值，所以我們需要得到傳入數(shù)據(jù)（data）中的最大值。然后講最大值分割成五等分。以下就是計(jì)算獲取最大文本寬度的代碼，部分邏輯我也會(huì)寫在代碼上：

build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .backgroundColor(this.options.backgroundColor)
      .onReady(() => {
        const values: number[] = this.options.data.map((item) => Number(item.value || 0))
        const maxValue = Math.max(...values)
        let maxNameW = 0
        let cSpiltNum = 5 // 分割等分
        let cSpiltVal = maxValue / cSpiltNum // 計(jì)算分割間距
        for(var i = 0; i <= this.options.data.length; i++){
          // 用最大值除于分割等分得到每一個(gè)文本的間隔值，而每一次遍歷用間隔值乘于i就能得到每個(gè)刻度對(duì)應(yīng)的數(shù)值了，計(jì)算得到得知需要保留整數(shù)且轉(zhuǎn)成字符串
          const text = (cSpiltVal * i).toFixed(0)
          const textWidth = this.context.measureText(text).width; // 獲取文字的長度
          maxNameW = textWidth > maxNameW ? textWidth : maxNameW // 每次進(jìn)行最大值的匹配
        }
      })
}

（左右滑動(dòng)查看更多）

2、繪畫文本標(biāo)簽，我們可以從圖中看到文本標(biāo)簽的x坐標(biāo)只跟內(nèi)部間距有關(guān)，而且我們從上面代碼就已經(jīng)得到每個(gè)刻度的分割間距了，從而可以得到每個(gè)文本的y軸。

.onReady(() => {
   ....
   for(var i = 0; i <= this.options.data.length; i++){
     ...
     // 繪畫文本標(biāo)簽
     this.context.fillText(text, this.options.cSpace, cSpiltVal * (this.options.data.length - i) + this.options.cSpace , 0);
   }
})

（左右滑動(dòng)查看更多）

3、繪畫刻度線。我們可以從概念圖得到，刻度線的起點(diǎn)x坐標(biāo)算法是：內(nèi)部間距（cSpace）加最長文本寬度（maxNameW）加上文本與刻度線的間距，起點(diǎn)y坐標(biāo)則跟文本一樣，通過分割間距與下角標(biāo)的關(guān)系得到每個(gè)刻度的y坐標(biāo)；而終點(diǎn)x坐標(biāo)則是刻度線的長度，終點(diǎn)y坐標(biāo)則跟起點(diǎn)的y坐標(biāo)一樣，我設(shè)置默認(rèn)長度是5，這樣就能得到我們的刻度線了。代碼如下：

.onReady(() => {
  ....
  const length = this.options.data.length
  for(var i = 0; i <= length; i++){
    ...
  }
  // 上面是獲取最長文本寬度的代碼
  // 畫線的方法
  function drawLine(x, y, X, Y){
    this.context.beginPath();
    this.context.moveTo(x, y);
    this.context.lineTo(X, Y);
    this.context.stroke();
    this.context.closePath();
  }
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 繪畫文本標(biāo)簽
    ctx.fillText(text, this.options.cSpace,  cSpiltVal * (this.data.length - i) + this.options.cSpace, 0);
    // 內(nèi)部間距+文本長度
    const scaleX = this.options.cSpace + maxNameW
    // 通過數(shù)據(jù)最大值算出等分間隔，從而計(jì)算出每一個(gè)的終點(diǎn)坐標(biāo)
    const scaleY = cSpiltVal * (length - i) + this.options.cSpace
    // 這里的5就是我設(shè)置文本跟刻度線的間隔與刻度線的長度
    drawLine(scaleX, scaleY, scaleX + 5 + 5, scaleY);
  }
})

（左右滑動(dòng)查看更多）

4、繪畫y軸線。繼續(xù)分析概覽圖，從圖中我們可以得到：y軸線的起點(diǎn)x坐標(biāo)的算法是：內(nèi)部間距（cSpace）加最長文本寬度（maxNameW）加上文本與刻度線的間距以及刻度線長度，起點(diǎn)y坐標(biāo)則是內(nèi)部上間距；而終點(diǎn)x坐標(biāo)與起點(diǎn)x坐標(biāo)相同，終點(diǎn)y坐標(biāo)算法是：畫布高度減去上下兩邊的內(nèi)部間距。通過以上計(jì)算關(guān)系就能繪畫出y軸線了。代碼如下：

.onReady(() => {
  ...
  // 上面是繪畫其他組成部分代碼
   const startX = this.options.cSpace + maxNameW + 5 + 5
   const startY = this.options.cSpace
   const endX = startX
   const endY = this.context.height - (this.options.cSpace * 2)
   drawLine(startX, startY, endX, endY); // 繪畫y軸
})

（左右滑動(dòng)查看更多）

5、繪畫分割線。其實(shí)從圖中可以看出分割線與刻度線差不多，起點(diǎn)x坐標(biāo)算法是：在刻度線起點(diǎn)x坐標(biāo)基礎(chǔ)上加刻度線長度；起點(diǎn)y軸與刻度線相同。而終點(diǎn)的x坐標(biāo)算法：畫布寬度減去起點(diǎn)x坐標(biāo)；終點(diǎn)的y坐標(biāo)與起點(diǎn)的y坐標(biāo)相同。具體代碼如下：

.onReady(() => {
  ....
  // 上面是獲取最長文本寬度的代碼
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 繪畫文本標(biāo)簽跟刻度
    ...
    // 繪畫分割線
    const splitX = scaleX + 5 + 5
    const splitY = scaleY
    drawLine(splitX, splitY, this.context.width - splitX - this.options.cSpace, splitY);
  }
})

（左右滑動(dòng)查看更多）

2.繪畫X軸

繪畫完Y軸之后，我們接著繪畫X軸， X軸與Y軸繪畫邏輯一致，只是方向不同而已。具體的算法就不一一詳解，可以參考一下概念圖。

而與繪畫Y軸不一致的在于：

1. 最長對(duì)象不一樣。Y軸最長是文本寬度；而X軸需要獲取的最長是文本高度。

2. 間隔分割數(shù)不一樣。Y軸是自定義的分割數(shù)；而X軸分割線是實(shí)際數(shù)據(jù)的長度。

3. 分割間距長度算法不一樣。Y軸算法是用數(shù)據(jù)最大值處于自定義的分割數(shù)；而X軸算法是用畫布寬度減去（左右兩邊的內(nèi)部間隙以及Y軸寬度（文本最長寬度加上刻度線寬度）），再除去數(shù)據(jù)的長度，得到每個(gè)間隔的長度。

除了上面三點(diǎn)需要注意的，其他的就是調(diào)換一下計(jì)算的位置。X軸整體的代碼如下：

.onReady(() => {
  const cSpace = this.options.cSpace
  // 上面是繪制y軸的代碼
  ....
  // 繪制x軸
  // 獲取每個(gè)分割線的間距:this.context.width - 20為x軸的長度
  let xSplitSpacing = parseInt(String((this.context.width - cSpace * 2 - maxNameW) / this.options.data.length))
  let x = 0;
  for(var i = 0; i <= this.options.data.length; i++){
    // 繪畫分割線
    x = xSplitSpacing * (i + 1) // 計(jì)算每個(gè)數(shù)值的x坐標(biāo)值
    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, cSpace);
    // 繪制刻度
    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, this.context.height - cSpace);
    // 繪制文字刻度標(biāo)簽
    const text = this.options.data[i].name
    const textWidth = this.context.measureText(text).width; // 獲取文字的長度
    // 這里文本的x坐標(biāo)需要減去本身文本寬度的一半，這樣才能居中顯示， y坐標(biāo)這是畫布高度減去內(nèi)部間距即可
    this.context.fillText(text, x + cSpace + maxNameW - textWidth / 2, this.context.height - cSpace, 0);
  }
this.context.save();
  this.context.rotate(-Math.PI/2);
  this.context.restore();
})

（左右滑動(dòng)查看更多）

四

繪畫折線區(qū)

繪畫完坐標(biāo)軸之后，就可以來繪畫折線區(qū)的內(nèi)容了。也是整個(gè)畫布重點(diǎn)的部分。折線區(qū)分為三個(gè)部分：繪畫折線、繪畫標(biāo)點(diǎn)、繪畫文本。

1.繪畫折線

從上面的圖可以看出折線直接就是把實(shí)際數(shù)據(jù)的數(shù)值轉(zhuǎn)成x跟y坐標(biāo)，再通過連線連接起來。而每一個(gè)轉(zhuǎn)折點(diǎn)的x坐標(biāo)算法跟x軸的刻度或者文本是一樣的，而y坐標(biāo)是實(shí)際數(shù)值通過一定算法轉(zhuǎn)成我們需要的高度。x坐標(biāo)我們已經(jīng)獲取了，只要是攻克我們的y坐標(biāo)即可。可以通過圖來觀察一下在畫布中與實(shí)際數(shù)據(jù)的關(guān)系：

首先Y軸的高度代表的是實(shí)際數(shù)據(jù)的最大值，這個(gè)我們繪畫Y軸的時(shí)候就得到的結(jié)果，那我們則可以算出Y軸高度與實(shí)際數(shù)據(jù)的縮放倍數(shù)（scale），而折線的的每個(gè)y坐標(biāo)對(duì)應(yīng)的也是實(shí)際數(shù)值，需要把實(shí)際數(shù)值轉(zhuǎn)換成畫布中高度，那么就用實(shí)際數(shù)值乘與剛剛得到的縮放倍數(shù)（scale）就能得到轉(zhuǎn)化后的高度了。

雖然我們已經(jīng)得到每個(gè)轉(zhuǎn)折點(diǎn)縮放后的高度，但是如果要跟Y軸坐標(biāo)一一對(duì)應(yīng)的y坐標(biāo)的畫，還需要用畫布的高度減去下邊內(nèi)部高度加x軸高度，再減去縮放后的實(shí)際高度。這樣算出來的才是我們想要的y坐標(biāo)值，大概算法關(guān)系已經(jīng)知道了，以下是最終代碼：

.onReady(() => {
  ...
  // 上面是繪制x軸跟y軸的代碼
  // 繪畫折線
  const ySacle = (this.context.height - cSpace *2) / maxValue // 計(jì)算出y軸與實(shí)際最大值的縮放倍數(shù)
  //連線
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    const dotVal = String(this.options.data[i].value);
    const x = xSplitSpacing * (i + 1) + cSpace + maxNameW // 計(jì)算每個(gè)數(shù)值的x坐標(biāo)值
    const y = this.context.height - cSpace - parseInt(dotVal * ySacle); // 畫布的高度減去下邊內(nèi)部高度加x軸高度，再減去縮放后的實(shí)際高度
    if(i==0){
      // 第一個(gè)作為起點(diǎn)
      this.context.moveTo( x, y );
    }else{
      this.context.lineTo( x, y );
    }
  }
  ctx.stroke();
})

（左右滑動(dòng)查看更多）

2.繪畫標(biāo)點(diǎn)、文本標(biāo)簽

畫完折線我們基本能得到很多東西，比如折線上每個(gè)轉(zhuǎn)折點(diǎn)的x跟y坐標(biāo)值。這樣對(duì)我們繪畫標(biāo)點(diǎn)與文本標(biāo)簽就很方便了：

.onReady(() => {
  ...
  // 上面是繪制x軸跟y軸的代碼
  // 繪畫折線
  const ySacle = (this.context.height - cSpace *2) / maxValue // 計(jì)算出y軸與實(shí)際最大值的縮放倍數(shù)
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    // 繪畫折線代碼
    ...
    // 繪制標(biāo)點(diǎn)
    drawArc(x, y);
    // 繪制文本標(biāo)簽
    const textWidth = this.context.measureText(dotVal).width; // 獲取文字的長度
    const textHeight = this.context.measureText(dotVal).height; // 獲取文字的長度
    this.context.fillText(dotVal, x - textWidth / 2, y - textHeight / 2); // 文字
  }


  function drawArc( x, y ){
    this.context.beginPath();
    this.context.arc( x, y, 3, 0, Math.PI*2 );
    this.context.fill();
    this.context.closePath();
  }
  this.context.stroke();
})

（左右滑動(dòng)查看更多）

最終效果如下：

五

總結(jié)

以上是本次技術(shù)分析，希望能對(duì)大家有所啟發(fā)，也祝愿各位開發(fā)者能開發(fā)出理想的效果，后續(xù)我們會(huì)把chart相關(guān)系列的組件封裝到組件庫發(fā)布到市場(chǎng)上，這樣可以直接開箱即用了。敬請(qǐng)期待吧，后續(xù)還有很多技術(shù)的分享，不要錯(cuò)過！