0

Using C# WinForms, I have a normal label which I fill with rounded corners. The issue I am having is that the resulting corners are not consistently rounded.

For ease of understanding, I have created 4 labels with rounded corners, ranging from a radius of 1 to 5. I have added a single outline border to the label for ease of visibility, but even without the single outline the results are the same. I have also zoomed the label images so we can see the corners more clearly.

Using a radius of 1, you can clearly see that the top corners are rounded accordingly, but the bottom borders remain square.

Radius 1

Using a radius of 2 and 3 respectively, produces the same output at the bottom.

Radius 2 and 3 respectively

Using a radius of 4 and also 5 respectively, you can clearly see the inconsistencies on all the corners.

Radius 4

Radius 5

Generally it wouldn't be too much of a problem if I had a label of a small size, but the user needs to be able to zoom, and then it just looks plain ugly as the radius increases, as the inconsistencies are clearly visible.

The code I am using to create the filled rectangle is supposedly very basic as per example, taken from How To Draw a Rounded Rectangle

public static GraphicsPath draw_rectangle(Rectangle bounds, int radius)
    {
        int diameter = radius * 2;
        Size size = new Size(diameter, diameter);
        Rectangle arc = new Rectangle(bounds.Location, size);
        GraphicsPath path = new GraphicsPath();

        if (radius == 0)
        {
            path.AddRectangle(bounds);
            return path;
        }

        // top left arc  
        path.AddArc(arc, 180, 90);

        // top right arc  
        arc.X = bounds.Right - diameter;
        path.AddArc(arc, 270, 90);

        // bottom right arc  
        arc.Y = bounds.Bottom - diameter;
        path.AddArc(arc, 0, 90);

        // bottom left arc 
        arc.X = bounds.Left;
        path.AddArc(arc, 90, 90);

        path.CloseFigure();
        return path;            
    }

I have studied and understand what the code does and how it works, I get the angles and the sweep, but I am by no means a seasoned graphics manipulator so I don't know if I am doing something wrong or if there is a way to better the code for all corner consistency.

Your help and\or explanations are appreciated.

Bazïnga
  • 51
  • 10
  • How is the user 'zooming' ? – Neil Feb 10 '20 at 11:09
  • @Neil I think he is talking about resizing. So the user will enlarge the form – Mong Zhu Feb 10 '20 at 13:27
  • It's a simple zoom with a button click; it's just an enlargement of the label and the font, nothing special. On zoom the label background is repainted and obviously the radius increased, and that is where it becomes ugly. – Bazïnga Feb 10 '20 at 13:34
  • There is a difference between just enlarging an existing bitmap, and drawing something bigger at a higher resolution. If you are doing the former, then there isn't much you can do about it. – Neil Feb 10 '20 at 16:08
  • See the notes and code sample here: [How to avoid visual artifacts of colored border of zoomable UserControl with rounded corners?](https://stackoverflow.com/a/54794097/7444103) and here: [How can I draw a rounded rectangle as the border for a rounded Form?](https://stackoverflow.com/a/56533229/7444103) – Jimi Feb 10 '20 at 16:35
  • @Neil yes I agree. I am simply changing the label size (height, width) properties, as well as the font size. For instance, and leaving the font out of this, the label default size is 50,30; so I fill the rounded rectangle with a radius of 10. On "zoom" I set the label size to 100,60; so I fill the rounded rectangle with radius 20. Resizing triggers the paint event where the fill happens, I am not messing with any resolutions. – Bazïnga Feb 10 '20 at 18:28
  • @Jimi thanks a million. I had a quick look at the examples. They seem to have a few more lines of code than I do, and the samples look good, I will have a look see. – Bazïnga Feb 10 '20 at 18:31
  • The poster of the [linked answer](https://stackoverflow.com/a/33853557/5114784) here. I've just found your question. You didn't mention how you do the zooming (`Graphics.ScaleTransform`?), what `SmoothingMode` and `PixelOffsetMode` you use and what the exact coordinates are when you draw/fill things within some specified bounds. These all must be set correctly, especially when you use zooming; otherwise, the result can be misaligned or blurry. If the question is still relevant after a year or so and you provide the missing info I can add an answer. – György Kőszeg Jul 03 '21 at 10:53

0 Answers0