Graphical effects in Qt quick (graphical effects)

QT Quick provides graphical Effects, which I'm limited to in the book "QT Quick Core programming ", which I'll cover here.

Graphical effects, let's just be called graphic effects. It offers several types of effects, such as Blend, Color, and many different effects under some categories, to describe the length of the complete need. Let's look at it one by one.

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.

Brief description

Let's see what kind of graphic effects you have (graphical effects):

• Blend, blend. There is only one type of--blend, using a blending mode to merge two source items.
• Color, which produces a variety of effects by changing the color of an Item. There are several types:
• Brightnesscontrast, adjust brightness and contrast
• Coloroverlay, covering a layer of color on the source Item
• Colorize, set the HSL color space for the source Item
• Desaturate, reduce the saturation of the color
• Gammaadjust, use gamma curves to change the illumination of the source Item
• Huesaturation, changing the color of the source Item in the HSL color space
• Leveladjust, adjusts the color level of the source Item in the RGBA color space
• Gradient, gradient. There are several types:
• Conicalgradient, tapered gradient
• LinearGradient, linear gradient
• Radialgradient, radial gradient
• Distortion, deformed. Only one type--displace, changing the pixel of the source Item according to the given displacement map
  
• Drop Shadow, projection. There are two types of:
• DropShadow, generates a colored, blurred shadow image from the source item, and puts it behind the original image, resulting in a raised effect on the background of the source item
• Innershadow, produces a colored, blurred image in the source Item
• Blur, Fuzzy. There are several types:
  
• Fastblur, fast Blur
• Gaussianblur, Gaussian Blur
• Maskedblur, differentiated blur, can produce different intensities of fuzzy effects on different areas of the source Item based on a mask element
• Recursiveblur, recursive blur. A strong fuzzy effect is produced by repeated blurring.
• Motion Blur, movement blur. There are several types:
  
• Directionalblur, directional blur, produces a blur effect in the specified direction
• Radialblur, radial blur, applying directional blur within a circle centered around the center point of the source Item
• Zoomblur, scaling blur, applying directional blur toward the center point of the source Item
• Glow, glowing. There are several types:
• Glow, generates a colored, blurred glow image from the source item, and puts it behind the source item, producing a source item in the glowing effect.
• Rectangularglow, creating a blurred, colored rectangle that gives a glowing impression
• Mask, mask. There are several types:
  
• OpacityMask, transparent matte. Mask the source item with another item
• Thresholdmask, Threshold Matte. Block the source item with another item and apply the occlusion effect based on a threshold value

Sample Project

I designed an example to demonstrate all the graphic effects, which is a Qt Quick App project. The following is the first page after the example is run:

Figure 1 Example Home

Let's take a look at the structure of the sample project in conjunction with this diagram.

1, the middle of the home page is a list of all the graphic effects categories.

There are two buttons to the right of the bottom of the interface, and the Load Examples button is used to load an example of the selected graphic effect. "Quit" is the exit.

Source

The source of the home page in the MAIN.QML:

Import QtQuick 2.2import Qtquick.window 2.1import qtquick.controls 1.2Window {id:appwin;    Visible:true;    width:640;    height:640;    minimumwidth:640;    minimumheight:640;    Color: "Lightgray";    property Var Currentexample:null;        Text {id:clue;        Text: "Graphical Effects Examples";        Anchors.top:parent.top;        Anchors.left:parent.left;        Anchors.margins:4;        font.pointsize:24;    Font.bold:true;        } rectangle{Anchors.left:clue.left;        Anchors.right:parent.right;        Anchors.rightmargin:4;        Anchors.top:clue.bottom;        Height:2;        Border.width:1;    Border.color: "Darkgray";        } Component {id:exampledelegate;            Rectangle {id:wrapper;            Width:parent.width;            height:40;            Color: "Transparent";                Text {anchors.fill:parent;                Text:name; Color:wrapper. Listview.iscurrentitEm?                "Blue": "Steelblue";                font.pointsize:20;            VerticalAlignment:Text.AlignVCenter;                } mousearea {anchors.fill:parent; OnClicked: {wrapper.                ListView.view.currentIndex = index;        }}}} ListView {id:examples;        Anchors.bottom:quit.top;        Anchors.top:clue.bottom;        Anchors.left:parent.left;        Anchors.right:parent.right;        Anchors.margins:8;        Clip:true;        Delegate:exampledelegate;            Highlight:rectangle {color: "LightBlue";        Width:parent.width;                } model:listmodel {listelement {name: "Blend";            Example: "BLENDEXAMPLE.QML";                } listelement {name: "Color";            Example: "COLOREXAMPLE.QML";                } listelement {name: "Gradient"; EXample: "GRADIENTEXAMPLE.QML";                } listelement {name: "Distortion";            Example: "DISTORTIONEXAMPLE.QML";                } listelement {name: "Drop Shadow";            Example: "DROPSHADOWEXAMPLE.QML";                } listelement {name: "Blur";            Example: "BLUREXAMPLE.QML";                } listelement {name: "Motion Blur";            Example: "MOTIONBLUREXAMPLE.QML";                } listelement {name: "Glow";            Example: "GLOWEXAMPLE.QML";                } listelement {name: "Mask";            Example: "MASKEXAMPLE.QML";        }}} Button {id:load;        Text: "Load Examples";        Anchors.right:quit.left;        Anchors.top:quit.top;        Anchors.rightmargin:8;       OnClicked: {var data = Examples.model.get (Examples.currentindex);     Console.log ("Example:", data.example);            var comp = qt.createcomponent (data.example); if (Comp.status = = Component.ready) {appwin.currentexample = Comp.createobject (Appwin, {"Color": Appwin.col                or});            AppWin.currentExample.back.connect (appwin.closecurrentexample);        }}} Button {id:quit;        Text: "Quit";        Anchors.bottom:parent.bottom;        Anchors.right:parent.right;        Anchors.margins:8;    OnClicked:Qt.quit ();    } function Closecurrentexample () {Currentexample.destroy (); }}

Source code is relatively simple, from the design to explain.

List view

The ListView lists all the graphic effects.

Exampledelegate This component is used to draw an Item in the ListView. It accepts and handles mouse events, changes the current item of the ListView, and changes the text display effect of the current item.

Listmodel is very simple, just use listelement to list the names of all graphical effects (role name) and the corresponding sample document (the role name is example), and in delegate we can access the data in the Model through the role name.

This is the ListView: View + model + delegate, very flexible. For more detailed usage, you can refer to my book, "Qt Quick Core Programming ", which has a super-detailed introduction to the ListView.

Dynamically loading graphics effects

I have provided a separate presentation interface for each type of graphic effect, and in Listmodel, example this role holds the name of the corresponding example QML document. When the user clicks on the "Load Examples" button, I get the current Item to the ListView, pull the data through the Model, access the example role, get the actual QML document name, and then use Qt.createcomponent () and Com Ponent.createobject () to load the QML document and build the sample component.

Well, this time I'll introduce you to this, and next time we'll show you the blending effect .

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
• The graphic effect of Qt quick-blend (blend)

Graphical effects in Qt quick (graphical effects)