Qt編寫視覺化大屏電子看板系統22-平滑曲線圖

語言: CN / TW / HK

時間 2021-09-02 08:01:17 飛揚青雲

一、前言

平滑曲線是所有涉及到曲線圖的專案中，繞不開的一個話題，儘管很多人愛看折線圖，但是很多時候來個平滑曲線圖，會更加賞心悅目，這就好比現在的手機app移動客戶端上，從最初的四方四正到現在的平滑圓角大行其道，甚至連小米的LOGO都從方形稍微調整成絲滑的圓角，設計師還收了個幾百萬。曲線從彎來彎去的折線向平滑絲滑曲線轉變是個趨勢，所以這也是我一直納悶的一個問題就是，為何現在眾多的曲線圖表控制元件，不僅限於Qt的，包括C#/JAVA/ANDROID等開發框架，預設都是折線圖形式的而不是平滑的，莫非是英文折線圖程式碼簡單，直接兩個點連線起來就行？

網上有不少的平滑曲線演算法，用的最多的就是是貝塞爾曲線路徑，關於如何產生貝塞爾曲線的這些路徑點連線點，就會有很多種演算法，要麼用預設的曲線點集合挨個取點連線，要麼用演算法重新調整計算座標點，比如預設的座標點用cubicTo連線，最高點不會超過真實點，而有些演算法會將各種曲線的趨勢放大放猛，趨勢更大，看起來更曲線，缺點就是很可能會超出真實點的一部分，所以可以根據客戶的需求，自行選擇何種演算法來處理。

預計未來的QCustomPlot和qwt控制元件都會內建平滑屬性，預設不開啟，開啟後啟用平滑演算法進行曲線繪製，如果是由官方加進去，還是會與很多使用者使用的，現階段如果要在原始碼中加進去對應的處理，會影響原生程式碼的乾淨整潔度，畢竟官方的程式碼一直在更新換代，新特性層出不窮，直接在原始碼中修改的話，每次更新換了新的官方的程式碼，又得重新加進去，煩不勝煩，所以個人喜歡單獨的繼承類或者自定義類來實現。

二、功能特點

採用分層設計，整體總共分三級介面，一級介面是整體佈局，二級介面是單個功能模組，三級介面是單個控制元件。
子控制元件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控制元件、百分比控制元件、進度控制元件、裝置狀態面板、表格資料、地圖控制元件、視訊控制元件等。
二級介面可以自由拖動懸浮，支援最小化隱藏、最大化關閉、響應雙擊自定義標題欄。
資料來源支援模擬資料（預設）、資料庫採集、串列埠通訊（需定製）、網路通訊（需定製）、網路請求等，可自由設定每個子介面的採集間隔即資料重新整理頻率。
採用純QWidget編寫，親測Qt4.6到Qt6.2任意版本，理論上支援後續其他Qt版本。
超強跨平臺，親測windows、linux、mac、國產uos、國產銀河麒麟kylin等系統，效果完美，同時還支援嵌入式linux比如樹莓派、香橙派、全志、imx6等。
同時集成了自定義控制元件、qchart餅圖、echart地圖等功能。
內建多套配色風格樣式（紫色、藍色、深藍、黑色），預設紫色，自適應任意解析度。
可設定系統標題、目標解析度、佈局方案，啟動立即應用。
可設定主背景顏色、面板顏色、十字線遊標顏色等各種顏色。
可設定多條曲線不同顏色，沒有設定顏色的情況下內建多套精美顏色隨機應用。
可設定標題欄背景顏色、文字顏色。
可設定曲線圖表背景顏色、文字顏色、網格顏色。
可設定正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進度顏色。
可分別設定各種字型大小，比如全域性字型、軟體名稱、標題欄、子標題欄、加粗標籤等。
可設定標題欄高度、表頭高度、行高度。
曲線支援遊標、定位線、懸停高亮資料點、懸停顯示值。
柱狀圖支援頂部（可設定頂端、上部、中間、底部）顯示資料，全部自適應計算位置。
支援平滑曲線，內建多種平滑曲線演算法，還支援面積圖平滑。
面積圖填充顏色可選多種規則比如單色透明度填充、透明度漸變填充等。
資料庫支援sqlite、mysql、postgresql、oracle、國產人大金倉等資料庫。
主介面直接滑鼠右鍵切換佈局、配色方案、關閉開啟某個二級窗體。
自動記憶所有子視窗的大小和位置，下次啟動立即應用。
動態載入佈局方案選單，可以動態新建佈局、恢復佈局、儲存佈局、另存佈局等，使用者可以製造任意佈局。
二級窗體，雙擊從主窗體分離出來浮動，可以自由調整大小。再次雙擊標題欄最大化，再次雙擊還原。
子模組也可以全屏顯示作為一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大檢視子模組的資料詳情，適用多屏展示。
每個模組都可以自定義採集速度，如果是資料庫採集會自動排隊處理，後期還可以拓展每個子模組都獨立的資料庫採集。
提供系統設定模組進行整體的配置引數設定，效果立即應用。
提供精美炫酷的大屏地圖模組，包括靜態圖片、閃爍效果、遷徙效果、世界地圖、區域地圖等，可指定點的經緯度座標，識別單擊響應，可以做地圖跳轉等，每個點都可以不同的顏色和提示資訊。
除了提供大屏系統外，還將每個模組都做了獨立的模組示例介面，每個模組都可以獨立學習使用，裡面用到的控制元件也單獨做了控制元件示例介面，方便學習每個控制元件如何使用。
非常詳細的開發和使用手冊，其中包括資料庫說明、模組對照圖、控制元件對照圖、專案結構、程式碼說明（精確到每個類）、演示demo、使用方法等。

三、體驗地址

體驗地址：http://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 檔名：bin_bigscreen.zip。
國內站點：http://gitee.com/feiyangqingyun
國際站點：http://github.com/feiyangqingyun
個人主頁：http://blog.csdn.net/feiyangqingyun
知乎主頁：http://www.zhihu.com/people/feiyangqingyun/
線上文件：http://feiyangqingyun.gitee.io/qwidgetdemo/bigscreen/

四、效果圖

五、核心程式碼

#include "customplotline.h"
#include "customplothelper.h"
#include "smoothcurve.h"

CustomPlotLine::CustomPlotLine(QCustomPlot *parentPlot) : QCPItemRect(parentPlot)
{
}

void CustomPlotLine::draw(QCPPainter *painter)
{
    int count = data.points.count();
    if (count == 0) {
        return;
    }

    //要做座標轉換
    vpoint points;
    foreach (QPointF point, data.points) {
        double x = parentPlot()->xAxis->coordToPixel(point.x());
        double y = parentPlot()->yAxis->coordToPixel(point.y());
        points << QPointF(x, y);
    }

    //建立平滑曲線
    QPainterPath path;
    if (data.smoothType == 0) {
        path = SmoothCurve::createSmoothCurve(points);
    } else {
        path = SmoothCurve::createSmoothCurve2(points);
    }

    //設定畫筆
    painter->setPen(QPen(data.lineColor, data.lineWidth));
    //繪製路徑
    painter->drawPath(path);

    if (data.fillColor > 0) {
        vpoint points;
        //末一個點對應Y軸0
        points << QPointF(data.points.last().x(), 0);
        //第一個點對應Y軸0
        points << QPointF(data.points.first().x(), 0);
        //移動到第一個點
        points << data.points.first();

        //需要重新設定路徑不然繪製的區域不規整
        foreach (QPointF point, points) {
            double x = parentPlot()->xAxis->coordToPixel(point.x());
            double y = parentPlot()->yAxis->coordToPixel(point.y());
            path.lineTo(x, y);
        }

        //去掉邊框更符合需要
        painter->setPen(Qt::NoPen);
        //設定畫布背景顏色
        CustomPlotHelper::setGraphBrush(painter, data.lineColor, data.fillColor);
        painter->drawPath(path);
    }

    //繪製資料點
    if (data.scatterShape > 0) {
        //曲線原始碼中繪製資料點的寬度貌似要做一個運算
        int width = data.dataWidth;
        painter->setPen(QPen(data.dataColor, width));
        painter->setBrush(data.lineColor);

        //迴圈繪製資料點
        foreach (QPointF point, points) {
            painter->drawEllipse(point, width + 1, width + 1);
        }

        //迴圈繪製資料值
        if (data.drawValue) {
            for (int i = 0; i < count; ++i) {
                QPointF point = points.at(i);
                //數值要在正上方
                int offset = 25;
                QRect textRect(point.x() - offset, point.y() - offset, offset * 2, offset);
                painter->drawRect(textRect);
                //可以指定顯示的值
                QString text = QString::number(data.points.at(i).y(), 'f', 1);
                painter->drawText(textRect, Qt::AlignCenter, text);
            }
        }
    }
}

void CustomPlotLine::setData(const LineData &data)
{
    this->data = data;
}

「其他文章」