偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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

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

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

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

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

前言

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

效果圖

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

組件API

ygEcg

屬性名

類型

默認(rèn)值

描述

ecgData

??EcgDataType??

-

配置心電圖的信息

接口 EcgDataType

參數(shù)名

參數(shù)類型

必填

默認(rèn)值

參數(shù)描述

data

Array<number>

是

-

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

timeStep

number

是

40

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

mvStep

number

是

0.1

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

waveLineColor

string

是

-

波線顏色

gridColor

Array<string>

是

-

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

maxTime

number

是

-

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

width

number

是

-

畫(huà)布寬度

height

number

是

-

畫(huà)布高度

backgroundColor

string

是

-

畫(huà)布背景色

組件調(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)格顏色，第一個(gè)為小網(wǎng)格，第二個(gè)為大網(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)備

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

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

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

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

1、創(chuàng)建canvas畫(huà)布

@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)一個(gè)小網(wǎng)格的走紙速度是0.04秒，也就是40毫秒，通過(guò)傳入的數(shù)據(jù)timeStep字段控制
那么要繪制多少個(gè)小格呢？通過(guò)畫(huà)布寬度，和maxTime字段（最大的顯示時(shí)間，上面代碼案例是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)心電圖組件-開(kāi)源基礎(chǔ)軟件社區(qū)

4、繪制心電波形

獲取畫(huà)布高度的一半位置，作為心電波形的基線，在基線的基礎(chǔ)上，通過(guò)心電數(shù)據(jù)源，將每個(gè)數(shù)據(jù)在基線上通過(guò)對(duì)數(shù)據(jù)的偏于來(lái)繪制點(diǎn)線，最后形成一個(gè)折線狀態(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;

    //開(kāi)始遍歷輸出數(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)心電圖組件-開(kāi)源基礎(chǔ)軟件社區(qū)

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

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

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

最后再來(lái)看一下心電圖的動(dòng)畫(huà)效果：

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

代碼地址

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

總結(jié)

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

避坑小技巧

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

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

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

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

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

2022-11-02 16:06:54

ArkUIETS

2022-07-04 16:34:46

流光按鈕Stack

2022-09-05 15:22:27

ArkUIets

2022-10-17 14:36:09

ArkUI虛擬搖桿組件

2022-09-16 15:34:32

CanvasArkUI

2022-07-26 14:40:42

ArkUIJS

2022-09-15 15:04:16

ArkUI鴻蒙

2022-05-26 14:50:15

ArkUITS擴(kuò)展

2022-01-25 17:05:44

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

2022-02-23 15:07:22

HarmonyOS常用控制ArkUI-eTS

2021-11-26 10:08:57

鴻蒙HarmonyOS應(yīng)用

2022-10-09 15:13:18

TextPickerArkUI eTS

2022-10-10 14:51:51

ArkUI eTSPieChart組件

2022-09-14 15:17:26

ArkUI鴻蒙

2022-08-05 19:27:22

通用API鴻蒙

2022-07-13 16:24:12

ArkUI(JS)打地鼠游戲

2022-09-21 14:51:21

ArkUI信件彈出

2022-02-23 15:36:46

ArkUI-eTS事件監(jiān)聽(tīng)鴻蒙

2024-01-11 15:54:55

eTS語(yǔ)言TypeScript應(yīng)用開(kāi)發(fā)

2022-08-22 17:28:34

ArkUI鴻蒙
點(diǎn)贊
收藏

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