fillPolygon issue

Former Member over 9 years ago

I think there may be an issue with the fill polygon algorithm. It seems like on one side, the points are included and on the other side they are not. I tried to draw a diamond and circle around the same point and the diamond is off center, and not fully symmetric.
Here is the output:

Here is the code:

var width = dc.getWidth();
        var height = dc.getHeight();
        var centerX = width>>1;
        var centerY = height>>1;
        var radius = height>>2;

        dc.setColor(Gfx.COLOR_DK_GRAY, Gfx.COLOR_BLACK);
        dc.fillPolygon([[centerX, centerY-radius],
                        [centerX+radius, centerY],
                        [centerX, centerY+radius],
                        [centerX-radius, centerY]]);

        dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawRectangle(0, 0, width, height);
dc.drawCircle(centerX, centerY, radius);

Has anyone else noticed this, or is there something wrong in my code?

Brandon.ConnectIQ over 9 years ago

This looks like it should work fine to me, so I've reported this for a closer look.

jon.hanson over 8 years ago

First time using the SDK, and I've spent 6 hours trying to debug why shapes built from polygons weren't lining up properly. This code also illustrates the problem - draw the outline of a box with lines and then draw a filled polygon using the same points:

var a = 104;

        var b = 113;



        dc.setColor(Gfx.COLOR_PINK, Gfx.COLOR_TRANSPARENT);

        dc.drawLine(a, a, b, a);

        dc.drawLine(b, a, b, b);

        dc.drawLine(b, b, a, b);

        dc.drawLine(a, b, a, a);

        dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_TRANSPARENT);

        dc.fillPolygon([[a, a], [b, a], [b, b], [a, b]]);

Which gives rise to this rendering - .

jim_m_58 over 8 years ago

Have you tried sideloading your app with a watch to see if it's a sim issue and doesn't happen on a watch? Things can be different, with setPenWidth() and the color brightness differences being prime examples. Are you using setPenWith() at all?

If both a and b are even numbers does it still happen?

jon.hanson over 8 years ago

Have you tried sideloading your app with a watch to see if it's a sim issue and doesn't happen on a watch?

Yes, the issue occurs on both the simulator and on my watch - a Fenix 3.

Are you using setPenWith() at all?

No. Setting it to 1 made no difference.

If both a and b are even numbers does it still happen?

Yes.

jon.hanson over 8 years ago

The obvious workaround is to use a wrapper function, e.g.:

function fillQuad(dc, a, b, c, d) {
        dc.fillPolygon([a, b, c, d]);
        dc.drawLine(a[0], a[1], b[0], b[1]);
        dc.drawLine(b[0], b[1], c[0], c[1]);
        dc.drawLine(c[0], c[1], d[0], d[1]);
        dc.drawLine(d[0], d[1], a[0], a[1]);
    }

It seems that doing pixel-accurate operations is often difficult, if not impossible, with this API. For example you can't use DC.drawCircle to draw a circle which is centred at the centre of the screen, because the centre is at (108.5, 108.5) and drawCircle takes integer parameters.

On a higher-res screen it wouldn't really matter, but on a screen this small it's quite noticeable having shape coordinates being off by 1 all over the place.