获取点中元素的颜色 | 质量管理语言

Question

我能够使用矩形元素在 QML 中编写“色轮”：

现在我想知道如何获取处理程序位置的颜色。
我已经看到用画布应该可以实现，但是可能有更好的解决方案吗？
这里是代码：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

Item
{
    id: colorWheel
    Rectangle
    {
        id: ring
        color: "transparent"
        implicitWidth: 80
        implicitHeight: implicitWidth

        width: parent.width < parent.height ? parent.width : parent.height
        height: width
        radius: width / 2
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        border.width: width / 15
        property double wheelRadius: ring.width / 2 - border.width /2

        ConicalGradient
        {
            source: parent
            anchors.fill: parent
            gradient: Gradient
            {
                GradientStop { position: 0; color: "#7FFF00" }
                GradientStop { position: 1; color: "#7FFF00" }
            }
        }

        MouseArea
        {
            id: dragArea
            anchors.fill: parent
            drag.target: parent
            onPositionChanged: {
                [handler.x, handler.y] = calculatePos(mouseX, mouseY)
            }
            function calculatePos(x, y)
            {
                var vX = x - ring.wheelRadius
                var vY = y - ring.wheelRadius
                var magV = Math.sqrt((Math.pow(vX, 2) + Math.pow(vY, 2)))
                var aX = ring.wheelRadius + vX / magV * ring.wheelRadius
                var aY = ring.wheelRadius + vY / magV * ring.wheelRadius
                return [aX, aY]
            }
        }

        Rectangle
        {
            id: handler
            width: ring.width / 15
            height: width
            radius: ring.width / 30
            border.width: 1
            color: "transparent"
        }
    }
}

我被要求添加一些更多细节以便能够发布代码：
如您所见，我根据鼠标位置更改处理程序位置。我想在处理程序的位置下获取戒指的颜色。

Answer 1

最后我使用了画布，看起来效果很好，这里是代码的缩短版本（不包括处理程序逻辑）：

Canvas
{
    id: ring
    property double wheelFullRadius: width / 2
    property double borderWidth: wheelFullRadius / 6
    property double wheelInnerRadius: wheelFullRadius - borderWidth / 2

    function getColor()
    {
        return context.getImageData(handler.x, handler.y, 1, 1)
    }

    onPaint:
    {
        var context = getContext('2d')
        context.reset()
        context.arc(ring.wheelFullRadius, ring.wheelFullRadius, ring.wheelInnerRadius,
            0, 2*Math.PI)
        var grd = context.createConicalGradient(
            ring.wheelFullRadius, ring.wheelFullRadius, 0
        )
        grd.addColorStop(0, "#7FFF00" )
        grd.addColorStop(1/12, "#FFFF00" )
        grd.addColorStop(2/12, "#FF7F00" )
        grd.addColorStop(3/12, "#FF0000" )
        grd.addColorStop(4/12, "#FF007F" )
        grd.addColorStop(5/12, "#FF00FF" )
        grd.addColorStop(6/12, "#7F00FF" )
        grd.addColorStop(7/12, "#0000FF" )
        grd.addColorStop(8/12, "#007FFF" )
        grd.addColorStop(9/12, "#00FFFF" )
        grd.addColorStop(10/12, "#00FF7F" )
        grd.addColorStop(11/12, "#00FF00" )
        grd.addColorStop(1, "#7FFF00" )
        context.strokeStyle = grd
        context.lineWidth = ring.borderWidth
        context.stroke()
        handler.update()
    }
    ....
}

我仍然担心移动设备上的性能，但目前它可以工作。