commit 9dea9dd24966da3508d6fc8d85aa87961751dc3a
parent 9887217f39721e22394e9ad959c340f401d3c95f
Author: Alexandre BIQUE <bique.alexandre@gmail.com>
Date: Fri, 10 Sep 2021 10:20:31 +0200
Better knob painting
Diffstat:
1 file changed, 24 insertions(+), 10 deletions(-)
diff --git a/examples/plugins/qml/clap/Knob.qml b/examples/plugins/qml/clap/Knob.qml
@@ -2,10 +2,13 @@ import QtQuick 2.1
Canvas {
property QtObject param
- property int size: 20
- property string backgroundColor: "#222222";
+ property int size: 20;
+ property string backgroundColor: "#0c002b";
+ property string ringColor: "#adabb3";
+ property string knobColor: "#706d6b";
property string valueColor: "#ffffff";
- property string modulationColor: "#3344ff"
+ property string modulationColor: "#10b1ca"
+ property double modulationMargin: .05;
id: knob
width: size
@@ -68,7 +71,7 @@ Canvas {
function drawBackground(ctx) {
ctx.save()
- ctx.fillStyle = backgroundColor;
+ ctx.fillStyle = ringColor;
ctx.strokeStyle = "black";
ctx.beginPath();
@@ -76,6 +79,12 @@ Canvas {
ctx.fill();
ctx.stroke();
+ ctx.beginPath();
+ ctx.arc(size / 2, size / 2, size / 2 - size * modulationMargin, 0, 2 * Math.PI, false);
+ ctx.fillStyle = backgroundColor;
+ ctx.fill();
+ ctx.stroke();
+
ctx.restore()
}
@@ -90,16 +99,19 @@ Canvas {
ctx.strokeStyle = "black";
ctx.beginPath();
- ctx.rotate((param.normalizedFinalValue - .5) * Math.PI * 4 / 3);
- ctx.arc(0, -size / 2 + 2 * radius, radius, 0, 2 * Math.PI, false);
+ ctx.rotate((param.normalizedValue - .5) * Math.PI * 4 / 3 - Math.PI / 2);
+
+ var finalValueAngle = (param.normalizedFinalValue - param.normalizedValue) * Math.PI * 4 / 3;
+ ctx.arc(0, 0, size / 2, 0, finalValueAngle, finalValueAngle < 0);
+ ctx.arc(0, 0, size / 2 - size * modulationMargin, finalValueAngle, 0, finalValueAngle > 0);
+ //ctx.arc(0, 0, size / 2, finalValueAngle, 0, true);
ctx.fill();
- ctx.stroke();
ctx.restore();
}
function drawValue(ctx) {
- var radius = size / 15;
+ var radius = size / 40;
ctx.save();
@@ -108,9 +120,11 @@ Canvas {
ctx.fillStyle = valueColor;
ctx.strokeStyle = "black";
- ctx.beginPath();
ctx.rotate((param.normalizedValue - .5) * Math.PI * 4 / 3);
- ctx.arc(0, -size / 2 + 2 * radius, radius, 0, 2 * Math.PI, false);
+ ctx.beginPath();
+ var y0 = -size / 2 + size * modulationMargin;
+ var y1 = y0 + size / 3;
+ ctx.rect(-radius, 0, 2 * radius, -size / 2);
ctx.fill();
ctx.stroke();