CircleMeter: gradient for regions and better colors
This commit is contained in:
parent
c62a3a24a5
commit
591a5750a9
1 changed files with 15 additions and 6 deletions
|
@ -14,7 +14,7 @@ Item {
|
||||||
/// numbers to write on the scale
|
/// numbers to write on the scale
|
||||||
property variant marks: [-40, -20, 0, 20, 40]
|
property variant marks: [-40, -20, 0, 20, 40]
|
||||||
/// marks regions colors
|
/// marks regions colors
|
||||||
property variant region_color: ["red", "yellow", "green", "yellow", "red"]
|
property variant region_color: ["#F88E48", "#F8DE48", "#99E882", "#F8DE48", "#F88E48"]
|
||||||
/// theme object
|
/// theme object
|
||||||
property QtObject theme
|
property QtObject theme
|
||||||
|
|
||||||
|
@ -150,15 +150,25 @@ Item {
|
||||||
property variant reg_drawed
|
property variant reg_drawed
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
property variant reg: find_region()
|
property variant reg: find_region()
|
||||||
|
property double r_avg: (r_circle_min + r_circle_max) / 2
|
||||||
z: -4
|
z: -4
|
||||||
onPaint: {
|
onPaint: {
|
||||||
var ctx = getContext('2d');
|
var ctx = getContext('2d');
|
||||||
ctx.clearRect(0,0,width,height)
|
ctx.clearRect(0,0,width,height)
|
||||||
|
|
||||||
//var reg = find_region()
|
var a0 = angle(marks[reg[0]]) // angle of mark
|
||||||
var a1 = angle(reg[1])
|
var a1 = angle(reg[1]) // min angle of region
|
||||||
var a2 = angle(reg[2])
|
var a2 = angle(reg[2]) // max angle of region
|
||||||
ctx.fillStyle = region_color[reg[0]]
|
|
||||||
|
// gradient
|
||||||
|
var x_center = getx(a0, r_avg);
|
||||||
|
var y_center = gety(a0, r_avg);
|
||||||
|
var grd = ctx.createRadialGradient(x_center, y_center, 2, x_center, y_center,
|
||||||
|
(reg[2] - reg[1]) * (width + height) / 2 / (max - min))
|
||||||
|
grd.addColorStop(0, region_color[reg[0]])
|
||||||
|
grd.addColorStop(1, "transparent")
|
||||||
|
|
||||||
|
ctx.fillStyle = grd
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.moveTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
|
ctx.moveTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
|
||||||
arc_part(ctx, r_circle_min, a1, a2)
|
arc_part(ctx, r_circle_min, a1, a2)
|
||||||
|
@ -166,7 +176,6 @@ Item {
|
||||||
ctx.lineTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
|
ctx.lineTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
|
||||||
ctx.fill()
|
ctx.fill()
|
||||||
reg_drawed = reg
|
reg_drawed = reg
|
||||||
console.log("redraw")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_level() {
|
function update_level() {
|
||||||
|
|
Loading…
Reference in a new issue