WPF隨筆收錄-實時繪製心率曲線

流浪g發表於2024-04-17

一、前言

　　在自己的專案中，涉及到實時心率曲線的繪製，專案上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率資料繪製心率曲線圖的例子；之前的部落格也分享給DrawingVisual繪製曲線的方法，這個例子也是透過同樣的方式；

二、正文

1、實時心率監護這種專案，場景一般是硬體裝置採集到心率資料，然後推送給後臺彙總，然後後臺透過網路再推送給客戶端，客戶端再進行展示。

2、這裡透過載入準備好的模擬心率資料，然後結合使用定時器定時推送資料，來模擬後端給客戶端推送資料的場景。資料包裡包含了三個心率資料，和一個時長的Index，一秒鐘推送4個資料。

private void Init()
{
    //載入心率模擬資料
    using StreamReader reader = new("fhrdata.txt");
    string line;
    while ((line = reader.ReadLine()) != null)
    {
        fhrDatas.Add(int.Parse(line));
    }

    //定時器模擬後臺定時推送心率資料
    pushFhrDataTimer = new DispatcherTimer
    {
        Interval = TimeSpan.FromSeconds(1),
    };
    pushFhrDataTimer.Tick += PushFhrDataTimer_Tick;
    pushFhrDataTimer.Start();
}

private void PushFhrDataTimer_Tick(object sender, EventArgs e)
{
    //一秒鐘推送4個資料
    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;
    }

    //推送資料到心率曲線控制元件
    chart.AddFhrData(fhrs);
}

3、自定義的心率曲線控制元件，這裡對實際專案中的進行了簡化，介面如下圖所示，這裡的參考線透過網格的形式繪製，縱座標也直接繪製在網格中，橫座標是時間，繪製在底下，左上角也實時顯示當前最新心率值；

4、實時心率繪製，就會涉及到曲線的一直更新繪製和移動，這裡是透過每次收到一次後端推送的資料，就重新觸發滑動條滾動到最新位置的事件，然後透過滑動條的滑動變化事件裡面觸發曲線的重新繪製。這裡的繪製還分為從左邊開始和右邊開始，稱之為走紙方向，如下圖。

5、曲線繪製的具體細節還有自定義曲線控制元件裡涉及到的邏輯這裡就不具體描述，後面會分享出程式碼的地址，並且儘量附上一些註釋，最終實現的效果如下，曲線圖會自動走紙繪製，支援拖動，支援拖動結束後，一段時間後自動恢復走紙。百萬級別資料也不會卡，因為繪製的部分始終只有可見區域；

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

相關文章