标签：qml   qt quick   图形效果   图像混合   

    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 ：

import QtQuick 2.2
import QtGraphicalEffects 1.0
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 Images";
    }

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

    Row {
        id: origImages;
        width: 500;
        height: 260;
        anchors.left: parent.left;
        anchors.top: origLabel.bottom;
        anchors.margins: 4;
        spacing: 10;
        Image {
            source: "bug.jpg";
            sourceSize: Qt.size(240, 240);
            smooth: true;
        }
        Image {
            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: origImages.bottom;
        height: 2;
        border.width: 1;
        border.color: "darkgray";
    }

    Text {
        id: blendLabel;
        anchors.top: origImages.bottom;
        anchors.margins: 4;
        anchors.left: parent.left;
        font.pointSize: 20;
        font.bold: true;
        text: "Blend Modes && Effects";
        color: "blue";
    }

    Rectangle {
        id: blendModes;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.top: blendLabel.bottom;
        anchors.topMargin: 10;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        width: 160;
        color: "gray";

        ListView {
            anchors.fill: parent;
            clip: true;
            focus: true;
            delegate: Text {
                id: wrapper;
                text: name;
                width: parent.width;
                height: 36;
                font.pointSize: 20;
                Keys.onEnterPressed: {
                    blender.mode = name;
                    event.accepted = true;
                }

                Keys.onReturnPressed: {
                    blender.mode = name;
                    event.accepted = true;
                }

                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        wrapper.ListView.view.currentIndex = index;
                        blender.mode = name;
                    }
                }
            }
            highlight: Rectangle {
                width: parent.width;
                color: "lightblue";
            }

            model: modesModel;
        }
    }

    Image {
        id: bug;
        anchors.top: blendLabel.bottom;
        anchors.topMargin: 10;
        anchors.left: blendModes.right;
        anchors.leftMargin: 10;
        source: "bug.jpg";
        sourceSize: Qt.size(300, 300);
        smooth: true;
        visible: false;
    }

    Image {
        id: bufferFly;
        source: "butterfly.png";
        sourceSize: Qt.size(300, 300);
        smooth: true;
        visible: false;
    }

    Blend {
        id: blender;
        source: bug;
        anchors.fill: bug;
        foregroundSource: bufferFly;
        mode: "subtract";
    }

    ListModel {
        id: modesModel;
        ListElement {
            name: "subtract";
        }
        ListElement {
            name: "normal";
        }
        ListElement {
            name: "addition";
        }
        ListElement {
            name: "average";
        }
        ListElement {
            name: "colorBurn";
        }
        ListElement {
            name: "color";
        }
        ListElement {
            name: "colorDodge";
        }
        ListElement {
            name: "darken";
        }
        ListElement {
            name: "darkerColor";
        }
        ListElement {
            name: "difference";
        }
        ListElement {
            name: "divide";
        }
        ListElement {
            name: "exclusion";
        }
        ListElement {
            name: "hardLight";
        }
        ListElement {
            name: "hue";
        }
        ListElement {
            name: "lighten";
        }
        ListElement {
            name: "lighterColor";
        }
        ListElement {
            name: "lightness";
        }
        ListElement {
            name: "multiply";
        }
        ListElement {
            name: "negation";
        }
        ListElement {
            name: "saturation";
        }
        ListElement {
            name: "screen";
        }
        ListElement {
            name: "softLight";
        }
    }
}

返回

    图 1 右上角有一个 “Back” 按钮，点击后会发射一个 back() 信号。 back 信号用来通知我们在“Qt Quick里的图形效果（1）”中提到的 main.qml ：用户要从当前示例返回了。 main.qml 收到 back 信号时，会销毁动态创建的示例组件。

    以后我们看到 ColorExample 等等针对某类效果设计的示例，都使用同一种策略。

混合

    混合模式列表使用 ListView 的展示，ListElement 只有一个角色——name，它的值就是混合模式的名字。当用户点击列表中的某个条目时， delegate 的 MouseArea 的 onClicked 信号处理器改变 Blend 元素的 mode 属性。

    好了，这次就到这里，每种混合模式效果如何，还请运行示例实际看一下。下次我们会介绍颜色（Color）效果。

    博客之星评选，点击投我一票，谢谢。投过了也可以点哦，每天都可以投投一票。

--------

回顾一下我的Qt Quick系列文章：

• Qt Quick 简介
• QML 语言基础
• Qt Quick 之 Hello World 图文详解
• Qt Quick 简单教程
• Qt Quick 事件处理之信号与槽
• Qt Quick事件处理之鼠标、键盘、定时器
• Qt Quick 事件处理之捏拉缩放与旋转
  
• Qt Quick 组件与对象动态创建详解
  
• Qt Quick 布局介绍
• Qt Quick 之 QML 与 C++ 混合编程详解
• Qt Quick 图像处理实例之美图秀秀（附源码下载）
• Qt Quick 之 PathView 详解
• Qt Quick实例之挖头像
• Qt Quick综合实例之文件查看器
• Qt Quick调试之显示代码行号
• Qt Quick实现的涂鸦程序
• Qt Quick播放GIF动画
• Qt Quick 中的 drag and drop（拖放）
• Qt Quick里的AnimatedSprite的用法
• Qt Quick里的粒子系统
• Qt Quick实现的疯狂算数游戏
• Qt Quick里的图形效果（Graphical Effects）

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

标签：qml   qt quick   图形效果   图像混合   

原文地址：http://blog.csdn.net/foruok/article/details/42637483