Circle with thick line

I'm trying to draw a circle that has a THICK line.
I tried using setPenWidth(10) but that only resulted in a circle that looks odd.

I'm currently using fillCircle and basically drawing 2 circles on top of each other to cancel out the areas I don't want.
however, this then comes w/ another issue - because of this 'cancel' out circle, i'm effectively making the screen white and I have to be careful where i put the code and / or other code else i don't get any output.

So, I'm perplexed and asking if there is a better alternative to doing what I need.

thoughts?

Former Member over 10 years ago

Create arcs with fillPolygon. Note there is a 64 point limit, so you may need multiple arcs. I believe a few arc helper functions have been posted in the forum somewhere. I think I recall Travis posted one.

Nikeow over 10 years ago

I tried that before. As a non-coder the arc code is complicated. I used that for my activity watch face.
I'm rel-lay outing my code to see if it will help. Lots of work tho.

Brandon.ConnectIQ over 10 years ago

setPenWidth has some bugs that we know about, and they're on the road map to be fixed. The two methods you mentioned are good ones. I think I'd prefer the simplicity of using filled circles, but you'll have to decide which is better for your particular application.

jim_m_58 over 10 years ago

What about this? Or am I missing something? Here is an image from the simulator. It looks better on the device. The line there is solid a,d the circle is rounder...

function onUpdate(dc) {
		var width=dc.getWidth();
		var height=dc.getHeight();
		
		dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_BLACK);
		dc.clear();
		
		
		dc.setColor(Gfx.COLOR_YELLOW,Gfx.COLOR_TRANSPARENT);
		dc.fillCircle(width/2,height/2, 30);
		
		dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_TRANSPARENT);
		dc.fillCircle(width/2,height/2,20);
		
		dc.setColor(Gfx.COLOR_YELLOW,Gfx.COLOR_TRANSPARENT);
		dc.setPenWidth(5);
		dc.drawLine(width/2-15, height/2-15, width/2+15, height/2+15);
    }

As an alternative to using two filled circles, this will leave whatever is behind the circle in place. (yes I know it makes 8 calls more than the two circle.)

for(var i=30;i>20;i--) {
			dc.drawCircle(width/2,height/2,i);
		}

Nikeow over 10 years ago

Jim - that's basically what I'm doing right now. The 2 fill circles.

jim_m_58 over 10 years ago

I thought you said the two circle fills looked odd. I don't see that

But how about the concentric drawCircles? That leaves the background unchanged.

travis.vitek over 10 years ago

I'm trying to draw a circle that has a THICK line. I tried using setPenWidth(10) but that only resulted in a circle that looks odd.

I thought you said the two circle fills looked odd. I don't see that.

He said that using setPenWidth() looks odd. When drawing lines that aren't vertical or horizontal the result is pretty ugly, just like the diagonal line in your example image...

jim_m_58 over 10 years ago

But the diagonal line only looks odd in the simulator, but fine on the actual device. LOTS of things look a bit odd in the simulator, as the resolution and spacing is different on a PC/MAC screen than the actual device.

When I use setPenWidth(5) and drawCircle(), it looks funky in the simulator, but looks correct on a va (FW 2.90) With a pen width of 15, I can see it looks kind of "squared off" on the real device.

Former Member over 10 years ago

Another way you could do it is like a clock. Draw lots of small circles with a diameter equal to the thickness of your circle.

jim_m_58 over 10 years ago

Another way you could do it is like a clock. Draw lots of small circles with a diameter equal to the thickness of your circle.

Seems someone mentioned "concentric circles"! Now who was that :)

As another option, a custom font could be created with only one "character" that mapped to a circle with a line through it, of the proper size. Then to use it, you would just set the colors and call "drawText" with that font and character. Easy to control transparency and color too...