+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182)
+--- قسم : قسم مقالات VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=184)
+--- الموضوع : التعامل مع الصور Images في بيئة الدوت نت باستخدام +GDI - الجزء الأول (/showthread.php?tid=4839)
التعامل مع الصور Images في بيئة الدوت نت باستخدام +GDI - الجزء الأول - RaggiTech - 02-10-12
كاتب الموضوع : silverlight
التعامل مع الصور Images في بيئة الدوت نت باستخدام +GDI اللغة المستخدمة: الفيجوال بيسك
التطبيق: فيجوال استوديو 2005 و 2008
المستوي: التقييم متروك للقارئ
إعداد: مهندس / عمر أمين إبراهيم
هناك أكثر من أسلوب أو أكثر من طريقة لكي نضيف صورا الي الفورم ومن ثم نعرض هذه الصور داخل الفورم و بعض هذه الطرق يمكن تصنيفها كالتالي:-
الطريقة الأولي: استخدام اسم ملف لصورة ما.
الطريقة الثانية: استخدام Resources الخاصة بالمشروع
الطريقة الثالثة: استخدام ImageList Control
الطريقة الرابعة: استخدام ToBase64String مع MemoryStream
الطريقة الخامسة: استخدام OpenFileDialog
الطريقة السادسة: تعريف الصورة عن طريق Size معين وأيضا من الممكن استخدام PixelFormat ورسمها من الصفر ولقد أعطينا مثالا علي ذلك في المقدمة الخاصة بالمقال
وللمزيد من التفاصيل يمكنكم دراسة Bitmap Class ومعرفة كيفية إنشاء الصورة. أي عليكم دراسة Constructor الخاص بهذا الكلاس
الأن لنوضح كيفية استخدام بعض الطرق أعلاه
الطريقة الأولي:
هذه الطريقة تعتمد علي استخدام اسم الملف ومكانه علي الهارد ديسك
لو أننا بالفعل نعلم مكان الصورة واسم الملف الخاص بالصورة الموجودة علي الهارد ديسك فكل ما علينا عمله هو أن نقوم بتعريف هذه الصورة ومن ثم نقوم بعرضها داخل PictureBox أو من الممكن أن نقوم برسم الصورة بأي مكان داخل الفورم وهذه الطريقة ليست فعالة تماما
والسبب في عدم فعالية هذه الطريقة أننا عندما نقوم بتصميم برنامج ما فإننا لا نصممه لأنفسنا فقط وبما أن الصورة التي نستخدمها موجودة فقط داخل جهاز الكمبيوتر لدينا فإنه سوف يحدث خطأ عند تحميل الصورة وذلك عندما يقوم شخص أخر باستخدام البرنامج علي جهاز الكمبيوتر الخاص به ولكننا سوف نري كيف نستفيد من هذا الأسلوب بفعالية أكثر لاحقا
مثال علي الطريقة الأولي
افتح مشروع جديد ثم عليك إضافة PictureBox إليه ثم اكتب الكود التالي
كود :
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim bmp As Bitmap = New Bitmap("C:\img.gif")
PictureBox1.Image = bmp
End Sub
End Classمثال أخر علي الطريقة الأولي
افتح مشروع جديد ثم عليك إضافة PictureBox و أيضا أضف له باتون ثم اكتب الكود التالي
كود :
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim bmp As Bitmap = New Bitmap("C:\img.gif")
PictureBox1.Image = bmp
End Sub
End Classإذن كيف نبتعد قليلا عن هذه المشكلة وأقصد هنا مشكلة عدم وجود الملف علي جهازك. ممكن مثلا أن نضع شرطا بحيث انه لو لم تكن الصورة موجودة علي جهاز المستخدم فإنه لا يتم تنفيذ الكود وتظهر رسالة توضح للمستخدم أن الصورة ليست موجودة علي جهازه والكود التالي يوضح ذلك
كود :
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Try
Dim bmp As Bitmap = New Bitmap("C:\img.gif")
PictureBox1.Image = bmp
Catch ex As Exception
MessageBox.Show("الصورة المستخدمة غير موجودة علي جهاز الكمبيوتر لديك من فضلك استخدم صورة اخري", "Error", MessageBoxButtons.OK, MessageBoxIcon.Error)
End Try
End Sub
End Classالطريقة الثانية:
تعتمد هذه الطريقة علي إضافة الصور الي Resources الخاصة بالمشروع
وهذه الطريقة أفضل قليلا من الطريقة الأولي وهي ببساطة أننا نضيف الصور الي Resources الخاصة بالمشروع وبالتالي ستكون الصور موجودة مع البرنامج ومن ثم يمكن أن نستخدمها في أي وقت داخل البرنامج الخاص بنا بدون أن يحدث خطأ ولكن علينا أن نضع في حساباتنا شيئا هاما وهو انه كلما أضفنا صورا كثيرة الي Resources المشروع فإن الحجم النهائي للمشروع يكون كبيرا جدا لذلك فإن أهم نقاط القصور في استخدام هذا الأسلوب هو أن حجم البرنامج سيكون كبيرا كلما أضفنا صورا أكثر للمشروع
ولنتعلم أولا كيف نضيف صورة الي Resources المشروع والطريقة قد تكون صعبة قليلا لمن لم ينفذا سابقا ولكنها في النهاية أسلوب تكراراي فلو فعلتها مرة تستطيع أن تفعلها ملايين المرات بعد ذلك
يتم إضافة صورة الي Resources المشروع عن طريق إتباع الخطوات التالية
الذهاب الي نافذة Solution Explorer حيث سنجد في اعلي النافذة أربعة أيقونات وهنا نقوم بالضغط علي الأيقونة الثانية من جهة اليسار
عند الضغط علي هذه الأيقونة بالماوس سيظهر لنا جميع الملفات الموجودة تحت فهرس المشروع الخاص بنا ونختار منها MyProject
ثم نختار Resources وهنا سنجد أن هناك أيقونات أخري قد ظهرت في نافذة Solution Explorer وعلينا أن نختار منها الأيقونة الأولي من جهة اليمين ويمكن تنفذ هذه الخطوة بأن نقف بالماوس علي كلمة Resources ونضغط يمين الماوس وهنا ستظهر لنا ContextMenu نختار منها View Designer وهنا ستفتح لنا نافذة أخري ومنها سنجد مجموعه من الباتون في أعلاها ونختار منها Add Resource وهو باتون به سهم صغير و رأس هذا السهم متجهه لأسفل ولو ضغطنا بالماوس علي هذا السهم الصغير ستظهر لنا Drop Down Menu نختار منها Add Existing File ثم نختار الملف أو الملفات التي نريد إضافتها للمشروع وطبعا سوف نضيف علي الأقل هنا ملف لأي صورة موجودة علي جهازنا
بعد إضافة الصورة سنجد أن الفيجوال استوديو قد قام بإنشاء فهرس اسمه Resources حيث يمكننا الأن رؤية هذا الفهرس من داخل نافذة Solution Explorer
من الأشياء الهامة التي يجب أخذها في الاعتبار عند حذف صورة ما من Resources هو أن نفعل ذلك من داخل نافذة Resources نفسها أولا قبل أن نحذف الصورة من داخل فهرس Resources الذي تم إضافته للمشروع
الأن وقد أصبح لدينا صورة ما موجودة بالفعل داخل Resources المشروع الخاص بنا فإن كل ما علينا أن نفعله أن نستخدمها والمثال التالي يوضح ذلك
مثال علي الطريقة الثانية
افتح مشروع جديد ثم عليك إضافة PictureBox و أيضا أضف له باتون ثم اكتب الكود التالي
كود :
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim bmp As Bitmap = New Bitmap(My.Resources.img)
PictureBox1.Image = bmp
End Sub
End Classكود :
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim bmp As Bitmap = New Bitmap(My.Resources.img)
PictureBox1.Image = bmp
End Sub
End Classكود :
Public Class Form1
Dim bmp As Bitmap = New Bitmap(My.Resources.img)
Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
e.Graphics.DrawImage(bmp, New Rectangle(0, 0, 100, 100))
End Sub
End Classكود :
Public Class Form1
Dim bmp As Bitmap = New Bitmap(My.Resources.img)
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
DoubleBuffered = True
End Sub
Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
e.Graphics.DrawImage(bmp, Me.ClientRectangle)
End Sub
Private Sub Form1_Resize(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Resize
Invalidate()
End Sub
End Classنذهب الي الفهرس Resources الموجود في نافذة Solution Explorer ثم نختار الصورة ثم من نافذة Properties نقوم بتغيير نوع Build Action لهذه الصورة الي Embedded Resource
الطريقة الثالثة:
تعتمد هذه الطريقة علي أن نضيف صور الي المشروع عن طريق استخدام ImageList Control
ثم نضيف صورة أو مجموعه من الصور الي ImageList Control عن طري الصفة Images و لكن علينا أن نراعي شيئا هاما عند استخدام هذا الكونترول وهو أن أقصي أبعاد للصورة التي من الممكن أن نضيفها لهذا الكونترول يجب أن لا تتعددي 256*256 وهذان البعدان يمثلان طول وعرض الصورة وأيضا عند استخدام صور أبعادها تساوي 256*256 سنجد أن الصورة لا تظهر بشكلها الطبيعي عند عرضها في الفورم داخل PictureBox مثلا أو حتى عند محاولة رسمها داخل الفورم وهذا أحد أوجه القصور في هذا الكونترول.
طبعا كلنا نعلم انه بعد إضافة الصور فإن كل صورة داخل هذا الكونترول سيكون لها رقم أو Index حيث من الممكن أن نستدعي أي صورة موجودة داخل هذا الكونترول باستخدام Index الخاص بها
ملحوظة: يفضل استخدام هذه الطريقة مع الصور التي أبعادها صغيرة مثل الأيقونات علي سبيل المثال
مثال علي الطريقة الثالثة
افتح مشروع ثم عليك أن تضيف الي الفورم ImageList Control ثم أضف الي هذه الكونترول مجموعة من الصور المختلفة ثم يمكنك أن تستخدم الكود بالشكل التالي لعرض الصور داخل PictureBox أو من الممكن رسم الصورة داخل الفورم نفسه
كود :
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim bmp As Bitmap = ImageList1.Images(0)
PictureBox1.Image = bmp
PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage
End Sub
End Classشكل أخر للمثال هو أن نرسم الصورة داخل الفورم
كود :
Public Class Form1
Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
Dim bmp As Bitmap = ImageList1.Images(0)
e.Graphics.DrawImage(bmp, New Rectangle(0, 0, bmp.Width, bmp.Height))
End Sub
End Classالتعامل مع الصور Images في بيئة الدوت نت باستخدام +GDI - الجزء الأول - RaggiTech - 02-10-12
مثال علي الطريقة الرابعة
افتح مشروع جديد وأضف له PictureBox ثم استخدم الكود التالي
كود :
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim s As String = "Qk16AQAAAAAAADYAAAAoAAAAIwAAAAMAAAABABgAAAAAAAAAAADEDgAAxA4AAAAAAAAAAAAAuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5ANj+RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5ANj+RzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMANj+"
Dim ImageStream As IO.Stream = New System.IO.MemoryStream(Convert.FromBase64String(s))
Dim bmp As Bitmap = New Bitmap(ImageStream)
PictureBox1.Image = bmp
PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage
End Sub
End Classافتح مشروع ثم استخدم الكود التالي لرسم الصورة من داخل الحدث Paint الخاص بالفورم
كود :
Public Class Form1
Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
Dim s As String = "Qk16AQAAAAAAADYAAAAoAAAAIwAAAAMAAAABABgAAAAAAAAAAADEDgAAxA4AAAAAAAAAAAAAuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5uGMyuGMy+/n5+/n5ANj+RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5wm8/RzIomHRh+/n5ANj+RzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMzHtMRzIoRzIozHtMANj+"
Dim ImageStream As IO.Stream = New System.IO.MemoryStream(Convert.FromBase64String(s))
Dim bmp As Bitmap = New Bitmap(ImageStream)
e.Graphics.DrawImage(bmp, New Rectangle(0, 0, 100, 100))
End Sub
End Classتعتمد هذه الطريقة علي استخدام OpenFileDialog ومن ثم تحميل الصورة أو رسمها أو استخدامها كما نريد
مثال علي الطريقة الخامسة
افتح مشروع جديد وأضف الي الفورم OpenFileDialog وباتون و PictureBox ثم استخدم الكود التالي
كود :
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
With OpenFileDialog1
.Multiselect = False
.Filter = "All Files|*.*|Bitmaps|*.bmp|GIFs|*.gif|JPEGs|*.jpg|PNGs|*.png"
.FilterIndex = 1
.FileName = ""
End With
If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
With PictureBox1
.Image = Image.FromFile(OpenFileDialog1.FileName)
.SizeMode = PictureBoxSizeMode.CenterImage
End With
End If
End Sub
End Classوهذه الطريقة سيكون لها مقال خاص بها لأهميتها
الأن وبعد أن ناقشنا كيفية إضافة الصور في بيئة الدوت نت لنسأل أنفسنا كيف نستفيد من مجموعة الأكواد السابقة بحيث يكون لدينا بالنهاية داله أو Function معينة يمكننا استخدامها في أي وقت نشاء وكما تحدثت سابقا فإن الهدف من هذا المقال هو إنشاء كلاس عام يمكننا أن نحوله الي ملف DLL وبالتالي يمكن أن نستخدمه في أي وقت نشاء بدون الحاجة الي تكرار كتابة الكود أكثر من مرة داخل الفورم
هيا بنا نبني أول Function من مجموعة الأكواد السابقة الخاصة بالجزء الأول في موضوعنا هذا وهو كيفية إضافة الصور الي الفورم
الكود التالي يوضح شكل Function ولقد أطلقت عليها اسم LoadImageFile
كود :
Public Shared Function LoadImageFile()
Dim ofd As New OpenFileDialog
With ofd
.Multiselect = False
.Filter = "All Files|*.*|Bitmaps|*.bmp|GIFs|*.gif|JPEGs|*.jpg|PNGs|*.png"
.FilterIndex = 4
.FileName = "Select image file"
End With
Dim bmpFile As String = ofd.FileName
If ofd.ShowDialog() <> DialogResult.OK Then
bmpFile = Nothing
Else
bmpFile = ofd.FileName
End If
LoadImageFile = bmpFile
End Function ' LoadImageFile Functionوكما تلاحظون أيضا أنه باستخدام هذه Function فإننا نعطي مستخدم البرنامج الأفضلية في اختيار وتحديد الصورة التي يريد إضافتها الي البرنامج آو الي الفورم
طبعا نفس الفكرة من الممكن استخدامها ليس فقط مع الصور ولكن يمكن استخدامها مع ملفات أخري أي أنك عزيزي القارئ يمكن أن تقوم بتطوير هذه Function وبالتالي تستخدمها كيفما شئت
و لقد قمت باستخدام Public Shared لأنني أنوي أن استخدم هذه Function في كلاس منفرد وذلك في أخر المقال
مثال علي استخدام Public Shared Function LoadImageFile()
ولتنفيذ المثال افتح مشروع جديد ثم أضف الي الفورم PictureBox و Button ثم استخدم الكود بالشكل التالي
كود :
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim bmpFileName As String = LoadImageFile()
If bmpFileName Is Nothing Then Exit Sub
Dim bmp As Bitmap = New Bitmap(bmpFileName)
PictureBox1.Image = bmp
PictureBox1.SizeMode = PictureBoxSizeMode.CenterImage
End Sub
Public Shared Function LoadImageFile()
Dim ofd As New OpenFileDialog
With ofd
.Multiselect = False
.Filter = "All Files|*.*|Bitmaps|*.bmp|GIFs|*.gif|JPEGs|*.jpg|PNGs|*.png"
.FilterIndex = 4
.FileName = "Select image file"
End With
Dim bmpFile As String = ofd.FileName
If ofd.ShowDialog() <> DialogResult.OK Then
bmpFile = Nothing
Else
bmpFile = ofd.FileName
End If
LoadImageFile = bmpFile
End Function ' LoadImageFile Function
End Classبالتوفيق
أخوكم عمر