RadialGradient QML Type

Radial gradient. More...

Import Statement: import QtQuick.Shapes 1.0
Since: Qt 5.10
Inherits:

ShapeGradient

Properties

Detailed Description

Radial gradients interpolate colors between a focal circle and a center circle in Shape items. Points outside the cone defined by the two circles will be transparent.

Outside the end points the gradient is either padded, reflected or repeated depending on the spread type.

Below is an example of a simple radial gradient. Here the colors are interpolated between the specified point and the end points on a circle specified by the radius:

fillGradient: RadialGradient {
    centerX: 50; centerY: 50
    centerRadius: 100
    focalX: centerX; focalY: centerY
    GradientStop { position: 0; color: "blue" }
    GradientStop { position: 0.2; color: "green" }
    GradientStop { position: 0.4; color: "red" }
    GradientStop { position: 0.6; color: "yellow" }
    GradientStop { position: 1; color: "cyan" }
}

Extended radial gradients, where a separate focal circle is specified, are also supported.

Note: RadialGradient is only supported in combination with Shape items. It is not compatible with Rectangle, as that only supports Gradient.

See also QRadialGradient.

Property Documentation

centerRadius : real

These properties define the center and focal radius. For simple radial gradients, focalRadius should be set to 0 (the default value).


centerX : real

These properties define the center and focal points. To specify a simple radial gradient, set focalX and focalY to the value of centerX and centerY, respectively.


centerY : real

These properties define the center and focal points. To specify a simple radial gradient, set focalX and focalY to the value of centerX and centerY, respectively.


focalRadius : real

These properties define the center and focal radius. For simple radial gradients, focalRadius should be set to 0 (the default value).


focalX : real

These properties define the center and focal points. To specify a simple radial gradient, set focalX and focalY to the value of centerX and centerY, respectively.


focalY : real

These properties define the center and focal points. To specify a simple radial gradient, set focalX and focalY to the value of centerX and centerY, respectively.


© 2017 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.