image - Programmatically paint an illuminated section of a speedometer -

image - Programmatically paint an illuminated section of a speedometer -

i trying create gauge in qt quick has sections "light up" 0 needle's position.

one way can think of doing having image of segment , painting , rotating many times code. however, don't know how can done in qml.

it doesn't have qml , doesn't have qt quick; long can utilize qt , within qt creator , preferably works accross platforms.

edit: made rough sketch stackoverflow requires me have 10 reputation post them, placing links.

no segments illuminated ---------------------------- some segments illuminated -

you utilize canvas element draw arc stroke command on start , end position. compose below scale of gauge.

here illustration how using value 0 1 select how "full" gauge is.

applicationwindow { visible: true width: 500 height: 500 canvas { id: canvas anchors.fill: parent rotation: -90 onpaint: { var c = getcontext('2d') c.clearrect(0, 0, width, height) c.beginpath() c.linewidth = 30 c.strokestyle = "red" c.arc(250, 250, 250 - 15, 0, math.pi * 2 * circ.value) c.stroke() } } slider { id: circ minimumvalue: 0 maximumvalue: 1 value: maximumvalue / 2 onvaluechanged: canvas.requestpaint() } }

as requested mitch, explain - canvas rotated @ 90 ccw grade because of way qt draws arcs - not start @ "12 o'clock" @ 3. can remove rotation of canvas in case might want draw stuff, cuz wouldn't want create drawing offset @ 90 grade sit down right rotated canvas, need rid of rotation draw arc in range -math.pi * 0.5 math.pi * 1.5 business relationship fine art starting @ 3 o'clock.

image qt qml paint