Mask from pictures, crop image behind cursor - qt

Question

I have a basic background from a blue image with a transparent background (PNG), how can I make a different background from the image after the arrow?
I tried the option using a mask, but it cuts the picture either in width or in height, this does not work
blue background:
it should be:
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
}
}
}
}
How can I achieve this effect?

Answer 1

You can use a Canvas to draw an arc (see Draw an arc/circle sector in QML?). If you combine this with an OpacityMask (see QML Circular Gauge) you can mask the blue "background" (it's more like a foreground in the given example) to make that cool speedometer :-)
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
}
}