HarmonyOS - 基于ArkUI(ETS) 實現心電圖組件

作者：楊尚曉 2022-10-24 14:49:54

繪制這個心電圖沒有用到重繪機制，動畫效果是每次繪制的時候覆蓋在原有的波形線上的，但是這樣會比重繪整個畫布性能更好一些。

??https://ost.51cto.com??

前言

隨著大家生活水平的提升，越來越多的人注重自身身心健康，養生成了目前比較熱門的活動。心電圖是檢測心臟活動狀態的直觀表現，可以通過心電圖來觀察人提的健康狀況。
響應鴻蒙萬物互聯的口號，肯定少不了智能設備和心電檢測設備的互聯。所以本文實現了簡單的心電圖功能UI展示。

效果圖

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實現心電圖組件-開源基礎軟件社區

組件API

ygEcg

屬性名	類型	默認值	描述
ecgData	??EcgDataType??	-	配置心電圖的信息

接口 EcgDataType

參數名	參數類型	必填	默認值	參數描述
data	Array<number>	是	-	心電數據源
timeStep	number	是	40	每一小格代表時間(毫秒)，x軸方向
mvStep	number	是	0.1	每小格表示電壓(毫伏/mv)，y軸方向
waveLineColor	string	是	-	波線顏色
gridColor	Array<string>	是	-	網格顏色，第一個為小網格，第二個為大網格
maxTime	number	是	-	圖標顯示最大時間區域(毫秒)
width	number	是	-	畫布寬度
height	number	是	-	畫布高度
backgroundColor	string	是	-	畫布背景色

組件調用

// import 引入接口和組件
import ygEcg,{EcgDataType} from './../common/compontents/ygEcg'
@Entry
@Component
struct Index {
    @State ecgData:EcgDataType = {
        data: [
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.5, -0.4, 0, 0, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0.1, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 2.0, -0.3, 0, 0, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0, -0.1, 0.1, 0.2, 0.4, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0, 0, 0.1, 0.2, 0.2, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0.1, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        0, 0, 0, 0.1, 0, 0, 0, -0.2, 1.0, -0.4, 0, 0, 0, 0.1, 0.2, 0.1, 0, 0, 0,
        ],
        timeStep: 40, // 每一小格表示40毫秒，x軸方向
        mvStep: 0.1, // 每小格表示0.1mv，y軸方向
        waveLineColor: '#181818', // 波線顏色
        gridColor: ['#ffa5a5','#dd0000'], // 網格顏色，第一個為小網格，第二個為大網格
        maxTime: 6000,
        width: 700,
        height: 300,
        backgroundColor: '#fff'
    }
    build() {
        Row(){
          ygEcg({ecgData: $ecgData})
        }
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
        .width('100%')
        .height('100%')
        //    .backgroundColor('#151515')
    }
}

實現前的準備

在寫這個demo之前，以為心電圖應該就是現在簡單的上下波動的折線圖。

實現原理

通過使用canvas組件，繪制一個類似醫學上的心電圖紙網格，然后通過心電源數據，繪制對應的折線形成心電波形。

實現過程

1、創建canvas畫布

@Component
struct ygEcg {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @Link ecgData: EcgDataType;
  build() {
    Canvas(this.ctx)
      .onReady(()=>{
      })
      .width(this.ecgData.width)
      .height(this.ecgData.height)
      .backgroundColor(this.ecgData.backgroundColor)
  }
}

2、繪制小網格

因為通上面的心電波形圖解得知，默認一個小網格的走紙速度是0.04秒，也就是40毫秒，通過傳入的數據timeStep字段控制
那么要繪制多少個小格呢？通過畫布寬度，和maxTime字段（最大的顯示時間，上面代碼案例是6000毫秒）可以計算得知，將要繪制。
6000/40=150小格。

// 組件生命周期
  aboutToAppear() {
    // 計算每1小格需要繪制的寬度
    this.littleGridSize = Math.floor(this.ecgData.width / (this.ecgData.maxTime / this.ecgData.timeStep))
    // 計算每1大格需要繪制的寬度（每5小格是1大格）
    this.LargeGridSize = this.littleGridSize * 5
  }
//   繪制小格
  drawLittleGrid = ():void => {
    let c = this.ctx;
    let {width:w, height: h} = this.ecgData;
    c.strokeStyle = this.ecgData.gridColor[0];
    c.lineWidth = 0.5;
    c.beginPath();
    for(let x = 0; x <= w; x += this.littleGridSize){
      c.moveTo(x, 0)
      c.lineTo(x, h)
      c.stroke()
    }
    for(let y = 0; y <= h; y += this.littleGridSize){
      c.moveTo(0, y)
      c.lineTo(w, y)
      c.stroke()
    }
    c.closePath();
  }

3、繪制大網格

每1大格等于5小格。

//  繪制大格
  drawLargeGrid = ():void => {
    let c = this.ctx;
    let {width:w, height: h} = this.ecgData;
    let lg = this.LargeGridSize;
    c.strokeStyle = this.ecgData.gridColor[1];
    c.lineWidth = 0.5;
    c.beginPath();
    for(let x = 0; x <= w; x += lg){
      c.moveTo(x, 0);
      c.lineTo(x, h);
      c.stroke();
    }
    for(let y = 0; y <= h; y += lg){
      c.moveTo(0, y);
      c.lineTo(w, y);
      c.stroke();
    }
    c.closePath();
  }

最后繪制的結果如圖：

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實現心電圖組件-開源基礎軟件社區

4、繪制心電波形

獲取畫布高度的一半位置，作為心電波形的基線，在基線的基礎上，通過心電數據源，將每個數據在基線上通過對數據的偏于來繪制點線，最后形成一個折線狀態的心電波形線。

// 數據視圖更新
  update = (data?: Array<number>):void => {
    let c = this.ctx;
//    c.clearRect(0, 0, this.ecgData.width, this.ecgData.height)
    c.beginPath();
    c.strokeStyle = this.ecgData.waveLineColor;
    c.lineWidth = 1.2;
    c.lineJoin = 'round'
    c.lineCap = 'round'
    let point = data || this.ecgData.data;
    if(point.length === 0) return;

    //開始遍歷輸出數據
    c.moveTo(0, Math.floor(this.ecgData.height / 2))
    for (let i = 0; i < point.length; i++) {
      let x = i * this.littleGridSize;
      let y = Math.floor(this.ecgData.height / 2) + point[i] * this.LargeGridSize * -1
      c.lineTo(x, y);
      c.stroke();
    }
    c.closePath();

  }

刷新預覽器看看效果：

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實現心電圖組件-開源基礎軟件社區

5、最后一步實現心跳的動畫效果

這里的動畫刷新時間是根據配置的心電圖步長來做定時器的時間，默認是40毫秒，也就是每一小格走紙的時間。這樣就可以保持跟實際時間對應，不會出現心跳快慢的問題。
當然，這里還是有寫誤差的，因為代碼執行的過程也是消耗時間的，會比實際時間多一丟丟。

//  獲取心律數據
  getEcgData = ():void => {
    let points = this.ecgData.data;
    //最后傳遞出去的數據
    let pointsLast = [];
    //當前取到了第幾個數據了
    let currInedx = 0;
    let timer = null;
    clearInterval(timer)
    timer = setInterval( ()=> {
      if(currInedx < points.length){
        currInedx ++;
        pointsLast = points.slice(0,currInedx)
        this.update(pointsLast)
      } else {
        clearInterval(timer)
      }
    },this.ecgData.timeStep)
  }