setPenWidth not working properly

When drawing a circle with a large pen width, the result is hideous. It is my understanding that this post points out that setPenWidth() doesn't work on the 920XT device at all, but that issue is different.

Here is a bit of sample code that draws a circle around the entire screen with a pen width of 20.

using Toybox.Graphics as Gfx;

using Toybox.Lang as Lang;

using Toybox.WatchUi as Ui;



class Test extends Ui.View

{

    var radius;



    function initialize() {

    }



    function onUpdate(dc) {

        dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);

        dc.clear();



        var dx = dc.getWidth() / 2;

        var dy = dc.getHeight() / 2;



        radius = dx;

        if (dy < radius) {

            radius = dy;

        }



        dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);

        dc.setPenWidth(20);



        dc.drawCircle(dx, dy, radius - 22);

    }

}

The following shows what I get when I use the above code.

Former Member over 10 years ago

It looks more like a twisted dented rounded rectangle with a circle inside :S

hawken over 10 years ago

We've noticed something similar to this and already have a ticket open to investigate the issue. I'll look into your case, too, just to make sure it's not a separate issue from what we've seen.

hawken over 10 years ago

Just to follow up a little, we've been able to recreate this problem. I looks like it's probably related to the other issue I mentioned that we had already seen.

travis.vitek over 10 years ago

Is the other issue that lines drawn at angles aren't completely filled?

hawken over 10 years ago

We've found a few cases where setPenWidth() has unexpected results. I haven't seen the angled line problem, but I have seen some issues with bordered shapes.

Former Member over 9 years ago

Here is another example of errant behavior with setPenWidth(). Sorry for the crappy snip. I ran out of upload room. Anyone know how to delete previously used images? The uploader tool indicates that unused assets will be deleted but I have some that have been up there for weeks.

function onUpdate(dc) {

        

        width 	= dc.getWidth();

        height 	= dc.getHeight();

        xCenter = width/2;

        yCenter = height/2;

        

        // Call the parent onUpdate function to redraw the layout

        View.onUpdate(dc);        

        

        dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_BLACK);

        dc.setPenWidth(4);

        

	dc.drawCircle(xCenter, yCenter, 80);

    }

Nikeow over 9 years ago

Same here.. when I try to draw circles with penwidth of 2, in the sim (F3) I get what is seen above (previous poster's Attachment)

Brandon.ConnectIQ over 9 years ago

This is the same issue as was reported by Travis. :) We have a task to fix this, but it apparently hasn't been very high on the list. :o I'll update the ticket to let folks know that this is starting to affect more people.

Former Member over 9 years ago

Thank you Brandon for your response. Promptness would be appreciated here; it is actually blocking development of my current project as I am sure it is others' as well.

Thanks Again,
Jeff

travis.vitek over 9 years ago

While it isn't perfect, you can draw multiple circles with pen width set to 1 to get the same effect.

// radius is the inner radius of the circle. uses drawEllipse() because it results in a more

// rounded circle than drawCircle() for small circles.

function drawCircle(dc, x, y, radius, penWidth)

{

    for (var i = 0; i < penWidth; ++i) {

        dc.drawEllipse(x, y, radius + i, radius + i);

    }

}