C

Qt Quick Ultralite shapes Example

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuick.Shapes 1.0

ShapesEntry {
    id: root
    text: "Quadratic curve\nwith gradient"

    Rectangle {
        color: "lightGray"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: root.contentMargins
        width: root.contentHeight
        height: root.contentHeight

        Shape {
            id: shape
            width: parent.width
            height: 100
            anchors.verticalCenter: parent.verticalCenter

            ShapePath {
                strokeWidth: 4 * root.shapeScale
                strokeColor: "black"
                fillGradient: LinearGradient {
                    x1: 50 * root.shapeScale
                    y1: 100 * root.shapeScale
                    x2: (50 + pathQuad.controlX) * root.shapeScale / 2
                    y2: 50 * root.shapeScale

                    GradientStop {
                        position: 0
                        color: "#ffffffaa"
                    }

                    GradientStop {
                        position: 1
                        color: "#ffff7788"
                    }
                }

                startX: 50 * root.shapeScale
                startY: 100 * root.shapeScale
                closed: true
                PathQuad {
                    id: pathQuad
                    x: 150 * root.shapeScale
                    y: 100 * root.shapeScale
                    controlX: cp.x; controlY: cp.y
                }
            }
        }

        Rectangle {
            id: cp
            color: "red"
            width: 10
            height: 10
            SequentialAnimation on x {
                loops: Animation.Infinite
                running: true
                NumberAnimation {
                    from: 0
                    to: shape.width - cp.width
                    duration: 5000
                }
                NumberAnimation {
                    from: shape.width - cp.width
                    to: 0
                    duration: 5000
                }
            }
        }
    }
}