图片蒙版，光标后面的裁剪图像

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?). If you combine this with an OpacityMask (see ），您可以遮盖蓝色“背景”（在给定的示例中它更像是前景）来制作酷炫的速度计:-)

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

图片蒙版，光标后面的裁剪图像

Mask from pictures, crop image behind cursor

qt

qml

qtquick2

qtquickcontrols