Graph effects in Qt Quick-Gradient and quickgradient

Graph effects in Qt Quick-Gradient and quickgradient
Qt Quick provides three gradient graphs:

• ConicalGradient, conical gradient
• LinearGradient, linear gradient
• RadialGradient, radial gradient

Effect

Is an example of my design:

Figure 1 gradient chart Effect

, The first behavior linear gradient, the second behavior conical gradient, the third behavior radial gradient.

The gradient element differs from other graphic effect elements in that the gradient element can be used to change an existing element (such as Image) or used independently. As you can see in the example, the first two of each line use the gradient element independently, and the last two are about the gradient effect applied to other elements.

Source code

The gradient effect is relatively simple. All examples are put in a qml document -- GradientExample. qml --. The content is as follows:

import QtQuick 2.2import QtGraphicalEffects 1.0import QtQuick.Controls 1.2Rectangle {    id: example;    anchors.fill: parent;    signal back();    Button {        anchors.right: parent.right;        anchors.top: parent.top;        anchors.margins: 4;        text: "Back";        onClicked: example.back();    }    Text {        id: linearLabel;        anchors.left: parent.left;        anchors.top: parent.top;        anchors.margins: 4;        text: "LinearGradient";        font.bold: true;    }    Row {        id: linears;        anchors.left: parent.left;        anchors.top: linearLabel.bottom;        anchors.margins: 4;        spacing: 8;        LinearGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#80222222";}                GradientStop{ position: 0.9; color: "#FFFFFFFF";}            }            start: Qt.point(0, 0);            end: Qt.point(0, 180);        }        LinearGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#FFFF0000";}                GradientStop{ position: 0.3; color: "#FFFFA000";}                GradientStop{ position: 0.5; color: "#A0FF4000";}                GradientStop{ position: 1.0; color: "#FF800FFF";}            }            start: Qt.point(0, 0);            end: Qt.point(80, 180);        }        Image {            id: butterfly;            source: "butterfly.png";            width: 180;            height: 180;            smooth: true;            sourceSize: Qt.size(180, 180);        }        LinearGradient {            source: butterfly;            width: 180;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#222222";}                GradientStop{ position: 0.9; color: "#F8884F";}            }            start: Qt.point(0, 0);            end: Qt.point(180, 180);        }    }    Text {        id: conicalLabel;        anchors.left: parent.left;        anchors.top: linears.bottom;        anchors.margins: 4;        text: "ConicalGradient";        font.bold: true;    }    Row {        id: conicals;        anchors.left: parent.left;        anchors.top: conicalLabel.bottom;        anchors.margins: 4;        spacing: 8;        ConicalGradient {            width: 100;            height: 180;            angle: 45;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#80222222";}                GradientStop{ position: 0.9; color: "#FFFFFFFF";}            }        }        ConicalGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#FFFF0000";}                GradientStop{ position: 0.3; color: "#FFFFA000";}                GradientStop{ position: 0.5; color: "#A0FF4000";}                GradientStop{ position: 1.0; color: "#FF800FFF";}            }            horizontalOffset: 20;            verticalOffset: 40;        }        Image {            id: conicalOrig;            source: "butterfly.png";            width: 180;            height: 180;            smooth: true;            sourceSize: Qt.size(180, 180);        }        ConicalGradient {            source: conicalOrig;            width: 180;            height: 180;            angle: 60;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#A22222";}                GradientStop{ position: 0.9; color: "#2888F4";}            }        }    }    Text {        id: radialLabel;        anchors.left: parent.left;        anchors.top: conicals.bottom;        anchors.margins: 4;        text: "RadialGradient";        font.bold: true;    }    Row {        id: radials;        anchors.left: parent.left;        anchors.top: radialLabel.bottom;        anchors.margins: 4;        spacing: 8;        RadialGradient {            width: 100;            height: 180;            angle: 60;            horizontalRadius: 50;            verticalRadius: 90;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#222222";}                GradientStop{ position: 0.9; color: "#00FF0F";}            }        }        RadialGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#FFFF0000";}                GradientStop{ position: 0.3; color: "#FFFFA000";}                GradientStop{ position: 0.5; color: "#A0FF4000";}                GradientStop{ position: 1.0; color: "#FF800FFF";}            }            horizontalOffset: 20;            horizontalRadius: 40;            verticalRadius: 40;            verticalOffset: 40;        }        Image {            id: radialOrig;            source: "butterfly.png";            width: 180;            height: 180;            smooth: true;            sourceSize: Qt.size(180, 180);        }        RadialGradient {            source: radialOrig;            width: 180;            height: 180;            angle: 120;            horizontalRadius: 40;            verticalRadius: 80;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#A22222";}                GradientStop{ position: 1.0; color: "#2888F4";}            }        }    }}

GradientExample. qml is dynamically loaded by the sample framework (see Graphical Effects in Qt Quick). It uses three Row locators to layout each small example. Next we will briefly introduce each gradient element.

LinearGradient

LinearGradient has the following attributes:

• Cached, Boolean value, indicating whether to cache
• Start: Specifies the position at which the gradient starts. It works with end and has a point type. You can use Qt. the point () method assigns a value to it, or uses the string form "x, y" to assign a value to it, such as "0,180", which is equivalent to Qt. point (0,180)
• End: Specifies the position at which the gradient ends, and works with start.
• Gradient, Gradient type value, specifies gradient. The Gradient class defines a Gradient. It has only one stops attribute, which is a list attribute. The object type in the list is GradientStop. GradientStop assumes that the gradient path starts from 0.0 to 1.0 and ends. It has two attributes: position, which specifies a point in the gradient path, and color, which specifies the color of the point. A Gradient can contain multiple GradientStop.
• Source. This attribute specifies the source element to be applied to the gradient element. For example, if you want to change an Image with a gradient, specify source as the id of the Image. If you do not specify this parameter, the gradient element uses gradient to draw an element.

With the above introduction, let's look at the example:

        LinearGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#80222222";}                GradientStop{ position: 0.9; color: "#FFFFFFFF";}            }            start: Qt.point(0, 0);            end: Qt.point(0, 180) ;        }

LinearGradient is the derived class of the Item. I set the width and height attributes inherited from the Item. Other attributes have been introduced. You can see them by comparison, the effect is the graph on the left of the first line in Figure 1.

The following code specifies an Image object for the source attribute:

        Image {            id: butterfly;            source: "butterfly.png";            width: 180;            height: 180;            smooth: true;            sourceSize: Qt.size(180, 180);        }        LinearGradient {            source: butterfly;            width: 180;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#222222";}                GradientStop{ position: 0.9; color: "#F8884F";}            }            start: Qt.point(0, 0);            end: Qt.point(180, 180);        }

As you can see, we use Image to display an Image: butterfly.png. Use LinearGradient to generate a new element that overlays the gradient effect. This is worth noting. When we specify the source attribute for LinearGradient, Qt Quick will apply the gradient effect on the element specified by source to generate a new element, the original object will not be changed.

ConicalGradient

ConicalGradient has the following attributes:

• Angle, real type, specifies the starting angle of the gradient, note that it is degrees, 45 °, 180 °, not radians. The color at 0.0 of the Gradient start point in the Gradient attribute corresponds to this angle. When the Gradient is applied in clockwise direction, the color in Gradient also changes to the 1.0 position as the angle increases.
• Cached.
• Gradient.
• HorizontalOffset, real type, horizontal offset from the center point
• VerticalOffset, real type, vertical offset from the center point
• The source attribute has the same meaning as the source attribute of LinearGradient.

RadialGradient

RadialGradient is the most complex gradient element and has the following attributes:

• Angle: Specifies the gradient relative to the centerRotation AngleNote: This is different from the angle attribute of ConicalGradient.
• Cached, omitted
• Gradient, omitted
• HorizontalOffset, which belongs to the real type and has the same meaning as that of ConicalGradient.
• VerticalOffset, similar to ConicalGradient's attribute of the same name
• HorizontalRadius, real type, specifies the horizontal radius,
• VerticalRadius: Specifies the verticalRadius of the real type and combines it with horizontalRadius to define an ellipse.
• Source, omitted

Let's take a look at the complete sample code above.

--------

Let's review my Qt Quick series of articles:

• Qt Quick introduction
• QML language basics
• Qt Quick's Hello World graphic explanation
• Simple Qt Quick tutorial
• Signal and slot of Qt Quick event processing
• Qt Quick event processing-mouse, keyboard, and Timer
• Qt Quick event processing-pinch, zoom, and rotate
  
• Dynamic Creation of Qt Quick components and objects
  
• Introduction to Qt Quick Layout
• QML and C ++ mixed programming in Qt Quick
• Qt Quick image processing instance meitu xiuxiu (source code download)
• Explanation of Qt Quick PathView
• Picture digging for Qt Quick instances
• Qt Quick integrated instance File Viewer
• Display the code line number for Qt Quick debugging
• Graffiti program implemented by Qt Quick
• Play GIF animation with Qt Quick
• Drag and drop In Qt Quick (drag and drop)
• Use of AnimatedSprite in Qt Quick
• Particle System in Qt Quick
• Crazy arithmetic game implemented by Qt Quick
• Graph effects in Qt Quick-Blend)
• Graph effect in Qt Quick-Color)