+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182)
+--- قسم : قسم اسئلة VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=183)
+--- الموضوع : [VB.NET] How to display image as a Grid? (/showthread.php?tid=22673)
How to display image as a Grid? - amna jamal - 23-11-17
السلام عليكم
انا طالبة و اقوم بتصميم برنامج على visual studio 2013 و لدي بعض الصعوبات لانني اقوم بدراسة الفيجوال بيسك عن طريق الانترنت
الان لدي مشكلة في اتمام بعض الافكار, اريد ان اعرض صورة قام باختيارها المستخدم على شكل شبكة
اي انه يعض الصورة المختارة في pictureBox في مجموعة من الخلايا وكأنها Grid
اتمنى ان اجد اي مساعدة منكم
ولكم جزيل الشكر
RE: How to display image as a Grid? - HASAN6.0 - 23-11-17
PHP كود :
Dim i As Integer = 0
Dim i2 As Integer = 0
Dim distance As Integer = 15
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim g As Graphics
g = PictureBox1.CreateGraphics
Dim blackpen As New Drawing.Pen(Color.Gray)
While i <= PictureBox1.Height
g.DrawLine(blackpen, 0, i, PictureBox1.Width, i)
i += distance
End While
While i2 <= PictureBox1.Width
g.DrawLine(blackpen, i2, 0, i2, PictureBox1.Height)
i2 += distance
End While
End Sub
RE: How to display image as a Grid? - silverlight - 24-11-17
هناك أسلوبان لتحقيق هدفك
الأسلوب الأول و هو الأسهل
هنا نأخذ الصورة و نرسم عليها شبكة الجريد بأي لون نحدده و بعدد المربعات التي نحددها
من عيوب هذا الأسلوب اننا نؤثر علي ألوان الصورة الأصليةبسبب استخدامنا لون معين لكي نرسم الجريد
الأسلوب الثاني و هو الأصعب
وهنا نتعامل مع كل بكسل في الصورة و نعيد بناء الصورة لتعطي الإيحاء بشكل الجريد
والأسلوب هذا هو الأفضل لأنه يجعلنا نخافظ علي ألوان الصورة الأصلية
و الجريد يظهر وكأنه جزء من ألوان الصورة الأصلية
فقط عليك تحديد ماهو الأسلوب الأفضل لك و سأضع لك الكود الخاص ب الأسلوبان لاحقا
RE: How to display image as a Grid? - silverlight - 24-11-17
الكزد التالي يوضح كيف نرسم الجريد علي الصورة مباشرة
وهذا هو الأسلوب الأسهل لك
فقط عليك تحديد الصورة المراد رسم الجريد عليها
أنا هنا استخدمت صورة موجودة في ريسورس المشروع حتي أتأكد فقط أن الكود يعمل جيدا
تحدد الصورة
PHP كود :
Dim bmp As Bitmap = My.Resources.rm
نحدد اللون المستخدم في رسم الجريد
PHP كود :
Dim gridColor As Color = Color.Blue
نحدد أبعاد الخلية المستخدمة في الجريد و هنا أنا أفترض أنك تريد الخلايا مربعة الشكل
PHP كود :
Dim cellSize As Single = 5
نرسم الجريد علي الصورة
PHP كود :
Using g As Graphics = Graphics.FromImage(bmp)
Dim clip As RectangleF = g.VisibleClipBounds
Using cellPen As New Pen(gridColor)
Dim x As Single = clip.Left + cellSize
While x < clip.Right
g.DrawLine(cellPen, x, clip.Top, x, clip.Bottom)
x += cellSize
End While
Dim y As Single = clip.Top + cellSize
While y < clip.Bottom
g.DrawLine(cellPen, clip.Left, y, clip.Right, y)
y += cellSize
End While
g.DrawRectangle(cellPen, New Rectangle(clip.Left, clip.Top, clip.Width - 1, clip.Height - 1))
End Using
أخيرا نقوم بعرض الصورة في بكتشر بوكس أو نحفظها إن أردنا لاحقا
PHP كود :
PictureBox1.Image = bmp
RE: How to display image as a Grid? - silverlight - 24-11-17
حل أخر
حيث هنا نستطيع تحديد عدد خلايا الجريد
ايضا عملية الرسم تتم بحيث تكون ابعاد الخلايا متناسبة مع أبعاد الصورة
أيضا نستطيع ان نتحكم في ابعاد الخلية الواحدة
ايضا نستطيع أن نتحكم في شفافية اللون المستخدم في رسم الجريد
الكود كاملا
PHP كود :
Dim bmp As Bitmap = My.Resources.rm
Dim sourceColor As Color = Color.Blue
Dim horizCellNumber As Integer = 8
Dim vertCellNumber As Integer = 8
Dim alpha As Byte = 150
alpha = Byte.MaxValue - alpha
Dim gridColor As Color = Color.FromArgb(CInt((1 - (alpha / Byte.MaxValue)) * Byte.MaxValue), sourceColor)
Dim cellSizeW As Single = bmp.Width / horizCellNumber
Dim cellSizeH As Single = bmp.Height / vertCellNumber
Using g As Graphics = Graphics.FromImage(bmp)
Dim clip As RectangleF = g.VisibleClipBounds
Using cellPen As New Pen(gridColor)
Dim x As Single = clip.Left + cellSizeW
While x < clip.Right
g.DrawLine(cellPen, x, clip.Top, x, clip.Bottom)
x += cellSizeW
End While
Dim y As Single = clip.Top + cellSizeH
While y < clip.Bottom
g.DrawLine(cellPen, clip.Left, y, clip.Right, y)
y += cellSizeH
End While
g.DrawRectangle(cellPen, New Rectangle(clip.Left, clip.Top, clip.Width - 1, clip.Height - 1))
End Using
End Using
PictureBox1.Image = bmp
RE: How to display image as a Grid? - amna jamal - 24-11-17
(23-11-17, 12:51 PM)HASAN6.0 كتب :مشكور اخي بارك الله فيك وجزاك الله الف خير.
اريد ان اسأل سؤال ثاني من بعد اذنك, هل يمكن التعامل مع هذه الخلايا, اي انه بعدما تم تقسيم الصوره كشبكة هل يمكنني الوصول الى هذه الخلايا واعطائها اسم افتراضي ويمكنني استرجاعه؟؟ والتعامل معه؟؟
(24-11-17, 12:46 AM)silverlight كتب : هناك أسلوبان لتحقيق هدفكالسلام عليكم
مشكور اخي بارك الله فيك وجزاك الله الف خير.
اريد ان اسأل سؤال ثاني من بعد اذنك, هل يمكن التعامل مع هذه الخلايا, اي انه بعدما تم تقسيم الصوره كشبكة هل يمكنني الوصول الى هذه الخلايا واعطائها اسم افتراضي ويمكنني استرجاعه؟؟ والتعامل معه؟؟
الفكرة هي انني اريد من المستخدم اختيار صورة وعندما يقوم باختيارها يقوم النظام بعرضها له كشبكشبة.
بعدما يتم عرضها كشبكة يجب على المستخدم ان يختار على الاقل خليتين من الشبكة.
ثم يقوم النظام بتخزين اسم الصورة+ عنوان الخلايا التي تم اختيارها في الداتا بيس. اتمنى ان اجد لديكم الاجابة.
واشكرك مرة ثانية للاستجابة والرد على سؤالي
RE: How to display image as a Grid? - silverlight - 25-11-17
نعم يمكن الوصول الي الخلايا
لكن في تلك الحالة فإن إستراتيجية رسم الجريد سوف تختلف تماما عن الأكواد المكتوبة سابقا
حيث هنا يجب أن نبني مصفوفة ثنائية نحفظ فيها الخلايا او مصفوفة المستطيلات
وهذا يتم عن طريق حساب خلايا الجريد اولا ثم يعد ذلك نضيفها لمصفوفة المستطيلات او مصفوفة الخلايا
ثم نرسم مصفوفة الجريد بعد ذلك علي الصورة
ثم بعد ذلك و في الحدث Mouse Down نقوم بعمل Loop علي المصفوفة الثنائية و نحدد الخلية التي تم اختيارها بواسطة الماوس
وهنا نضيف الخلية التي تم اختيارها الي مصفوفة جديدة هي مصفوفة المستطيلات التي تم اختيارها بواسطة المستخدم
ومن ثم وأخيرا نحفظ هذه المصفوفة في الداتا بيز
الموضوع معقد قليلا لكنه ليس صعبا علي الاطلاق
RE: How to display image as a Grid? - silverlight - 27-11-17
الكود التالي يوضح أحد الأفكار لرسم الجريد ثم و عند اختيارة خلية معينة يتم اعادة تلوينها
الكود يعتبر أساس جيد لتنفيذ فكرتك
انا هنا رسمت الجريد علي الفورم مباشرة
و اعتقد ان عليك استخدام نفس الأسلوب لرسم الجريد علي الكونترول الذي تحدده أنت
PHP كود :
Public Class Form1
Private cellCount As Integer = 100
Private cellPerRow As Integer = 10
Private cellSize As Integer = 20
Private cells As List(Of Rectangle) = Nothing
Private clikedCells As List(Of Rectangle) = New List(Of Rectangle)()
Private selectedCell As Rectangle = Nothing
Private xStart As Integer = 0
Private yStart As Integer = 0
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.DoubleBuffered = True
Me.SetupCells()
End Sub
Private Sub SetupCells()
cells = New List(Of Rectangle)()
Dim indent As Integer = 0
Dim rows As Integer = cellCount / cellPerRow
Dim x As Integer = xStart
Dim y As Integer = yStart
Dim rectSize As Size = New Size(cellSize, cellSize)
For i = 0 To rows - 1
y = xStart
For j As Integer = 1 To cellPerRow
Dim pt As New Point(y, x)
Dim cell As New Rectangle(pt, rectSize)
cells.Add(cell)
y += (cellSize + indent)
Next
x += (cellSize + indent)
Next
End Sub
Private Sub DrawCells(g As Graphics, cellBackColor As Color, cellBorderColor As Color)
For Each cell As Rectangle In cells
g.FillRectangle(New SolidBrush(cellBackColor), cell)
g.DrawRectangle(New Pen(cellBorderColor), cell)
Next
End Sub
Protected Overrides Sub OnPaint(e As PaintEventArgs)
MyBase.OnPaint(e)
DrawCells(e.Graphics, Me.BackColor, Color.Red)
' ----------------------------------
' هذاالسطر من الكود للتوضيح فقط
If Me.selectedCell <> Nothing Then
Dim r As Rectangle = Me.selectedCell
r.X += 2
r.Y += 2
r.Width -= 4
r.Height -= 4
e.Graphics.FillRectangle(New SolidBrush(Color.Blue), r)
End If
' ----------------------------------
End Sub
Protected Overrides Sub OnMouseDown(e As MouseEventArgs)
MyBase.OnMouseDown(e)
Me.selectedCell = Me.GetSelectedCell(e.Location)
If selectedCell <> Nothing Then
If Not clikedCells.Contains(selectedCell) Then
Me.clikedCells.Add(selectedCell)
' ----------------------------------
' هذاالسطر من الكود للتوضيح فقط
Me.Text = selectedCell.ToString
Me.Invalidate(selectedCell)
' ----------------------------------
End If
End If
End Sub
Protected Overrides Sub OnSizeChanged(e As EventArgs)
MyBase.OnSizeChanged(e)
Me.SetupCells()
Me.Invalidate()
End Sub
Protected Overrides Sub OnLocationChanged(e As EventArgs)
MyBase.OnLocationChanged(e)
Me.SetupCells()
Me.Invalidate()
End Sub
Private Function GetSelectedCell(pt As Point) As Rectangle
For Each cell As Rectangle In cells
If cell.Contains(pt) Then
Return cell
Exit For
End If
Next
Return Nothing
End Function
End Class