How to Fix Visual Artifacts in a Zoomable UserControl with Rounded Corners and a Colored Border?

How to Avoid Visual Artifacts Border of Zoomable UserControl with Rounded Corners

Problem:

When zooming out a user control with rounded corners and a colored border, the right side of the border becomes invisible. Additionally, multiple yellow borders appear on the right side when zooming in.

Initial Code Snippets:

Form1.Designer.cs

trackBar1.Value = 100;
BackColor = Color.Gray;

Form1.cs

private void trackBar1_Scroll(object sender, EventArgs e)
{
    UserControl11.SetZoomFactor(trackBar1.Value / 100F);
}

UserControl1.cs

// Properties, constructors, and event handlers omitted for brevity

internal GraphicsPath GraphicsPathWithBorder;

internal void SetZoomFactor(float z)
{
    Width = (int)(MyBaseWidth * z);

    GraphicsPathWithBorder = RoundedCornerRectangle(ClientRectangle);
    Region = new Region(GraphicsPathWithBorder);
}

Solution:

To address the artifacts, the following recommendations are made:

1. Use a Region for the Control: Define a Region that will determine which part of the Control to paint. This Region should be slightly smaller than the Control's bounds to preserve anti-aliasing.
2. Apply a Scale and Translate Matrix: Implement a scale matrix and translate matrix to scale and move the Region's bounds on the inside of the Control's Region. It scales and translates as per the Pen size.
3. Set a Transparent Background: Set the background color of the Control to Transparent, allowing the color of the surrounding area to show through.

Updated Code:

public partial class RoundControl : UserControl
{
    // Properties, constructors, and event handlers omitted for brevity

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        RectangleF rect = GraphicsPathWithBorder.GetBounds();
        float scaleX = 1 - ((m_PenSize + 1) / rect.Width);
        float scaleY = 1 - ((m_PenSize + 1) / rect.Height);
        using (Pen pen = new Pen(m_BorderColor, m_PenSize))
        using (Brush brush = new SolidBrush(m_FillColor))
        using (Matrix mx = new Matrix(scaleX, 0, 0, scaleY, pen.Width / 2, pen.Width / 2))
        {
            e.Graphics.Transform = mx;
            e.Graphics.FillPath(brush, GraphicsPathWithBorder);
            e.Graphics.DrawPath(pen, GraphicsPathWithBorder);
        }
        base.OnPaint(e);
    }
}

Results:

The updated code snippet successfully prevents the visual artifacts caused by the colored border of the zoomable UserControl with rounded corners. The modified Region with applied scale and translate matrix ensures anti-aliased borders at all zoom levels.

The above is the detailed content of How to Fix Visual Artifacts in a Zoomable UserControl with Rounded Corners and a Colored Border?. For more information, please follow other related articles on the PHP Chinese website!