Transform 2D context in QML Canvas

debugcn Published at Dev

Brykyz

I am drawing part arc in circle with QML Canvas.

This is my code:

import QtQuick 2.0
import QtQml 2.2
Item {
id: root
property real arcAzimuth: 0
property real arcAngle: 80
property string arcColor: "red"
rotation: - (arcAngle / 4)
onArcColorChanged: canvas.requestPaint()
onArcAngleChanged: canvas.requestPaint()


    Canvas {
        id: canvas
        anchors.fill: parent
        rotation: -90 + parent.rotation

        onPaint: {
            var ctx = getContext("2d")
            var x = width / 2
            var y = height / 2
            var start = Math.PI * (parent.arcAzimuth / 180)
            var end = Math.PI * ((parent.arcAzimuth + parent.arcAngle) / 180)
            ctx.reset()
            ctx.beginPath();
            ctx.lineWidth = 8
            ctx.arc(x, y, (width / 2) - ctx.lineWidth / 2, start, end, false)
            ctx.strokeStyle = root.arcColor
            ctx.stroke()
        }
    }
}

This draws me something like angle of unfilled circle (border of circle). I want to draw exact same thing, but I want to rotate this by something like z coord so it will look like standing and looking on circle that is painted on floor.

How can I do this?

(After imgur will start working with stackoverflow, i will provide images)

Thank for your help

//Edit: Temporaly images links (because of error with uploading)

I have got this

and I want this

eyllanesc

If you want to obtain a rotation in several axes you must pass a Rotation to transform:

import QtQuick 2.0
import QtQml 2.2
Item {
    id: root
    property real arcAzimuth: 0
    property real arcAngle: 80
    property string arcColor: "red"
    rotation: - (arcAngle / 4)
    onArcColorChanged: canvas.requestPaint()
    onArcAngleChanged: canvas.requestPaint()

    Canvas {
        id: canvas
        anchors.fill: parent
        transform: Rotation{
             axis { x: 0; y: 0.8; z: 1.0 }
             angle: 225 + parent.rotation
        }
        onPaint: {
            var ctx = getContext("2d")
            var x = width / 2
            var y = height / 2
            var start = Math.PI * (parent.arcAzimuth / 180)
            var end = 2*Math.PI * ((parent.arcAzimuth + parent.arcAngle) / 180)
            ctx.reset()
            ctx.beginPath();
            ctx.lineWidth = 8
            ctx.arc(x, y, (width / 2) - ctx.lineWidth / 2, start, end, false)
            ctx.strokeStyle = root.arcColor
            ctx.stroke()
        }
    }
}