[RaggiTech]

المثال الثالث: رسم Glow

لكي نرسم Glow بشكل جيد نحتاج الي تعريف الكثير من المتغيرات والمثال التالي يوضح ذلك ولقد قمت بتوضيح الهدف من كل جزء من الكود داخل المثال

كود :

Public Class Form1

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)


' تعريف متغير يعبر عن المستطيل الرئيسي
Dim rect As New Rectangle(20, 20, 100, 25)

' تعريف بعض المستطيلات وربطها جميعها مع المستطيل الرئيسي

' تغير متغير يعبر عن المستطيل الأول بحيث تكون ابعاده مساوية للمستطيل الرئيسي علي ان يكون ارتفاعه يساوي نصف ارتفاع المستطيل الرئيسي
Dim rect1 As New Rectangle(rect.X, rect.Y, rect.Width, (rect.Height / 2))
' تعريف متغير يعبر عن المستطيل الثاني وغالبا هو ما يساوي المستطيل الأول ولكن إرتغاعه يكون اكبر قليلا وبمقدار ضئيل عن إرتفاع المستطيل الأول
Dim rect2 As New Rectangle(rect.X, rect.Y, rect.Width, ((rect.Height / 2) + 1))
' تعريف متغير يعبر عن المستطيل الثالث وستلاحظون هنا أن جزء من أبعادهذا المستطيل ستكون خارج نطاق المستطيل الرئيسي
Dim rect3 As New Rectangle((rect.X - 10), (rect.Y + (rect.Height / 2)), (rect.Width + 20), rect.Height)
' تعريف متغير يعبر عن المستطيل الرابع وهو سيتم رسمه في النصف السفي من المستطيل الرئيسي ولكنه سيزيد بمقدار ضئل جدا في الارتفاع
Dim rect4 As New Rectangle(rect.X, (rect.Y + (rect.Height / 2)), rect.Width, ((rect.Height / 2) + 1))


' تعريف نصف القطر للحواف الدائرية
Dim radius As Integer = 5

' تعريف الألوان المستخدمة لكي نملأ المستطيلات
Dim colorLightLight As Color = Color.LightYellow
Dim colorDarkDark As Color = Color.Orange

Dim colorDark As Color = Color.OrangeRed
Dim colorLight As Color = Color.Yellow

' التأكد من أن الرسم سيحدث بدون تشوهات
Dim mode As SmoothingMode = e.Graphics.SmoothingMode
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
e.Graphics.SmoothingMode = SmoothingMode.HighQuality

' تعريف متغير يعبر عن Lineargradient Brush
Using lgb As New Drawing2D.LinearGradientBrush(rect1, colorLightLight, colorDarkDark, 90.0F, True)
' تعريف متغير أخر يعبر عن Lineargradient Brush
Using lgb1 As New Drawing2D.LinearGradientBrush(rect1, colorDark, colorLight, -90.0F, True)

' تحديد شكل تدرج اللون في حالة لو كان التدرج أضغر من ابعاد المستطيل
lgb1.WrapMode = WrapMode.TileFlipXY
lgb.WrapMode = WrapMode.TileFlipXY

' تعريف المسار الأول وهو يمثل النصف العلوي من المستطيل الرئيسي وأيضا نجعل حوافه اليسري فقط دائرية
Dim path1 As Drawing2D.GraphicsPath = GetRoundedPath(rect2, radius, radius, 0, 0)
' رسم المسار الأول
e.Graphics.FillPath(lgb, path1)

' تعريف المسار الثاني وهو سيمثل الجزء السفلي من المستطيل
Dim path2 As New GraphicsPath
path2.AddRectangle(rect3)
' تعريف متغير يعبر عن Pathgradient Brush
Dim pgb As New PathGradientBrush(path2)

' إضاف الألوان لهذه الفرشاة
pgb.SurroundColors = New Color() {colorDark, colorDark, colorLight, colorLight}
' تحديد اللون المستخدم للرسم في منتصف المسار وهو الذي سيعمل بمثابة اللون اللامع
pgb.CenterColor = colorLight
' رسم المسار الثاني
e.Graphics.FillPath(pgb, GetRoundedPath(rect4, 0, 0, radius, radius))

End Using
End Using

' رسم الحدود الخارجية للمستطيل

Dim outerBorderColor As Color = Color.DarkOrange
Dim innerBorderColor As Color = Color.Cornsilk

' تعريف متغير يعبر عن مستطيل وستكون ابعاده اقل بمقدا ضئيل عن المستطيل الرئيسي
Dim rect5 As New Rectangle((rect.X + 1), (rect.Y + 1), (rect.Width - 2), (rect.Height - 2))

' رسم الأبعاد الداخلية
Using innerBorderPen As Pen = New Pen(innerBorderColor)
Using path As GraphicsPath = GetRoundedPath(rect5, radius)
e.Graphics.DrawPath(innerBorderPen, path)
End Using
End Using

' رسم أبعاد المستطيل الرئيسي
Using outerBorderPen As Pen = New Pen(outerBorderColor)
Using path As GraphicsPath = GetRoundedPath(rect, radius)
e.Graphics.DrawPath(outerBorderPen, path)
End Using
End Using

e.Graphics.SmoothingMode = mode

End Sub

Private Function GetRoundedPath(ByVal rect As Rectangle, _
ByVal TopLeftRaduis As Integer, _
ByVal TopRightRaduis As Integer, _
ByVal BottomLeftRaduis As Integer, _
ByVal BottomRightRaduis As Integer) As GraphicsPath

If ((TopLeftRaduis = 0) OrElse (TopLeftRaduis < 0)) Then
TopLeftRaduis = 1
End If
If ((TopRightRaduis = 0) OrElse (TopRightRaduis < 0)) Then
TopRightRaduis = 1
End If
If ((BottomLeftRaduis = 0) OrElse (BottomLeftRaduis < 0)) Then
BottomLeftRaduis = 1
End If
If ((BottomRightRaduis = 0) OrElse (BottomRightRaduis < 0)) Then
BottomRightRaduis = 1
End If

Dim x As Integer = rect.X
Dim y As Integer = rect.Y
Dim width As Integer = rect.Width
Dim height As Integer = rect.Height
Dim path As New GraphicsPath

path.AddArc(x, y, TopLeftRaduis, TopLeftRaduis, 180.0F, 90.0F)

If (TopRightRaduis <> 1) Then
path.AddArc(((x + width) - TopRightRaduis), y, TopRightRaduis, TopRightRaduis, 270.0F, 90.0F)
Else
path.AddLine((x + width), y, (x + width), width)
End If

If (BottomRightRaduis <> 1) Then
path.AddArc(((x + width) - BottomRightRaduis), ((y + height) - BottomRightRaduis), BottomRightRaduis, BottomRightRaduis, 0.0F, 90.0F)
Else
path.AddLine(CInt((x + width)), CInt((y + height)), CInt((x + width)), CInt((y + height)))
End If

path.AddArc(x, ((y + height) - BottomLeftRaduis), BottomLeftRaduis, BottomLeftRaduis, 90.0F, 90.0F)
path.CloseFigure()

Return path

End Function

Private Function GetRoundedPath(ByVal rect As Rectangle, ByVal radius As Integer) As GraphicsPath
Return GetRoundedPath(rect, radius, radius, radius, radius)
End Function

End Class

في المشاركة التالية سنقوم بتحويل الكود أعلاه الي دالة أو أكثر من دالة بحيث يسهل استخدامها ولا نحتاج الي تكرار كتابة الكود مرارا وتكرارا وبالتالي يمكن الاستفادة منها بشكل افضل


تقبلوا تحياتي
أخوكم عمر