Qt Quick里的图形效果——混合（Blend）

    Blend 元素用指定的模式混合两个 Item 。在我们使用 QPainter 绘图时，支持 Composition Modes ，Blend 干的事儿与此类似。

    使用 Blend 需要：

import QtGraphicalEffects 1.0

Blend元素简介

    Blend 是 Item 的派生类，有下列属性：

• source，指定源Item
• foregroundSource，指定作为前景的源 Item
• mode，一个字符串，指定要使用的混合模式
• cached，布尔变量，默认值为 false 。设置为 true ，可以缓存输出的效果图像，提升渲染效率，不过会占用更多的内存。如果源 Item 具有动态效果，建议禁用 cache 。

    Blend 元素本身是一个 Item ，你可以使用 anchors 来对它布局，也可以使用 x 、 y 、 width 、 height 等调整它的大小和位置。

    下面是 Qt 帮助里的示例代码：

import QtQuick 2.2
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    Image {
        id: bug
        source: "images/bug.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    Image {
        id: butterfly
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    Blend {
        anchors.fill: bug
        source: bug
        foregroundSource: butterfly
        mode: "subtract"
    }
}

    如代码所示，Blend 对象指定了 source 、 foregroundSource 、 mode 三个属性。

    注意到 anchors.fill 属性了吗，它产生效果是： Blend 元素占据 bug 的位置，并且充满它。那实际上在定义 Blend 对象时也可以这样：

    Blend {
        anchors.top: parent.top;
        anchors.right: parent.right;
        width: 240;
        height: 240;
        source: bug;
        foregroundSource: butterfly;
        mode: "subtract";
    }

    值得一提的是，如果使用锚布局来定位 Blend 对象，那它锚定的 Item 必须是 Blend 的父或者兄弟。

    如你所见，示例代码将 bug 和 butterfly 的 visible 属性设置为 false ，这并不是必须的。如果我们将 Blend 元素当作是 source 、 foregroundSource 根据 mode 混合后的那个元素，理解起来就会容易得多。Blend 、 source 、 foregroundSource 是三个逻辑上相互独立的元素，你可以随意摆布它们，它们的位置、可见属性等相互没有任何影响。

Blend示例

    BlendExample.qml 演示了各种混合模式。效果图如下：

                    图 1 混合示例效果图

    如图 1 所示，界面分成两部分，上方是原始图片，下方是混合效果。

    我使用一个 ListView 展示 Blend 支持的所有混合模式，在 ListView 右侧显示混合结果，当选中 ListView 内的条目时，动态改变 Blend 的 mode 属性，Blend 就会重新混合两个源 Item ，我们就能看到新的混合效果。

    下面是 BlendExample.qml ：