Laszlo Agocs

Let There Be More Shapes!

Published Thursday August 10th, 2017
7 Comments on Let There Be More Shapes!
Posted in Declarative UI, Dev Loop, Graphics, Qt Quick

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

qmlshapedemo_radial

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

qmlshapedemo_conical

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
    }
}
Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Declarative UI, Dev Loop, Graphics, Qt Quick

7 comments

Arthur Turrini says:

It’s a very nice addition, just in time!
Great post Thank you, Digia!

Laszlo Agocs Laszlo Agocs says:

Thanks! BTW it is called The Qt Company nowadays, not Digia. ๐Ÿ™‚

Arthur Turrini says:

Sorry! ๐Ÿ˜€

Alexander says:

Excellent, I love it! Can’t wait for Qt 5.10. This and WebGL streaming will make my Fall fantastic.

Jean-Michaรซl Celerier says:

A great thing to have would be a way to get compatibility with JS SVG manipulation libs: for instance http://dmitrybaranovskiy.github.io/raphael/ ; http://snapsvg.io/ ; http://svgjs.com/ ; http://velocityjs.org/ … Even if it means a performance hit, sometimes it’s better to have something slow that nothing at all !

Jean-Michaรซl Celerier says:

And, of course, of course: please provide a C++ API for this, like QQuickShapeItem or something. Desperately need something to replace QGraphicsItem (and QQuickPaintedItem is just way too slow)

const says:

it’s strange that class named Shape deals with appearance.
in the past Cosmo3D scene graph had 2 nodes: Shape and Appearance. the Shape was like osg::Geode

Commenting closed.

Get started today with Qt Download now