Qt Quick裡的圖形效果（Graphical Effects），quickgraphical

Qt Quick裡的圖形效果（Graphical Effects），quickgraphical

    Qt Quick 提供了 Graphical Effects ，我在《Qt Quick核心編程》一書中限於篇幅沒有介紹，這裡補上吧。

    Graphical Effects ，姑且叫作圖形效果吧。它提供了 Blend 、 Color 等好幾類效果，有些類別下面又有多種不同的效果，要介紹完整需要較長的篇幅。我們一個一個來看。

    部落格之星評選，點擊投我一票，謝謝。投過了也可以點哦，每天都可以投投一票。

概要介紹

    先看看都有哪幾類圖形效果（Graphical Effects）吧：

• Blend，混合。只有一種類型——Blend，使用一種混合模式來合并兩個源 items 。
• Color，顏色，通過改變一個 Item 的顏色來產生各種各樣的效果。有下列幾種類型：
• BrightnessContrast，調整亮度和對比
• ColorOverlay，在源 Item 上覆蓋一層顏色
• Colorize，設定源 Item 的 HSL 色彩空間
• Desaturate，降低顏色的飽和度
• GammaAdjust，使用 gamma 曲線來改變源 Item 的照度
• HueSaturation，在 HSL 色彩空間改變源 Item 的顏色
• LevelAdjust，在 RGBA 色彩空間調整源 Item 的顏色水平
• Gradient，漸層。有下列幾種類型：
• ConicalGradient，錐形漸層
• LinearGradient，線性漸層
• RadialGradient，放射狀漸層
• Distortion，變形。只有一種類型——Displace，根據給定的位移 map 來改變源 Item 的像素
  
• Drop Shadow，投影。有兩種類型：
• DropShadow，根據源 Item 產生一個彩色的、模糊的影子映像，並且把它放到原始映像的後面，會產生源 Item 在背景上凸起的效果
• InnerShadow，在源 Item 裡面產生一個彩色的、模糊的映像
• Blur，模糊。有下面幾種類型：
  
• FastBlur，快速模糊
• GaussianBlur，高斯模糊
• MaskedBlur，差異化模糊，可以根據一個掩碼元素對源 Item 的不同地區產生強度不同的模糊效果
• RecursiveBlur，遞迴模糊。通過反覆模糊來產生很強的模糊效果。
• Motion Blur，移動模糊。有下面幾種類型：
  
• DirectionalBlur，定向模糊，在指定的方向上產生模糊效果
• RadialBlur，徑向模糊，在以源 Item 的中心點為圓心的一個圓形內應用定向模糊
• ZoomBlur，縮放模糊，朝著源 Item 的中心點應用定向模糊
• Glow，發光。有下面幾種類型：
• Glow，根據源 Item 產生一個彩色的、模糊的發光像，並且把它放到源 Item 後面，產生一種源 Item 在發光的效果。
• RectangularGlow，產生一個模糊的、彩色的矩形，給人發光的印象
• Mask，遮罩。有下面幾種類型：
  
• OpacityMask，透明遮罩。用另一個 Item 遮擋源 Item
• ThresholdMask，閾值遮罩。用另一個 Item 遮擋源 Item，根據一個閾值來應用遮擋效果

樣本項目

    我設計了一個樣本來示範所有的圖形效果，它是一個 Qt Quick App 項目。下面是樣本運行後的首頁：

                        圖 1 樣本首頁

    我們結合圖 1 來介紹一下樣本項目的結構。

    1 所示，首頁中間是一個列表，列出了所有的圖形效果類別。

    介面底部右側有兩個按鈕，“Load Examples”按鈕用於載入選中的圖形效果對應的樣本。“Quit”就是退出了。

源碼

    首頁的源碼在 main.qml 中：

import QtQuick 2.2import QtQuick.Window 2.1import QtQuick.Controls 1.2Window {    id: appWin;    visible: true;    width: 640;    height: 640;    minimumWidth: 640;    minimumHeight: 640;    color: "lightgray";    property var currentExample: null;    Text {        id: clue;        text: "Graphical Effects Examples";        anchors.top: parent.top;        anchors.left: parent.left;        anchors.margins: 4;        font.pointSize: 24;        font.bold: true;    }    Rectangle{        anchors.left: clue.left;        anchors.right: parent.right;        anchors.rightMargin: 4;        anchors.top: clue.bottom;        height: 2;        border.width: 1;        border.color: "darkgray";    }    Component {        id: exampleDelegate;        Rectangle {            id: wrapper;            width: parent.width;            height: 40;            color: "transparent";            Text {                anchors.fill: parent;                text: name;                color: wrapper.ListView.isCurrentItem ? "blue" : "steelblue";                font.pointSize: 20;                verticalAlignment: Text.AlignVCenter;            }            MouseArea {                anchors.fill: parent;                onClicked: {                    wrapper.ListView.view.currentIndex = index;                }            }        }    }    ListView {        id: examples;        anchors.bottom: quit.top;        anchors.top: clue.bottom;        anchors.left: parent.left;        anchors.right: parent.right;        anchors.margins: 8;        clip: true;        delegate: exampleDelegate;        highlight: Rectangle {            color: "lightblue";            width: parent.width;        }        model: ListModel {            ListElement {                name: "Blend";                example: "BlendExample.qml";            }            ListElement {                name: "Color";                example: "ColorExample.qml";            }            ListElement {                name: "Gradient";                example: "GradientExample.qml";            }            ListElement {                name: "Distortion";                example: "DistortionExample.qml";            }            ListElement {                name: "Drop Shadow";                example: "DropShadowExample.qml";            }            ListElement {                name: "Blur";                example: "BlurExample.qml";            }            ListElement {                name: "Motion Blur";                example: "MotionBlurExample.qml";            }            ListElement {                name: "Glow";                example: "GlowExample.qml";            }            ListElement {                name: "Mask";                example: "MaskExample.qml";            }        }    }    Button {        id: load;        text: "Load Examples";        anchors.right: quit.left;        anchors.top: quit.top;        anchors.rightMargin: 8;        onClicked: {            var data = examples.model.get(examples.currentIndex);            console.log("example: " , data.example);            var comp = Qt.createComponent(data.example);            if(comp.status == Component.Ready){                appWin.currentExample = comp.createObject(appWin, {"color" : appWin.color});                appWin.currentExample.back.connect(appWin.closeCurrentExample);            }        }    }    Button {        id: quit;        text: "Quit";        anchors.bottom: parent.bottom;        anchors.right: parent.right;        anchors.margins: 8;        onClicked: Qt.quit();    }    function closeCurrentExample() {        currentExample.destroy();    }}

    源碼比較簡單，從設計上解釋一下。

列表視圖

    ListView列出了所有的圖形效果。

    exampleDelegate 這個組件用於繪製 ListView 裡的一個 Item 。它接受並處理滑鼠事件，改變 ListView 的當前 Item ；也改變當前 Item 的文本顯示效果。

    ListModel 非常簡單，只是使用 ListElement 列出了所有圖形效果的名字（角色名稱為name）和對應的範例文件（角色名稱為example），在 delegate 中我們可以通過角色名稱訪問 Model 中的資料。

    這就是 ListView 了： view + model + delegate ，非常靈活。更詳細的用法，可以參考我的書《Qt Quick核心編程》，裡面對 ListView 有超級詳細的介紹。

動態載入圖形效果

    我給每一類圖形效果提供了一個單獨的示範介面，在 ListModel 內， example 這個角色儲存了對應的樣本 QML 文檔的名字。當使用者點擊“Load Examples”按鈕時，我擷取到 ListView 的當前 Item ，通過 Model 取出資料，訪問 example 角色，得到實際的 QML 文檔名字，然後使用 Qt.createComponent() 和 Component.createObject() 來載入 QML 文檔並產生樣本組件。

    好啦，這次就先介紹到這裡，下一次我們介紹 混合效果。

    部落格之星評選，點擊投我一票，謝謝。投過了也可以點哦，每天都可以投投一票。

--------

回顧一下我的Qt Quick系列文章：

• Qt Quick 簡介
• QML 語言基礎
• Qt Quick 之 Hello World 圖文詳解
• Qt Quick 簡單教程
• Qt Quick 事件處理之訊號與槽
• Qt Quick事件處理之滑鼠、鍵盤、定時器
• Qt Quick 事件處理之捏拉縮放與旋轉
  
• Qt Quick 組件與對象動態建立詳解
  
• Qt Quick 布局介紹
• Qt Quick 之 QML 與 C++ 混合編程詳解
• Qt Quick 影像處理執行個體之美圖秀秀（附源碼下載）
• Qt Quick 之 PathView 詳解
• Qt Quick執行個體之挖頭像
• Qt Quick綜合執行個體之檔案查看器
• Qt Quick調試之顯示程式碼號
• Qt Quick實現的塗鴉程式
• Qt Quick播放GIF動畫
• Qt Quick 中的 drag and drop（拖放）
• Qt Quick裡的AnimatedSprite的用法
• Qt Quick裡的粒子系統
• Qt Quick實現的瘋狂算數遊戲
• Qt Quick裡的圖形效果——混合（Blend）