The graphic effect of Qt quick-blend (blend)

The blend element mixes two items with the specified pattern. When we use the Qpainter drawing, the composition Modes is supported, and the work of Blend is similar.

Using Blend requires:

Import Qtgraphicaleffects 1.0

Blog Star selection, Click Vote me a vote, thank you . If you have voted, you can also point oh, every day can cast a vote.

Introduction to blend elements

Blend is a derived class of Item and has the following properties:

• Source, specifying the feed item
• Foregroundsource, specifying the source as the foreground Item
• mode, a string that specifies the blending mode to use
• Cached, Boolean variable with the default value of FALSE. Set to True to cache the image of the output, which increases rendering efficiency, but consumes more memory. It is recommended to disable cache if the source Item has a dynamic effect.

The Blend element itself is an Item, you can use anchors to lay it out, or you can adjust its size and position using X, y, width, height, and so on.

Here is the sample code in the 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, mode three properties.

Notice the Anchors.fill property, which has the effect that the Blend element occupies the location of the bug and fills it. That's actually true when you define a Blend object:

    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 an anchor layout to locate a blend object, the Item it anchors must be the parent or sibling of blend.

As you can see, the sample code sets the Visible property of the bug and butterfly to False, which is not required. It would be much easier to understand if we were to think of the blend element as source and foregroundsource the element after the mode was mixed. Blend, source, and Foregroundsource are three logically independent elements, and you can manipulate them arbitrarily, with no effect on their location, visible properties, and so on.

Blend example

BLENDEXAMPLE.QML demonstrates a variety of blending modes. As follows:

Figure 1 Hybrid Example

1, the interface is divided into two parts, the top is the original picture, the bottom is the blending effect.

I use a ListView to show all the blending modes supported by blend, show mixed results on the right side of the ListView, change the Mode property of the blend dynamically when the item in the ListView is selected, and blend will remix the two source Item, and we'll see The new blend effect.

Here 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"; }    }}

Simply analyze the code.

Return

Figure 1 There is a "back" button in the upper-right corner, which will emit a rear () signal when clicked. The back signal is used to inform us of the main.qml mentioned in "The graphics effect in Qt quick (1)": The user is returning from the current example. When the MAIN.QML receives the back signal, it destroys the dynamically created sample component.

We'll see colorexample later. The same strategy is used for an example of a type of effect design.

Mixed

The Mixed Mode list uses the ListView display, Listelement has only one character--name, and its value is the name of the blending mode. When the user clicks on an entry in the list, delegate's Mousearea onclicked signal processor Changes the Mode property of the Blend element.

Well, this time, here, how about each blend mode effect, and also run the sample to actually look at it. We'll introduce the color effect next time.

Blog Star selection, Click Vote me a vote, thank you . If you have voted, you can also point oh, every day can cast a vote.

--------

Look back at my QT Quick Series articles:

• About Qt Quick
• QML Language Basics
• Qt Quick's Hello World text
• Qt Quick Simple Tutorial
• The signal and slot of Qt Quick event processing
• Qt Quick Event Processing mouse, keyboard, timer
• Pinch scaling and rotation of Qt Quick event processing
  
• Qt Quick component and Object dynamic creation
  
• Introduction to Qt Quick layout
• Qt Quick's QML and C + + mixed programming
• Qt Quick Image Processing example of beauty 美图秀秀 (with source download)
• Qt Quick's Pathview detailed
• Qt Quick Example Digging avatar
• A file viewer for the Qt quick Synthesis instance
• QT Quick Debug Display code line number
• Qt Quick implementation of graffiti program
• Qt Quick Play GIF animation
• Drag and drop in Qt Quick (drag and drop)
• The use of Animatedsprite in Qt quick
• The particle system in Qt quick
• Qt Quick implements the crazy arithmetic game
• Graphical effects in Qt quick (graphical effects)

The graphic effect of Qt quick-blend (blend)