qtqmlqt-creatorqtquick2qtquickcontrols

How to create a Progress Bar in Qml with slant lines?

enter image description here

Hello ,

I am looking for some solution to create a progress bar in qml having slant lines.

I dont having any snippet to share here, as I am not aware how to do so.

Can anyone please guide ??

Solution

  • Yet another solution.

    enter image description here

    ProgressBar {
    id: control

    property color contentItemColor: "white"
    property color backgroundColor: "yellow"
    property color borderColor: "red"
    property int borderWidth: 1
    property color stripColor: "green"
    property int stripGap: 10
    property int stripWidth: 2
    property color indicatorColor: "red"
    property int indicatorWidth: 2
    property int indicatorRadius: 0
    property int indicatorExtend: 0

    value: 0.5
    width: 600
    height: 80

    background: Rectangle {
        color: control.backgroundColor
        border.width: control.borderWidth
        border.color: control.borderColor

        Canvas {
            x: control.borderWidth
            y: control.borderWidth
            width: control.width - (2 * control.borderWidth)
            height: control.height - (2 * control.borderWidth)

            onPaint: {
                var ctx = getContext("2d");
                ctx.strokeStyle = control.stripColor
                ctx.lineWidth = control.stripWidth
                ctx.lineCap = "square"

                var p1, p2

                let n = Math.ceil((control.width + control.height) / (control.stripGap)) + 1

                for (let i = 0; i != n; ++i) {
                    let p = i * control.stripGap
                    p1 = Qt.vector2d(p - control.height, 0)
                    p2 = Qt.vector2d(p, control.height)

                    ctx.beginPath()
                    ctx.moveTo(p1.x, p1.y)
                    ctx.lineTo(p2.x, p2.y)
                    ctx.closePath()
                    ctx.stroke()
                }
            }
        }
    }

    contentItem: Item {
        Rectangle {
            anchors.fill: parent
            anchors.margins: control.borderWidth
            anchors.leftMargin: Math.max(control.borderWidth,
                                         control.visualPosition * control.width)

            color: control.contentItemColor
        }

        Rectangle {
            x: control.visualPosition * control.width - (control.indicatorWidth / 2)
            y: -control.indicatorExtend
            width: control.indicatorWidth
            height: control.height + (2 * control.indicatorExtend)
            color: control.indicatorColor
            radius: control.indicatorRadius
            visible: control.visualPosition > 0.0 && control.visualPosition < 1.0
        }
    }
}