61 lines
1.9 KiB
QML
61 lines
1.9 KiB
QML
import QtQuick
|
|
|
|
Item {
|
|
id: root
|
|
implicitWidth: 14
|
|
implicitHeight: 14
|
|
property string iconType: "play" // "play", "pause", "prev", "next"
|
|
property color color: "#f8f8f2"
|
|
|
|
Canvas {
|
|
id: canvas
|
|
anchors.fill: parent
|
|
antialiasing: true
|
|
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
ctx.reset();
|
|
var w = width;
|
|
var h = height;
|
|
ctx.fillStyle = root.color;
|
|
ctx.strokeStyle = root.color;
|
|
ctx.lineWidth = 1.8;
|
|
ctx.lineCap = "round";
|
|
|
|
if (root.iconType === "play") {
|
|
ctx.beginPath();
|
|
ctx.moveTo(w * 0.25, h * 0.15);
|
|
ctx.lineTo(w * 0.85, h * 0.5);
|
|
ctx.lineTo(w * 0.25, h * 0.85);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
} else if (root.iconType === "pause") {
|
|
ctx.fillRect(w * 0.2, h * 0.15, w * 0.22, h * 0.7);
|
|
ctx.fillRect(w * 0.58, h * 0.15, w * 0.22, h * 0.7);
|
|
} else if (root.iconType === "prev") {
|
|
ctx.fillRect(w * 0.12, h * 0.18, w * 0.16, h * 0.64);
|
|
ctx.beginPath();
|
|
ctx.moveTo(w * 0.82, h * 0.15);
|
|
ctx.lineTo(w * 0.35, h * 0.5);
|
|
ctx.lineTo(w * 0.82, h * 0.85);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
} else if (root.iconType === "next") {
|
|
ctx.fillRect(w * 0.72, h * 0.18, w * 0.16, h * 0.64);
|
|
ctx.beginPath();
|
|
ctx.moveTo(w * 0.18, h * 0.15);
|
|
ctx.lineTo(w * 0.65, h * 0.5);
|
|
ctx.lineTo(w * 0.18, h * 0.85);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: root
|
|
function onIconTypeChanged() { canvas.requestPaint() }
|
|
function onColorChanged() { canvas.requestPaint() }
|
|
}
|
|
}
|
|
}
|