第13篇Qt Quick入门教程之图形动画(三)图形效果1

2019-10-28 07:57| 发布者: admin| 查看: 1079| 评论: 0

摘要: 导语从这一篇开始，我们将通过三节的内容来讲解Qt Quick中的图形效果Qt Graphical Effects模块。一个模块可以简单理解为一组QML类型的集合，在图形效果模块中提供了20多种QML类型，专门用于实现一些特殊显示效果，比 ...

导语

从这一篇开始，我们将通过三节的内容来讲解Qt Quick中的图形效果Qt Graphical Effects模块。一个模块可以简单理解为一组QML类型的集合，在图形效果模块中提供了20多种QML类型，专门用于实现一些特殊显示效果，比如图像混合、遮罩、渐变、模糊等，并且这些效果是可以进行手动配置的。

这些效果类型本身就是一个可视化项目，可以直接添加到用户界面，然后指定其要施加到的源项目，并进行一些属性配置即可。下面通过具体的例子来看一下这些图形效果如何使用。

颜色效果

前面我们已经学习了基本的颜色设置，但是如果想进行高级一点的设置，比如亮度、对比度、饱和度、颜色叠加等，就需要使用这里的图形效果类型了。这里涉及颜色的类型有七种，分别是BrightnessContrast（亮度对比度）、ColorOverlay（颜色叠加）、Colorize（着色）、Desaturate（饱和度）、GammaAdjust（伽玛调整）、HueSaturation（色相饱和度）和LevelAdjust（色阶调整）。

下面以BrightnessContrast为例进行讲解。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480

    Image {
        id: sourceImage
        source: "back.png"
        sourceSize: Qt.size(parent.width/2, parent.height/2)
        smooth: true
        visible: true
    }

    Image {
        id: back
        anchors.top: sourceImage.bottom
        anchors.left: sourceImage.right
        source: "back.png"
        sourceSize: Qt.size(parent.width/2, parent.height/2)
        smooth: true
        visible: false
    }

    BrightnessContrast {
        anchors.fill: back
        source: back
        brightness: 0.6
        contrast: 0.5
    }
}

要使用图形效果模块，首先需要导入该模块：

import QtGraphicalEffects 1.12

在代码中放置了两个图片，第一个图片是直接显示原图片，作为参照，不用理会；第二个图片是作为源图片，就是要对该图片使用特效，源图片一般会设置visible为false。下面主要看 BrightnessContrast 的定义，这里指定了要作用到的source源图，并填充了整个源图，然后分别指定亮度brightness和对比度contrast属性，这两个属性的取值都是从-1.0~1.0，默认值为0.0。

可以看到，使用一个图形效果类型是非常简单的，代码运行效果如下图所示。

渐变效果

前面我们也讲到过渐变类型，不过只是实现简单的线性渐变，要实现其他渐变效果比较麻烦。而在图形效果中，提供了三种常见的渐变类型：ConicalGradient（锥形渐变）、LinearGradient（线性渐变）和RadialGradient（辐射渐变）。

下面以ConicalGradient为例进行讲解。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640; height: 220

    Rectangle {
        x: 10; y: 10
        color: "grey"
        width: 200; height: 200
    }

    Rectangle {
        id: back
        x: 220; y: 10
        width: 200; height: 200
    }

    ConicalGradient {
        id: conicalGradient1
        anchors.fill: back
        angle: 30.0
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
    }
}

我们先来看conicalGradient1，直接让其填充了一个矩形。这里gradient属性的含义与前面讲解Gradient类型时一样，这里不再解释。angle属性用来设置在渐变起始位置处颜色绘制的角度，默认为0.0，角度顺时针增加。另外，还有两个属性用来设置中心点的水平偏移和垂直偏移，分别是horizontalOffset和verticalOffset，默认值均为0。现在运行的效果如下图所示。

Image {
    id: backImage
    x: 440; y:50
    source: "logo.png"
    sourceSize.height: 200
    visible: false
}

ConicalGradient {
    id: conicalGradient2
    anchors.fill: backImage
    source: backImage
    angle: 90.0
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#88BB0000" }
        GradientStop { position: 1.0; color: "white" }
    }
}

接着添加代码。这里的conicalGradient2指定了一个图片作为源，而且起始的颜色为半透明的红色。源图片如下图所示，背景透明的PNG图片。

代码运行效果如下图所示。

Image {
    id: backImage2
    x: 510; y:50
    source: "logo.png"
    sourceSize.height: 200
    visible: true
}

ConicalGradient {
    id: conicalGradient3
    anchors.fill: backImage2
    source: backImage2
    angle: 90.0
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#88BB0000" }
        GradientStop { position: 1.0; color: "white" }
    }
}

前面的源图片设置了隐藏，所以效果只是显示了填充的颜色。这里再次添加代码，将源图片显示出来，效果如下图所示。

结语

图形效果模块在设置一些特殊效果的时候非常有用，而且，不同参数，不同设置方法都会呈现出不同的结果。想要实现自己期待的效果，还需要多进行尝试。

第11篇 Qt Quick入门教程之图形动画（一）颜色和渐变

购书优惠码来了！是时候下手屯书了！

----------------------------------------------------------------------------------------------------------------------
我们尊重原创，也注重分享，文章来源于微信公众号：yafeilinux和他的朋友们，建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

收藏分享邀请

帐号		自动登录	找回密码
密码			立即注册

账号		自动登录	找回密码
密码			立即注册