前言

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

正文

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

2、這里通過加載準備好的模擬心率數(shù)據(jù)，然后結(jié)合使用定時器定時推送數(shù)據(jù)，來模擬后端給客戶端推送數(shù)據(jù)的場景。數(shù)據(jù)包里包含了三個心率數(shù)據(jù)，和一個時長的Index，一秒鐘推送4個數(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ù)據(jù)
    pushFhrDataTimer = new DispatcherTimer
    {
        Interval = TimeSpan.FromSeconds(1),
    };
    pushFhrDataTimer.Tick += PushFhrDataTimer_Tick;
    pushFhrDataTimer.Start();
}

private void PushFhrDataTimer_Tick(object sender, EventArgs e)
{
    //一秒鐘推送4個數(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、自定義的心率曲線控件，這里對實際項目中的進行了簡化，界面如下圖所示，這里的參考線通過網(wǎng)格的形式繪制，縱坐標也直接繪制在網(wǎng)格中，橫坐標是時間，繪制在底下，左上角也實時顯示當前最新心率值；

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

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

6、代碼地址：https://gitee.com/liulang_g/draw-curve-demo

到此這篇關(guān)于WPF實時繪制心率曲線的示例詳解的文章就介紹到這了,更多相關(guān)WPF繪制心率曲線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論