自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HarmonyOS - 基于ArkUI(ETS) 實(shí)現(xiàn)心電圖組件

作者：楊尚曉
系統(tǒng) OpenHarmony
繪制這個心電圖沒有用到重繪機(jī)制，動畫效果是每次繪制的時候覆蓋在原有的波形線上的，但是這樣會比重繪整個畫布性能更好一些。

??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

前言

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

效果圖

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實(shí)現(xiàn)心電圖組件-開源基礎(chǔ)軟件社區(qū)

組件API

ygEcg

屬性名

類型

默認(rèn)值

描述

ecgData

??EcgDataType??

-

配置心電圖的信息

接口 EcgDataType

參數(shù)名

參數(shù)類型

必填

默認(rèn)值

參數(shù)描述

data

Array<number>

是

-

心電數(shù)據(jù)源

timeStep

number

是

40

每一小格代表時間(毫秒)，x軸方向

mvStep

number

是

0.1

每小格表示電壓(毫伏/mv)，y軸方向

waveLineColor

string

是

-

波線顏色

gridColor

Array<string>

是

-

網(wǎng)格顏色，第一個為小網(wǎng)格，第二個為大網(wǎng)格

maxTime

number

是

-

圖標(biāo)顯示最大時間區(qū)域(毫秒)

width

number

是

-

畫布寬度

height

number

是

-

畫布高度

backgroundColor

string

是

-

畫布背景色

組件調(diào)用

// 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'], // 網(wǎng)格顏色，第一個為小網(wǎng)格，第二個為大網(wǎng)格
        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')
    }
}

實(shí)現(xiàn)前的準(zhǔn)備

在寫這個demo之前，以為心電圖應(yīng)該就是現(xiàn)在簡單的上下波動的折線圖。

實(shí)現(xiàn)原理

通過使用canvas組件，繪制一個類似醫(yī)學(xué)上的心電圖紙網(wǎng)格，然后通過心電源數(shù)據(jù)，繪制對應(yīng)的折線形成心電波形。

實(shí)現(xiàn)過程

1、創(chuàng)建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、繪制小網(wǎng)格

因?yàn)橥ㄉ厦娴男碾姴ㄐ螆D解得知，默認(rèn)一個小網(wǎng)格的走紙速度是0.04秒，也就是40毫秒，通過傳入的數(shù)據(jù)timeStep字段控制
那么要繪制多少個小格呢？通過畫布寬度，和maxTime字段（最大的顯示時間，上面代碼案例是6000毫秒）可以計(jì)算得知，將要繪制。
6000/40=150小格。

// 組件生命周期
  aboutToAppear() {
    // 計(jì)算每1小格需要繪制的寬度
    this.littleGridSize = Math.floor(this.ecgData.width / (this.ecgData.maxTime / this.ecgData.timeStep))
    // 計(jì)算每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、繪制大網(wǎng)格

每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();
  }

最后繪制的結(jié)果如圖：

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實(shí)現(xiàn)心電圖組件-開源基礎(chǔ)軟件社區(qū)

4、繪制心電波形

獲取畫布高度的一半位置，作為心電波形的基線，在基線的基礎(chǔ)上，通過心電數(shù)據(jù)源，將每個數(shù)據(jù)在基線上通過對數(shù)據(jù)的偏于來繪制點(diǎn)線，最后形成一個折線狀態(tài)的心電波形線。

// 數(shù)據(jù)視圖更新
  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;

    //開始遍歷輸出數(shù)據(jù)
    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();

  }

刷新預(yù)覽器看看效果：

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實(shí)現(xiàn)心電圖組件-開源基礎(chǔ)軟件社區(qū)

5、最后一步實(shí)現(xiàn)心跳的動畫效果

這里的動畫刷新時間是根據(jù)配置的心電圖步長來做定時器的時間，默認(rèn)是40毫秒，也就是每一小格走紙的時間。這樣就可以保持跟實(shí)際時間對應(yīng)，不會出現(xiàn)心跳快慢的問題。
當(dāng)然，這里還是有寫誤差的，因?yàn)榇a執(zhí)行的過程也是消耗時間的，會比實(shí)際時間多一丟丟。

//  獲取心律數(shù)據(jù)
  getEcgData = ():void => {
    let points = this.ecgData.data;
    //最后傳遞出去的數(shù)據(jù)
    let pointsLast = [];
    //當(dāng)前取到了第幾個數(shù)據(jù)了
    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)
  }

最后再來看一下心電圖的動畫效果：

#打卡不停更# HarmonyOS - 基于ArkUI(ETS) 實(shí)現(xiàn)心電圖組件-開源基礎(chǔ)軟件社區(qū)

代碼地址

??https://gitee.com/yango520/yg-ecg2??

總結(jié)

繪制這個心電圖沒有用到重繪機(jī)制，動畫效果是每次繪制的時候覆蓋在原有的波形線上的，但是這樣會比重繪整個畫布性能更好一些。
通過實(shí)現(xiàn)這個demo之后，對心電圖上的信息有了全新的了解，我覺得大家都可以去學(xué)會看心電圖來分析心臟狀況，自己理解了總比別人告知更有說服力。

避坑小技巧

  1. 當(dāng)代碼大變更的時候(一般復(fù)制出來單獨(dú)做一個文件的時候)，需要在build選項(xiàng)卡里清理項(xiàng)目，不然也不報錯，也不刷新，但是樣式就是錯亂。
  2. 預(yù)覽器開久了之后，當(dāng)一段時間不動了，再次刷新開啟都一直卡著開啟中進(jìn)不去，需要關(guān)閉IDE重新打開才可以用。

??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

責(zé)任編輯：jianghua 來源： 51CTO開源基礎(chǔ)軟件社區(qū)
ArkUI心電圖組件
相關(guān)推薦

2022-11-02 16:06:54

ArkUIETS

2022-07-04 16:34:46

流光按鈕Stack

2022-10-17 14:36:09

ArkUI虛擬搖桿組件

2022-09-16 15:34:32

CanvasArkUI

2022-09-05 15:22:27

ArkUIets

2022-07-26 14:40:42

ArkUIJS

2022-05-26 14:50:15

ArkUITS擴(kuò)展

2021-11-26 10:08:57

鴻蒙HarmonyOS應(yīng)用

2022-09-15 15:04:16

ArkUI鴻蒙

2022-09-14 15:17:26

ArkUI鴻蒙

2022-08-05 19:27:22

通用API鴻蒙

2022-01-25 17:05:44

ArkUI_eTS操作系統(tǒng)鴻蒙

2022-02-23 15:07:22

HarmonyOS常用控制ArkUI-eTS

2022-08-22 17:28:34

ArkUI鴻蒙

2022-07-05 16:13:37

ArkUI-eTS智能晾曬系統(tǒng)

2022-10-09 15:13:18

TextPickerArkUI eTS

2022-10-10 14:51:51

ArkUI eTSPieChart組件

2022-09-21 14:51:21

ArkUI信件彈出

2022-07-13 16:24:12

ArkUI(JS)打地鼠游戲

2022-04-13 11:24:18

ETS開發(fā)HarmonyOS鴻蒙
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號