快捷導(dǎo)航

WPF實(shí)時(shí)繪制心率曲線的示例詳解

更新時(shí)間：2024年04月17日 11:10:04 作者：流浪g

這篇文章主要為大家詳細(xì)介紹了WPF實(shí)時(shí)繪制心率曲線的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

在自己的項(xiàng)目中，涉及到實(shí)時(shí)心率曲線的繪制，項(xiàng)目上的曲線繪制，一般很難找到能直接用的第三方庫，而且有些還是定制化的功能，所以還是自己繪制比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個(gè)完整的實(shí)時(shí)心率數(shù)據(jù)繪制心率曲線圖的例子；之前的博客也分享給DrawingVisual繪制曲線的方法，這個(gè)例子也是通過同樣的方式；

正文

1、實(shí)時(shí)心率監(jiān)護(hù)這種項(xiàng)目，場(chǎng)景一般是硬件設(shè)備采集到心率數(shù)據(jù)，然后推送給后臺(tái)匯總，然后后臺(tái)通過網(wǎng)絡(luò)再推送給客戶端，客戶端再進(jìn)行展示。

2、這里通過加載準(zhǔn)備好的模擬心率數(shù)據(jù)，然后結(jié)合使用定時(shí)器定時(shí)推送數(shù)據(jù)，來模擬后端給客戶端推送數(shù)據(jù)的場(chǎng)景。數(shù)據(jù)包里包含了三個(gè)心率數(shù)據(jù)，和一個(gè)時(shí)長的Index，一秒鐘推送4個(gè)數(shù)據(jù)。

private void Init()
{
    //加載心率模擬數(shù)據(jù)
    using StreamReader reader = new("fhrdata.txt");
    string line;
    while ((line = reader.ReadLine()) != null)
    {
        fhrDatas.Add(int.Parse(line));
    }

    //定時(shí)器模擬后臺(tái)定時(shí)推送心率數(shù)據(jù)
    pushFhrDataTimer = new DispatcherTimer
    {
        Interval = TimeSpan.FromSeconds(1),
    };
    pushFhrDataTimer.Tick += PushFhrDataTimer_Tick;
    pushFhrDataTimer.Start();
}

private void PushFhrDataTimer_Tick(object sender, EventArgs e)
{
    //一秒鐘推送4個(gè)數(shù)據(jù)
    var fhrs = new FhrModel[4];

    for (int i = 0; i < fhrs.Length; i++)
    {
        fhrs[i] = new FhrModel
        {
            Index = timeIndex,
            Fhr1 = fhrDatas[dataIndex],
            Fhr2 = fhrDatas[dataIndex],
            Fhr3 = fhrDatas[dataIndex],
        };

        timeIndex++;
        dataIndex++;
        if (dataIndex >= fhrDatas.Count) dataIndex = 0;
    }

    //推送數(shù)據(jù)到心率曲線控件
    chart.AddFhrData(fhrs);
}

3、自定義的心率曲線控件，這里對(duì)實(shí)際項(xiàng)目中的進(jìn)行了簡化，界面如下圖所示，這里的參考線通過網(wǎng)格的形式繪制，縱坐標(biāo)也直接繪制在網(wǎng)格中，橫坐標(biāo)是時(shí)間，繪制在底下，左上角也實(shí)時(shí)顯示當(dāng)前最新心率值；

4、實(shí)時(shí)心率繪制，就會(huì)涉及到曲線的一直更新繪制和移動(dòng)，這里是通過每次收到一次后端推送的數(shù)據(jù)，就重新觸發(fā)滑動(dòng)條滾動(dòng)到最新位置的事件，然后通過滑動(dòng)條的滑動(dòng)變化事件里面觸發(fā)曲線的重新繪制。這里的繪制還分為從左邊開始和右邊開始，稱之為走紙方向，如下圖。

5、曲線繪制的具體細(xì)節(jié)還有自定義曲線控件里涉及到的邏輯這里就不具體描述，后面會(huì)分享出代碼的地址，并且盡量附上一些注釋，最終實(shí)現(xiàn)的效果如下，曲線圖會(huì)自動(dòng)走紙繪制，支持拖動(dòng)，支持拖動(dòng)結(jié)束后，一段時(shí)間后自動(dòng)恢復(fù)走紙。百萬級(jí)別數(shù)據(jù)也不會(huì)卡，因?yàn)槔L制的部分始終只有可見區(qū)域；