2. 程式人生 > >Qt Quick裡的圖形效果：陰影（Drop Shadow）

Qt Quick裡的圖形效果：陰影（Drop Shadow）

阿新 • • 發佈：2019-01-05

    Qt Quick提供了兩種陰影效果：

  • DropShow，陰影。這個元素會根據源影象，產生一個彩色的、模糊的新影象，把這個新影象放在源影象後面，給人一種源影象從背景上凸出來的效果。
  • InnerShadow，內陰影。這個元素會根據源影象，產生一個彩色的、模糊的新影象，與 DropShadow不同的是，新影象會放在源影象裡面。

效果

    下面是我設計的示例效果。

    首先是 DropShadow ：


                       圖1 陰影效果

    然後是內陰影效果：


                    圖2 內陰影效果

原始碼分析

    如圖1所示，介面被分為三部分。

    最上面的是源影象。

    源影象下面（即中間）是一個列表，你可以點選 DropShadow 和 InnerShadow 兩個子項，切換不同的陰影效果。每種陰影效果都對應一個 qml 文件，當你點選這些子項時，對應的 qml 文件動態載入。

陰影示例介面

    這個示例介面框架其實與“Qt Quick裡的圖形效果——顏色（Color）”是一致的，只是我把 ListView 從原來的豎向改為了橫向。對應的 DropShadowExample.qml 內容如下：

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    id: example;
    signal back();
    anchors.fill: parent;

    Text {
        id: origLabel;
        x: 10;
        y: 4;
        font.pointSize: 20;
        text: "Original Image";
    }

    Button {
        anchors.right: parent.right;
        anchors.top: parent.top;
        anchors.margins: 4;
        text: "Back";
        onClicked: example.back();
    }


    Image {
        id: origImage;
        width: 240;
        height: 240;
        anchors.left: parent.left;
        anchors.top: origLabel.bottom;
        anchors.margins: 4;
        source: "butterfly.png";
        sourceSize: Qt.size(240, 240);
        smooth: true;
    }

    Rectangle{
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.right: parent.right;
        anchors.rightMargin: 4;
        anchors.top: origImage.bottom;
        height: 2;
        border.width: 1;
        border.color: "darkgray";
    }

    Text {
        id: effectsLabel;
        anchors.top: origImage.bottom;
        anchors.margins: 4;
        anchors.left: parent.left;
        font.pointSize: 20;
        font.bold: true;
        text: "Shadow Effects:";
        color: "blue";
    }

    Rectangle {
        id: shadowEffects;
        anchors.left: effectsLabel.right;
        anchors.leftMargin: 4;
        anchors.top: effectsLabel.top;
        anchors.right: parent.right;
        anchors.rightMargin: 4;
        height: 40;
        color: "gray";

        ListView {
            anchors.fill: parent;
            clip: true;
            focus: true;
            orientation: ListView.Horizontal;
            spacing: 20;
            delegate: Text {
                id: wrapper;
                height: 40;
                verticalAlignment: Text.AlignVCenter;
                text: name;
                font.pointSize: 18;
                Keys.onEnterPressed: {
                    event.accepted = true;
                    effectControl.source = example;
                }

                Keys.onReturnPressed: {
                    event.accepted = true;
                    effectControl.source = example;
                }

                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        wrapper.ListView.view.currentIndex = index;
                        effectControl.source = example;
                    }
                }
            }
            highlight: Rectangle {
                height: parent.height;
                color: "lightblue";
            }

            model: shadowsModel;
        }
    }

    Loader {
        id: effectControl;
        anchors.top: shadowEffects.bottom;
        anchors.left: parent.left;
        anchors.bottom: parent.bottom;
        anchors.right: parent.right;
        anchors.margins: 4;
        source: "DropShadowEx.qml";
    }

    ListModel {
        id: shadowsModel;
        ListElement {
            name: "DropShadow";
            example: "DropShadowEx.qml";
        }
        ListElement {
            name: "InnerShadow";
            example: "InnerShadowEx.qml";
        }
    }
}

    DropShawExample.qml 會被“Qt Quick裡的圖形效果（Graphical Effects）”裡介紹過的 main.qml 動態載入。

陰影效果

    陰影效果對應的 DropShadowEx.qml 內容如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2

Rectangle {
    anchors.fill: parent;
    Image {
        id: opImage;
        x: 4;
        y: 4;
        width: 250;
        height: 250;
        source: "butterfly.png";
        sourceSize: Qt.size(250, 250);
        smooth: true;
        visible: false;
    }

    DropShadow {
        id: dropshadow;
        anchors.fill: opImage;
        source: opImage;
    }

    Rectangle {
        anchors.left: opImage.right;
        anchors.top: opImage.top;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        anchors.margins: 2;
        color: "lightsteelblue";

        CheckBox {
            id: fast;
            anchors.top: parent.top;
            anchors.topMargin: 4;
            anchors.left: parent.left;
            anchors.leftMargin: 4;
            checked: false;
            text: "fast";
        }
        CheckBox {
            id: transparentBorder;
            anchors.left: fast.right;
            anchors.leftMargin: 8;
            anchors.top: fast.top;
            checked: false;
            text: "transparentBorder";
        }

        Text {
            id: colorLabel;
            anchors.left: fast.left;
            anchors.top: fast.bottom;
            anchors.topMargin: 8;
            text: "shadow color:";
        }

        ColorPicker {
            id: shadowColor;
            anchors.left: colorLabel.right;
            anchors.leftMargin: 4;
            anchors.top: colorLabel.top;
            width: 90;
            height: 28;
            color: "#ff000000";
        }

        Text {
            id: sampleLabel;
            anchors.left: fast.left;
            anchors.top: shadowColor.bottom;
            anchors.topMargin: 8;
            text: "samples:";
        }

        Slider {
            id: sampleSlider;
            anchors.left: sampleLabel.right;
            anchors.leftMargin: 4;
            anchors.top: sampleLabel.top;
            minimumValue: 0;
            maximumValue: 32;
            value: 0.0;
            width: 160;
            height: 30;
            stepSize: 1.0;
        }

        Text {
            id: spreadLabel;
            anchors.left: fast.left;
            anchors.top: sampleSlider.bottom;
            anchors.topMargin: 8;
            text: "spread:";
        }

        Slider {
            id: spreadSlider;
            anchors.left: spreadLabel.right;
            anchors.leftMargin: 4;
            anchors.top: spreadLabel.top;
            value: 0.5;
            width: 160;
            height: 30;
        }

        Text {
            id: radiusLabel;
            anchors.left: fast.left;
            anchors.top: spreadSlider.bottom;
            anchors.topMargin: 8;
            text: "radius:";
        }

        Rectangle {
            id: radiusArea;
            anchors.left: radiusLabel.right;
            anchors.leftMargin: 4;
            anchors.top: radiusLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: radiusEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{bottom: 0;}
            }
        }


        Text {
            id: voffLabel;
            anchors.left: fast.left;
            anchors.top: radiusArea.bottom;
            anchors.topMargin: 8;
            text: "verticalOffset:";
        }

        Rectangle {
            id: voffArea;
            anchors.left: voffLabel.right;
            anchors.leftMargin: 4;
            anchors.top: voffLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: voffEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{}
            }
        }


        Text {
            id: hoffLabel;
            anchors.left: fast.left;
            anchors.top: voffArea.bottom;
            anchors.topMargin: 8;
            text: "horizontalOffset:";
        }

        Rectangle {
            id: hoffArea;
            anchors.left: hoffLabel.right;
            anchors.leftMargin: 4;
            anchors.top: hoffLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: hoffEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{}
            }
        }

        Button {
            id: applyBtn;
            anchors.left: parent.left;
            anchors.leftMargin: 4;
            anchors.top: hoffArea.bottom;
            anchors.topMargin: 12;
            text: "Apply";
            onClicked: {
                dropshadow.color = shadowColor.color;
                dropshadow.fast = fast.checked;
                dropshadow.transparentBorder = transparentBorder.checked;
                dropshadow.samples = sampleSlider.value;
                dropshadow.radius = parseFloat(radiusEdit.text);
                dropshadow.verticalOffset = voffEdit.text;
                dropshadow.horizontalOffset = hoffEdit.text;
                dropshadow.spread = spreadSlider.value;
            }
        }
    }
}

    程式碼比較簡單，不細說了。我們看看 DropShadow 元素的各個屬性都什麼含義吧。
  • source，variant型別，指向源Item
  • horizontalOffset 與verticalOffset，real型別，指定陰影相對於源Item的水平和垂直偏移量，預設為 0 
  • radius，real型別，設定陰影的柔和程度，值越大，陰影的邊緣就會顯得越柔和
  • sample，int型別，指定生成陰影時陰影的每個畫素由多少個取樣點產生，取樣點越多陰影效果越好，不過也越慢。一般可以把這個值設定為 radius的2倍。
  • spread，real型別，指定如何強化陰影接近源 Item 邊緣的部分，取值範圍為 0.0 -- 1.0 ，預設為 0.5

    未提及的屬性都比較簡單，想 cached 、 fast 、 transparentBorder 等，之前的文章也提到過。

內陰影

    內陰影效果對應的 InnerShadowEx.qml 內容如下：

import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2

Rectangle {
    anchors.fill: parent;
    Image {
        id: opImage;
        x: 4;
        y: 4;
        width: 250;
        height: 250;
        source: "butterfly.png";
        sourceSize: Qt.size(250, 250);
        smooth: true;
        visible: false;
    }

    InnerShadow {
        id: innershadow;
        anchors.fill: opImage;
        source: opImage;
    }

    Rectangle {
        anchors.left: opImage.right;
        anchors.top: opImage.top;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        anchors.margins: 2;
        color: "lightsteelblue";

        CheckBox {
            id: fast;
            anchors.top: parent.top;
            anchors.topMargin: 4;
            anchors.left: parent.left;
            anchors.leftMargin: 4;
            checked: false;
            text: "fast";
        }

        Text {
            id: colorLabel;
            anchors.left: fast.left;
            anchors.top: fast.bottom;
            anchors.topMargin: 8;
            text: "shadow color:";
        }

        ColorPicker {
            id: shadowColor;
            anchors.left: colorLabel.right;
            anchors.leftMargin: 4;
            anchors.top: colorLabel.top;
            width: 90;
            height: 28;
            color: "#ff000000";
        }

        Text {
            id: sampleLabel;
            anchors.left: fast.left;
            anchors.top: shadowColor.bottom;
            anchors.topMargin: 8;
            text: "samples:";
        }

        Slider {
            id: sampleSlider;
            anchors.left: sampleLabel.right;
            anchors.leftMargin: 4;
            anchors.top: sampleLabel.top;
            minimumValue: 0;
            maximumValue: 32;
            value: 0.0;
            width: 160;
            height: 30;
            stepSize: 1.0;
        }

        Text {
            id: spreadLabel;
            anchors.left: fast.left;
            anchors.top: sampleSlider.bottom;
            anchors.topMargin: 8;
            text: "spread:";
        }

        Slider {
            id: spreadSlider;
            anchors.left: spreadLabel.right;
            anchors.leftMargin: 4;
            anchors.top: spreadLabel.top;
            value: 0.5;
            width: 160;
            height: 30;
        }

        Text {
            id: radiusLabel;
            anchors.left: fast.left;
            anchors.top: spreadSlider.bottom;
            anchors.topMargin: 8;
            text: "radius:";
        }

        Rectangle {
            id: radiusArea;
            anchors.left: radiusLabel.right;
            anchors.leftMargin: 4;
            anchors.top: radiusLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: radiusEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{bottom: 0;}
            }
        }


        Text {
            id: voffLabel;
            anchors.left: fast.left;
            anchors.top: radiusArea.bottom;
            anchors.topMargin: 8;
            text: "verticalOffset:";
        }

        Rectangle {
            id: voffArea;
            anchors.left: voffLabel.right;
            anchors.leftMargin: 4;
            anchors.top: voffLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: voffEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{}
            }
        }


        Text {
            id: hoffLabel;
            anchors.left: fast.left;
            anchors.top: voffArea.bottom;
            anchors.topMargin: 8;
            text: "verticalOffset:";
        }

        Rectangle {
            id: hoffArea;
            anchors.left: hoffLabel.right;
            anchors.leftMargin: 4;
            anchors.top: hoffLabel.top;
            height: 30;
            width: 160;
            color: "lightgray";
            border.width: 1;
            border.color: "darkgray";
            TextInput {
                anchors.fill: parent;
                anchors.margins: 2;
                id: hoffEdit;
                font.pointSize: 18;
                text: "0.0";
                validator: DoubleValidator{}
            }
        }

        Button {
            id: applyBtn;
            anchors.left: parent.left;
            anchors.leftMargin: 4;
            anchors.top: hoffArea.bottom;
            anchors.topMargin: 12;
            text: "Apply";
            onClicked: {
                innershadow.color = shadowColor.color;
                innershadow.fast = fast.checked;
                innershadow.samples = sampleSlider.value;
                innershadow.radius = parseFloat(radiusEdit.text);
                innershadow.verticalOffset = voffEdit.text;
                innershadow.horizontalOffset = hoffEdit.text;
                innershadow.spread = spreadSlider.value;
            }
        }
    }
}

    原始碼比較簡單，不說了。

    InnerShadow 比 DropShadow 少了一個 transparentBorder 屬性，其他基本一致，偷個懶，也不說了。

    回顧一下：

相關推薦

Qt Quick裡的圖形效果：陰影（Drop Shadow）

    Qt Quick提供了兩種陰影效果：DropShow，陰影。這個元素會根據源影象，產生一個彩色的、模糊的新影象，把這個新影象放在源影象後面，給人一種源影象從背景上凸出來的效果。InnerShadow，內陰影。這個元素會根據源影象，產生一個彩色的、模糊的新影象，與 Dr

清華髮布：2018計算機圖形學研究報告（附下載）

導讀：報告包括概述篇、技術篇、人才篇、會議篇、應用篇、趨勢篇，本文擷取概述篇部分內容。在公眾號後

計算機圖形學 學習筆記（十二）：顏色模型，簡單 / 增量 光照模型

接下來將介紹真實感圖形學的內容。 真實感圖形學包括：顏色模型，簡單光照模型，增量光照模型，區域性光照模型和投射模型，整體光照模型，紋理對映和陰影處理。 真實感圖形學 真實感圖形學研究的是什麼？簡單來說，就是希望用計算機生成像照相機拍的照片一樣逼真地

Cocos2d-x 源代碼分析 ： Scheduler（定時器） 源代碼分析

tel 技術分享 name list sch lam 源碼 hat array 源代碼版本號 3.1r，轉載請註明 我也最終不out了，開始看3.x的源代碼了。此時此刻的心情僅僅能是wtf！！！！！！！！！。只是也最終告別CC時代了。

HDU 3001 Travelling：TSP（旅行商）

sta init using 多少 b- upd eof == als 題目鏈接：http://acm.hdu.edu.cn/showproblem.php?pid=3001 題意： 　　有n個城市，m條雙向道路，每條道路走一次需要花費路費v。你可以將任意一個城市作為起點出

性能提速：debounce（防抖）、throttle（節流／限頻）

mat 控制臺 nim 分享圖片 ons 布局 settime why 交互 debounce與throttle是用戶交互處理中常用到的性能提速方案，debounce用來實現防抖動，throttle用來實現節流（限頻）。那麽這兩個方法到底是什麽（what）？為何要用（why

Vue-小demo、小效果 合集（更新中...）

lin auto isa hover json () add ole bce （騰訊課堂學習小demo：https://ke.qq.com/course/256052） 一、簡單的指令應用 ——打擊滅火器 圖片素材點擊騰訊課堂的鏈接獲取 html： 1 &

Python3.x：pdf2htmlEX（解析pdf）安裝和使用

targe drm oom height pbo gin mage output javascrip Python3.x：pdf2htmlEX（解析pdf）安裝和使用 簡介 pdf2htmlEX是一款優秀的pdf轉換成html的工具； 下載 windows下載地址：http

JS中對象的特征：封裝（函數）

函數 property 對象 調用 一個 .proto .get 定義 col 面向對象的特征 1、第一個特征：封裝 1.1概念：隱藏實現細節的過程 1.2優點：重用和隱藏細節 Java裏面有權限修飾符，但是JS裏面沒有，JS所有的屬性都是公共的，為了讓屬性私有化，就有相

Qt Creator: Unknown debugger type “No engine”（完美解決）

nbsp 圖片 www too program gin sdn pro blank Qt Creator: Unknown debugger type “No engine” Qt Creator 找不到調試器的解決辦法： 1、下載並安裝 Debugging Tools f

Java學習之圖形化界面（Swing基礎）

clas 取消邊框 combobox rect 平臺 red eight 獲得 mbo Java學習之圖形化界面（Swing基礎） 一、Java圖形化界面發展史 起初在早期的計算機系統中，電腦只提供命令行界面（CLI），現在在Windows中開個DOS窗口，就

HDU - 3949 ：XOR（線性基）

表示 所有 integer ++ name ins several man const XOR is a kind of bit operator, we define that as follow: for two binary base number A and B,

小遊戲：五子棋（帶AI）

鏈接 ihs href 至少 jci heap 水平 密碼 更新 這個代碼，是本蒟蒻寫過幾乎最長的代碼了…… 此程序可能會有非常多的bug，但是這個代碼太長了（至少對於一個沒見識過fib heap什麽的人來說），而且寫得比較亂，所以可能以後不會更新了。 此AI算法是我自己腦

【校理】愛因斯坦：自述（1946年）

博主導言 這是《愛因斯坦文集》（商務印書館2009年版，譯者為許良英，李寶恆，趙中立）中的第一卷第一篇文章。其發表時間可見第一個註腳。除開文集之外，其他一些出版社也曾在名為《愛因斯坦自述》之類的書籍中編選過這篇文章，但都刪去了其中與物理學有關的內容，僅將能夠體現愛因斯坦對一般生活或科學整體看法的部分保留下來

FairyGUI筆記：Controller（十一）

控制器是FairyGUI核心功能之一，它為UI製作中以下類似需求提供了支援： 分頁 一個元件可以由多個頁面組成。 按鈕狀態 按鈕通常有按下、滑鼠懸浮等多個狀態，我們可以利用控制器為每個狀態安排不同的顯示內容。 其它狀態的變化 利用控制器，我們可以使元件具有多個不同的形

FairyGUI筆記：關聯（十二）

Relation 除了在編輯器設定關聯外，有時候我們也需要動態新增關聯。例如在一款頁遊中，一個動態新增到舞臺的元件，希望舞臺寬度改變時（比如瀏覽器視窗被玩家拖大拖小），元件依然保持在右側位置，那麼可以這樣呼叫： aObject.AddRelation(GRoot.inst, R

FairyGUI筆記：列表（十九）

GList 列表對應的是GList.在FairyGUI中，列表的本質就是一個元件，GList也是從GComponent派生來的，所以你可以用GComponent的API直接訪問列表能容，例如可以用GetChild或者GetChildAt訪問列表內的專案；也可以用AddChild新增

poj刷題debug日記：poj1276（多重揹包）

Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39032

C/C++ 演算法分析與設計：貪心（整數配對）

題目描述 江鳥想到一個有趣的問題：給你N個正整數，你可以將這N個整數按兩個一組的方式成對劃分，當然其中的元素也可以不和其他元素配對劃分。現在的問題是，讓劃分為一對的元素的乘積與未配對的元素相加求和，並且讓和最大。比如：考慮這個集合{0,1,2,4,5,3}，如果我們讓{0,3}、{2,5}分別成

打造軟硬體結合的機器人：WuKonChatBot（悟空）聊天機器人

打造軟硬體結合的第一機器人：WuKonChatBot（悟空）聊天機器人 請不要嘲笑我的夢想 開發總體計劃——已經完成 未來開發計劃 歡迎評論，留下你寶貴的建議 請不要嘲笑我的夢想 每個人都有夢想