有興趣的開發人員能夠參閱連接http://doc.qt.io/qt-5/qtgraphicaleffects-qmlmodule.html來深度學習Qt對Graphics方面的處理。

在今天的這篇文章中。我們來使用OpacityMask做一個小小的樣例來拋磚引玉看看Qt對我們的圖像的處理。

詳細的樣例在Qt的官方站點上能夠看到。因為一些原因，在官方站點上下載的例程中的文件并不能被使用，須要做一些的處理才干夠。

以下，我們直接來把我們的樣例展示給大家：

import QtQuick 2.0

import Ubuntu.Components 1.1

import QtGraphicalEffects 1.0

/*!

    \brief MainView with a Label and Button elements.

*/

MainView {

    // objectName for functional testing purposes (autopilot-qt5)

    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest

    applicationName: "mask.liu-xiao-guo"

    /*

     This property enables the application to change orientation

     when the device is rotated. The default is false.

    */

    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.

    useDeprecatedToolbar: false

    width: units.gu(60)

    height: units.gu(85)

    Page {

        title: i18n.tr("mask")

        Flickable {

            anchors.fill: parent

            contentHeight: mypics.childrenRect.height

            Item {

                id: mypics

                width: parent.width

                height: units.gu(80)

                Image {

                    id: bug

                    height: parent.height/2

                    width: height

                    source: "images/bug.png"

                    sourceSize: Qt.size(parent.width, parent.height)

                    smooth: true

                    visible: false

                }

                Image {

                    id: bug1

                    height: parent.height/2

                    width: height

                    source: "images/bug.png"

                    anchors.top: bug.bottom

                    anchors.topMargin: units.gu(1)

                    sourceSize: Qt.size(parent.width, parent.height)

                    smooth: true

                    visible: false

                }

                Rectangle {

                    id: mask

                    anchors.margins: 10

                    width: 65

                    height: 65

                    color: "black"

                    radius: width/2

                    clip: true

                    visible: false

                }

                Image {

                    id: mask1

                    height: units.gu(40)

                    width: height

                    source: "images/bufferfly.png"

                    sourceSize: Qt.size(parent.width, parent.height)

                    smooth: true

                    visible: false

                }

                OpacityMask {

                    anchors.fill: bug

                    source: bug

                    maskSource: mask

                }

                OpacityMask {

                    anchors.fill: bug1

                    source: bug

                    maskSource: mask1

                }

            }

        }

    }

}

在這里。我們使用了Image來展示圖片，可是。他們并非可見的（visible = false）。我們能夠通過一個掩膜mask，在mask上值為非透明的地方能夠顯示出圖像。

能夠通過OpacityMask來使得它們能夠顯示。

我們的mask圖片bufferfly.png例如以下：

bug.png的原圖為：

執行我們的例程，效果圖例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">  

源代碼在： https://github.com/liu-xiao-guo/mask