CODEWITHSUNDEEP
javascriptqtqml
Aquarius_Girl
Aquarius_Girl

Reputation: 22906

How to use PathCubic in QML?

https://doc.qt.io/qt-5/qml-qtquick-pathcubic.html

The following code is from the above link but it does not show any line when executed. All I see is red rectangle. Point point out the fault.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        height: 300; width: 300
        x: 10; y: 10
        color: "red"
        Path
        {
            startX: 20; startY: 0
            PathCubic {
                x: 180; y: 0
                control1X: -10; control1Y: 90
                control2X: 210; control2Y: 90
            }
        }
    }
}

Upvotes: 1

Views: 180

Answers (1)

eyllanesc
eyllanesc

Reputation: 243907

Path is not a visual element but a class that defines the paths, that is, a class that handles the instructions (PathLine, PathPolyline, PathCubic, etc).

So if you want to visualize the PathCubic instruction using a Shape, Canvas, etc:

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Shapes 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        height: 300; width: 300
        x: 10; y: 10
        color: "red"
        Shape {
            anchors.fill: parent
            ShapePath {
                strokeWidth: 4
                strokeColor: "blue"
                fillColor: "transparent"
                startX: 20; startY: 0
                PathCubic {
                    x: 180; y: 0
                    control1X: -10; control1Y: 90
                    control2X: 210; control2Y: 90
                }
            }
        }
    }
}

Upvotes: 1

Related Questions