从图片中遮罩，在光标后面裁剪图像

Question

我有一个带有透明背景 (PNG) 的蓝色图像的基本背景，我如何制作与箭头后面的图像不同的背景？

我尝试了使用蒙版的选项，但它会在宽度或高度上切割图片，这不起作用

蓝色背景：

应该是：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.15
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0
Window {
width: 1280
height: 480
visible: true
title: qsTr("Hello World")
color: "#000"


CircularGauge {
    id:gauge
    property bool accelerating
    width: 377
    height: 377
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.topMargin: 101
    maximumValue:8
    value:  accelerating ? maximumValue : 0

    Component.onCompleted: forceActiveFocus()
    Behavior on value { NumberAnimation { duration: 1500 }}
    Keys.onSpacePressed: accelerating = true
    Keys.onReleased: {
        if (event.key === Qt.Key_Space) {
            accelerating = false;
            event.accepted = true;
        }
    } 
    style: CircularGaugeStyle { 
        labelStepSize: 1
        labelInset: outerRadius / 6
        minimumValueAngle: -110
        maximumValueAngle: 110 
        background: Rectangle {
            id: rectangle
            implicitHeight: gauge.height
            implicitWidth: gauge.width
            color:"Transparent"
            anchors.centerIn: parent
            radius: 360

            Image {
                width: 417
                height: 287
                anchors.top: parent.top
                source: "Blue_bg.png"
                anchors.topMargin:  -23
                anchors.horizontalCenter: parent.horizontalCenter
                asynchronous: true
                sourceSize {
                }
            }


        }

        

        foreground: Item {
            Text {
                id: speedLabel
                anchors.centerIn: parent
                anchors.verticalCenterOffset: -20
                text: "126"
                font.pixelSize:76
                color: "white"
                antialiasing: true
            }
        }

        tickmarkLabel:  Text {
            font.italic: true
            font.bold: true
            text: styleData.value
            font.pixelSize: 30
            color: styleData.value <= gauge.value ? "white" : "#ffffff"
            antialiasing: true
        }

    }

}

}

我怎样才能达到这个效果？

Answer 1

您可以使用Canvas 来绘制圆弧（请参阅Draw an arc/circle sector in QML?）。如果你将它与OpacityMask（见QML Circular Gauge）结合起来，你可以掩盖蓝色的“背景”（在给定的例子中它更像是一个前景）来制作那个很酷的速度计:-)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0

Window {
    width: 640
    height: 480
    visible: true

    Image {
        id: img
        source: "blue.png"
        visible: false
    }

    Canvas {
        id: mask
        anchors.fill: img

        property double angle: 45
        onPaint: {
            var ctx = getContext("2d");
            var centerX = width / 2;
            var centerY = height / 2;

            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, width / 4, (Math.PI) * (1 + angle / 180), 0, false);
            ctx.lineTo(centerX, centerY);
            ctx.fill();
        }
    }

    OpacityMask {
        anchors.fill: img
        source: img
        maskSource: mask
    }
}