利用QtGraphicalEffects来使得自己的图像显示更加生动

Posted 2020-09-14

有兴趣的开发人员能够參阅连接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的原图为：

执行我们的例程，效果图例如以下：

  

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