Filled Arc Segment?

I'm not sure how to do this kind of thing. I think I can draw the outline of a partial arc, using drawarc() and lines.

But I'm not sure how to fill the arc or a portion of the arc, like the green segment. Any tips? A poly won't do it (constructed of straight lines). I think I've seen something like this, but I'm missing something because I can't think of the CIQ functions that would allow me to fill an arc segment like this.

Thanks!

  • Hi, simply draw an arc with bigger line width Slight smile

  • use setPenWidth() to define the thickness of the arc.  Here's a really simple example.  The blue mark can be changed to use something like is used to draw hands in an analog watchface

    import Toybox.Graphics;
    import Toybox.WatchUi;
    
    class arcsView extends WatchUi.View {
        var width;
        var height;
        var rad;
        
        function initialize() {
            View.initialize();
        }
    
        // Load your resources here
        function onLayout(dc as Dc) as Void {
            width=dc.getWidth();
            height=dc.getHeight();
            rad=width/4;
        }
    
        // Called when this View is brought to the foreground. Restore
        // the state of this View and prepare it to be shown. This includes
        // loading resources into memory.
        function onShow() as Void {
        }
    
        // Update the view
        function onUpdate(dc as Dc) as Void {
            dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
            dc.clear();
            dc.setPenWidth(width/10);
            dc.setColor(Graphics.COLOR_YELLOW,Graphics.COLOR_TRANSPARENT);
            dc.drawArc(width/2, height/2, rad, Graphics.ARC_CLOCKWISE, 150, 75);
            dc.setColor(Graphics.COLOR_RED,Graphics.COLOR_TRANSPARENT);
            dc.drawArc(width/2, height/2, rad, Graphics.ARC_CLOCKWISE,75,50);
            dc.setColor(Graphics.COLOR_GREEN,Graphics.COLOR_TRANSPARENT);
            dc.drawArc(width/2, height/2, rad, Graphics.ARC_CLOCKWISE,50,30);
            dc.setPenWidth(width/10+10);
            dc.setColor(Graphics.COLOR_BLUE,Graphics.COLOR_TRANSPARENT);
            dc.drawArc(width/2, height/2, rad-5, Graphics.ARC_CLOCKWISE,100,98);
        }
    
        function onHide() as Void {
        }
    
    }

    90 degrees is the 12 o'clock position. ,Notice I add 10 to the width for the blue line. but then subtract 5 from the radius when I draw it.  That's because the radius in the draw arc is actually the center of the arc