Question

我正在用QML画布绘制圆弧。

这是我的代码：

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()
        }
    }
}

这画了我一些像未填充圆角（圆边界）的东西。我想绘制完全相同的东西，但是我想像z坐标一样旋转它，以便看起来像站立并在画在地板上的圆上看。

我该怎么做？

（imgur将开始使用stackoverflow之后，我将提供图像）

感谢您的帮助

//编辑：临时图像链接（由于上传错误）

我有这个

我想要这个

Answer 1

如果要在多个轴上旋转，则必须将Rotation传递到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()
        }
    }
}

在QML Canvas中转换2D上下文

1 个答案: