How to draw a ring like this

If I was trying to recreate that graphic, I would draw triangles (with fillPolygon) from the center, and then draw a black circle over the top in the middle.

We will eventually be fixing issues with using pen width with draw arc, which may be a better option when it is available.

Unless you're going to dynamically change the shape/size of the ring, I'd either create a bitmap or pre-calcuate the points and create a shape object using the layout system.

I made something similar and used the function described here : https://forums.garmin.com/showthread.php?231881-Arc-Function&p=568317#post568317

It draws each segment with about 30 polygons, which is a bit much for small segments.
The function does a lot of calculations; so, if the variablity of each segment is small, e.g. only a thick or narrow segment, then they could be precalculated.

This is the code for my moving second indicator.
technically 5 small arcs you want to draw.

winkel = angle

you can choose between 2 ways.
1. draw a big polygon triangle
1.1 draw a black circle in the middle with radius "width/2-5"

2. draw a polygon with the source below, just add another loop and draw 10-20 points instead of 4

personally i don't care about the battery used. Charging ist for free and if my high end watch has to calc 20 sin&cos ...well should be possible :-)


hope this helps
function drawsec(dc, rad2){
var dateInfo = Time.Gregorian.info( Time.now(), Time.FORMAT_SHORT );
var sec = dateInfo.sec;
for (var k = 0; k <=59; k++){
if ( ( k >= ( sec - 4 ) ) && ( k<=sec)){
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);
var xx, xx2, yy, yy2,kxx,kyy,kxx2,kyy2, winkel, slim;
winkel = 180 +k * -6;
slim = 2;
// 1 Polygon moving around a bigger and smaller circle
// xx/yy----------------xx2/yy2
// \ /
// \ / -->
// \ /
// kxx/kyy---------kxx2/kyy2
yy = 1+dc.getWidth()/2 * (1+Math.cos(Math.PI*(winkel-2)/180));
yy2 = 1+dc.getWidth()/2 * (1+Math.cos(Math.PI*(winkel+3)/180));
xx = 1+ dc.getWidth()/2 * (1+Math.sin(Math.PI*(winkel-2)/180));
xx2 = 1+ dc.getWidth()/2 * (1+Math.sin(Math.PI*(winkel+3)/180));
kyy = 1+dc.getWidth()/2 + rad2 * (Math.cos(Math.PI*(winkel-2)/180));
kyy2 = 1+dc.getWidth()/2 + rad2 * (Math.cos(Math.PI*(winkel+3)/180));
kxx = 1+ dc.getWidth()/2 + rad2 * (Math.sin(Math.PI*(winkel-2)/180));
kxx2 = 1+ dc.getWidth()/2 + rad2 * (Math.sin(Math.PI*(winkel+3)/180));
if ( k == sec ){dc.setColor(Gfx.COLOR_DK_RED, Gfx.COLOR_DK_RED); }
if ( k == sec - 1 ){dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);}
if ( k == sec - 2 ){dc.setColor(Gfx.COLOR_DK_GRAY, Gfx.COLOR_DK_GRAY);}
if ( k == sec - 3 ){dc.setColor(Gfx.COLOR_LT_GRAY, Gfx.COLOR_LT_GRAY);}
if ( k == sec - 4 ){dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_WHITE);}
if (yy > 180) {yy = yy -1; yy2 = yy2 -1;}
// finally draw the ploygon with 4 coordinates
dc.fillPolygon([[kxx, kyy], [xx, yy] ,[xx2,yy2],[kxx2, kyy2]]);
}
}