Line bolder than it should be.

[ricky92]

Hello, I am developing a custom OSX-style form, drawing it on the fly. However, I'm experiencing a problem making the main shape of the form, where a line is bolder than it should be. Here's a screenshot:

See? The corners at the other angles are just fine, while the one at the top-left is bolder than the others. The code is the following:

    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
        Dim g As Graphics = e.Graphics
        Dim gp As New GraphicsPath(FillMode.Winding)
        gp.StartFigure()
        gp.AddLine(New PointF(0, 3), New Point(3, 0))
        gp.AddLine(New PointF(Me.ClientSize.Width - 3.5, 0), New PointF(Me.ClientSize.Width, 3.5))
        gp.AddLine(New PointF(Me.ClientSize.Width, Me.ClientSize.Height - 4.5), New PointF(Me.ClientSize.Width - 4.5, Me.ClientSize.Height))
        gp.AddLine(New PointF(3.5, Me.ClientSize.Height), New PointF(0, Me.ClientSize.Height - 3.5))
        gp.CloseFigure()
        g.FillPath(New LinearGradientBrush(New Point(0, 0), New Point(0, Me.ClientSize.Height), Color.Gainsboro, Color.DarkGray), gp)
        g.DrawPath(New Pen(Color.FromArgb(96, 96, 96), 2), gp)
    End Sub

Any help, please? :\

 

[ricky92]

Anyone? I don't think that's an hard question to answer... (or at least I hope :\ )

 

[VicJ]

Hi Ricky, have you tried:

g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality

I know it works for graphics commands like DrawLine and DrawEllipse. Maybe it helps with DrawPath too. I'd like to hear.

There are several other Graphics properties that affect quality. For example Graphics.InterpolationMode for enlarging and shrinking images and Graphics.TextRenderingHint for DrawString. But I think that SmoothingMode is most relevant in your case.

regards, Vic

 

[ricky92]

Hi VicJ, thank you for your reply.
However, it's not quality I'm looking for. I want that line to be 'pixellated', just not as bold as it is. As you can see in the other corners, they look just fine; but in the top-left one, it's bolder. That's what I'm trying to fix...

 

[JohnH]

You do have a narrower corner at top-left, at the presicion of 3 pixels that could have an impact when crossing pixel lines cramp together. Along with the default coarse graphics quality that could be it. Try better graphics qualities in addition to increasing the corner similar to the others.

 

[ricky92]

You do have a narrower corner at top-left, at the presicion of 3 pixels that could have an impact when crossing pixel lines cramp together. Along with the default coarse graphics quality that could be it. Try better graphics qualities in addition to increasing the corner similar to the others.

But I need not to use smoothing, as it would ruin the trasparency key. I am trying to make a iTunes-like form, I just need to know why, even if I use the same method for all the corners, one is bolder than the others...

 

[VicJ]

Ricky, I know what you mean about not combining antialiased smoothing modes with a transparency key. The result is a mess.

I've been experimenting with your code and I believe the thickened corner is an artefact of converting from floating point coordinates (PointF) to integer (pixels). I tried making the bevelled corner larger as JohnH suggested but it didn't help. However, shifting the whole drawing a few pixels with Graphics.TranslateTransform resulted in a different pattern with thick sides and thin corners. So it depends where you draw it relative to the form. This means you can't rely on it.

I got a better result by changing the PointFs to Points and setting the pen thickness to 1. The corners were uniform but a bit thin. Perhaps you could do even better by drawing the corners by hand, using SetPixel or with a drawing program. Then paint the corners as bitmaps -- or use 1 bitmap with flipping.

I hope this helps, Vic