Let There Be More Shapes!
August 10, 2017 by Laszlo Agocs | Comments
As a follow-up to the previous post about the upcoming new Shape element, I am happy to share that the feature set is going to be bigger than previously expected, and this applies already to the upcoming 5.10 release of Qt.
The initial version of the Shape type only had support for linear gradients. The internal and external feedback indicated however that this felt rather incomplete without radial and conical gradients (especially in the light of these being fully supported by QPainter, meaning the fragment shaders doing the heavy lifting were already available, needing only minor adaptation work). The good news is that the patches for RadialGradient and ConicalGradient are now all merged. (follow the links for doc snapshots, note that these are under QtQuick.Shapes 1.0, not to be confused with the similarly named types in QtGraphicalEffects)
Let's see these in action! It is by the way worth noting that the code snippets shown in this and the previous post can all be found at this repository.
1. Radial gradient
Shape {
id: radGradCirc
anchors.fill: parent
property real r: 60
ShapePath {
strokeWidth: 4
strokeColor: "red"
fillGradient: RadialGradient {
centerX: 100; centerY: 100; centerRadius: 100
SequentialAnimation on focalRadius { ... }
SequentialAnimation on focalX { ... }
SequentialAnimation on focalY { ... }
GradientStop { position: 0; color: "#ffffff" }
GradientStop { position: 0.11; color: "#f9ffa0" }
GradientStop { position: 0.13; color: "#f9ff99" }
GradientStop { position: 0.14; color: "#f3ff86" }
GradientStop { position: 0.49; color: "#93b353" }
GradientStop { position: 0.87; color: "#264619" }
GradientStop { position: 0.96; color: "#0c1306" }
GradientStop { position: 1; color: "#000000" }
}
strokeStyle: ShapePath.DashLine
dashPattern: [ 1, 4 ]
startX: radGradCirc.width / 2 - radGradCirc.r
startY: radGradCirc.height / 2 - radGradCirc.r
PathArc {
x: radGradCirc.width / 2 + radGradCirc.r
y: radGradCirc.height / 2 + radGradCirc.r
radiusX: radGradCirc.r; radiusY: radGradCirc.r
useLargeArc: true
}
PathArc {
x: radGradCirc.width / 2 - radGradCirc.r
y: radGradCirc.height / 2 - radGradCirc.r
radiusX: radGradCirc.r; radiusY: radGradCirc.r
useLargeArc: true
}
}
}
2. Conical gradient
Shape {
id: conGradCirc
anchors.fill: parent
property real r: 60
ShapePath {
strokeWidth: 4
strokeColor: "black"
fillGradient: ConicalGradient {
centerX: 100; centerY: 100
NumberAnimation on angle { ... }
GradientStop { position: 0; color: "#00000000" }
GradientStop { position: 0.10; color: "#ffe0cc73" }
GradientStop { position: 0.17; color: "#ffc6a006" }
GradientStop { position: 0.46; color: "#ff600659" }
GradientStop { position: 0.72; color: "#ff0680ac" }
GradientStop { position: 0.92; color: "#ffb9d9e6" }
GradientStop { position: 1.00; color: "#00000000" }
}
// ... the actual shape is the same as in the previous example
}
}
Blog Topics:
Comments
Subscribe to our newsletter
Subscribe Newsletter
Try Qt 6.7 Now!
Download the latest release here: www.qt.io/download.
Qt 6.7 focuses on the expansion of supported platforms and industry standards. This makes code written with Qt more sustainable and brings more value in Qt as a long-term investment.
We're Hiring
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.