From 18a910595da05477d8f96f95752550fea24e3ba2 Mon Sep 17 00:00:00 2001 From: Louis-Joseph Fournier Date: Sun, 27 Dec 2015 12:22:24 +0100 Subject: [PATCH] CircleMeter: first arrow implementation with Canvas --- qml/CircleMeter.qml | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/qml/CircleMeter.qml b/qml/CircleMeter.qml index 8d26ce0..60b1154 100644 --- a/qml/CircleMeter.qml +++ b/qml/CircleMeter.qml @@ -6,7 +6,7 @@ import QtQuick 2.0 Item { /// current level - property double level: 0 + property double level: 0.5  /// minimum level property double min: -1 /// maximum level @@ -14,19 +14,41 @@ Item { /// theme object property QtObject theme + /// Ellipse Canvas { - id: canvas + id: ellipse anchors.fill: parent onPaint: { - var ctx = canvas.getContext('2d'); + var ctx = getContext('2d'); ctx.strokeStyle = theme.primaryColor ctx.lineWidth = 1 ctx.beginPath() ctx.moveTo(0,height - 1) - ctx.bezierCurveTo(0, 0, width * 0.5 * (1 - Math.cos(Math.PI/4)), height * Math.sin(Math.PI/4), width / 2, 0) + ctx.bezierCurveTo(0, -height * 0.33, width - 1, -height * 0.33, width - 1, height - 1) //ctx.closePath() ctx.stroke() - console.log("canvas done") + console.log("ellipse done") + } + } + + Canvas { + /// level arrow + id: arrow + anchors.fill: parent + property double k: 0.99 + property double offset_base: 0.95 + property double angle: (level - min) / (max - min) * Math.PI - Math.PI / 2 + + onPaint: { + var ctx = getContext('2d'); + ctx.strokeStyle = theme.primaryColor + ctx.lineWidth = 1 + ctx.beginPath() + ctx.moveTo(width / 2, (height - 1) * offset_base) + ctx.lineTo(width * 0.5 + width * 0.5 * k * Math.sin(angle), height * k * (1 - Math.cos(angle) + 1 - k)) + ctx.stroke() + + console.log("angle: " + angle) } } }