在 QML Canvas 中转换 2D 上下文答案

【问题标题】：Transform 2D context in QML Canvas在 QML Canvas 中转换 2D 上下文
【发布时间】：2018-08-08 00:30:00
【问题描述】：

我正在用 QML Canvas 画圆弧。

这是我的代码：

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 后，我会提供图片）

感谢您的帮助

//编辑：临时图片链接（因为上传错误）

我有这个

我想要这个

【问题讨论】：

你想要的不是很清楚，你可以展示你想要得到的图像。
@eyllanesc 我会，但是从 stackoverflow 上传的 Imgur 不起作用
直接上传到imgur，把链接分享到cmets然后我试试放上去。
@eyllanesc 我直接将其添加到问题中:)
你的代码不会生成我，你可以放置一个有效的代码，有未定义的属性。

标签： qt canvas qml qt5

【解决方案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()
        }
    }
}

【讨论】：