Paint a Path curve in QML with a shadow box - c++

Question

I need to create a line like the image below. Does anyone have any suggestions?
target image
In addition to the mentioned image, it is necessary to select the line with the mouse, which can be done with TapHandler.

Answer 1

You can consider creating it with PathSvg.
import QtQuick
import QtQuick.Controls
import QtQuick.Shapes
Page {
background: Rectangle { color: "black" }
Frame {
anchors.centerIn: parent
padding: 0
width: 162
height: 80
background: Rectangle { color: "#444" }
Shape {
ShapePath {
strokeColor: "white"
PathSvg {
path: "M 0 20 L 155 59
155 57.5 162 60 155 62.5 155 61 0 22 z"
}
}
}
}
}
You can Try it Online!
Or you can consider implementing it as SVG:
import QtQuick
import QtQuick.Controls
Page {
background: Rectangle { color: "black" }
Frame {
anchors.centerIn: parent
padding: 0
background: Rectangle { color: "#222" }
Image {
source: "sample.svg"
sourceSize: Qt.size(width, height)
width: 128
height: 80
}
}
}
// sample.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 20">
<path stroke="white" stroke-width="0.4" fill="white" d="M 0 4 L 31 11.8
31 11.5 32 12 31 12.5 31 12.2 0 4.4 z"/>
</svg>
You can Try it Online!