medvedych/SailTuner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CircleMeter: first arrow implementation with Canvas

Browse source
This commit is contained in:
Louis-Joseph Fournier 2015-12-27 12:22:24 +01:00
parent a8a1d089d4
commit 18a910595d
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
qml/CircleMeter.qml
View file

@ -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)
}
}
}