Graph effects in Qt Quick-Blend)

Graph effects in Qt Quick-Blend)

The Blend element uses the specified mode to mix two items. When we use QPainter for plotting, the support for Composition Modes and Blend is similar.

To use Blend, you must:

import QtGraphicalEffects 1.0

Blog Star Selection, click to vote for me, thank you. You can also vote once. You can vote every day.

Blend element Introduction

Blend is the derived class of Item and has the following attributes:

Source: Specifies the source ItemforegroundSource, which is used as the source Itemmode of the foreground. It is a string that specifies the Mixed Mode cached and Boolean variable to be used. The default value is false. If this parameter is set to true, the output image can be cached to improve rendering efficiency, but it will occupy more memory. If the source Item has a dynamic effect, we recommend that you disable cache.

The Blend element is an Item. You can use anchors to layout it, or use x, y, width, and height to adjust its size and position.

The following is the sample code in Qt help:

import QtQuick 2.2import QtGraphicalEffects 1.0Item {    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"    }}

As shown in the Code, the Blend object specifies the source, foregroundSource, and mode attributes.

Have you noticed the anchors. fill attribute? The result is that the Blend element occupies the position of the bug and is full of it. The Blend object can also be defined as follows:

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

It is worth mentioning that, if you use the anchor layout to locate the Blend object, the anchor-defined Item must be the parent or brother of the Blend object.

As you can see, the sample code sets the visible attribute of bug and butterfly to false, which is not required. If we regard the Blend element as the element after the combination of source and foregroundSource according to the mode, it will be much easier to understand. Blend, source, and foregroundSource are three logically independent elements. You can manipulate them at will. Their positions and visible attributes have no influence on each other.

Blend example

BlendExample. qml demonstrates various mixed modes. As follows:

Figure 1 mixed sample

As shown in 1, the interface is divided into two parts. The top is the original image, and the bottom is the mixed effect.

I use a ListView to display all the mixed modes supported by Blend. The mixed results are displayed on the right of the ListView. When an entry in the ListView is selected, the mode attribute of Blend is dynamically changed, blend will re-mix the two source items, and we can see the new mixed effect.

The following is BlendExample. qml:

import QtQuick 2.2import QtGraphicalEffects 1.0import QtQuick.Controls 1.2Rectangle {    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";        }    }}

Analyze the code.

Return

Figure 1 there is a "Back" button in the upper-right corner. After you click it, a back () signal is sent. The back signal is used to notify the main. qml mentioned in "Graph effect (1) In Qt Quick": the user will return the result from the current example. When main. qml receives the back signal, it will destroy the dynamically created sample component.

In the future, we will see examples of ColorExample and so on designed for a certain type of effects, all using the same policy.

Hybrid

The mixed mode list is displayed using ListView. ListElement has only one role -- name, and its value is the name of the mixed mode. When you click an entry in the list, the onClicked signal processor of the delegate MouseArea changes the mode attribute of the Blend element.

Okay. This time, let's take a look at the effect of each mixed mode. Next time, we will introduce the Color effect.

Blog Star Selection, click to vote for me, thank you. You can also vote once. You can vote every day.

--------

Let's review my Qt Quick series of articles:

Qt Quick introduction QML language basics Qt Quick Hello World graphic explanation Qt Quick simple tutorial Qt Quick event processing signal and slot Qt Quick event processing mouse, keyboard, Timer Qt Quick event processing zooming, zooming, and rotating
Dynamic Creation of Qt Quick components and objects
Introduction to Qt Quick layout QML and C ++ mixed programming of Qt Quick image processing instance meitu xiuxiu (source code download) qt Quick PathView explanation Qt Quick instance digging Avatar Qt Quick integrated instance File Viewer Qt Quick debugging display code line number Qt Quick implementation of the graffiti program Qt Quick play GIF animation Qt Quick drag and drop) the use of AnimatedSprite in Qt Quick the use of the particle system Qt Quick in Qt Quick to achieve the crazy arithmetic game Qt Quick graphics effect (Graphical Effects)