clap

CLAP Audio Plugin API
Log | Files | Refs | README | LICENSE

commit 9dea9dd24966da3508d6fc8d85aa87961751dc3a
parent 9887217f39721e22394e9ad959c340f401d3c95f
Author: Alexandre BIQUE <bique.alexandre@gmail.com>
Date:   Fri, 10 Sep 2021 10:20:31 +0200

Better knob painting

Diffstat:
Mexamples/plugins/qml/clap/Knob.qml | 34++++++++++++++++++++++++----------
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();