[TUTORIAL] Pen & Linien in GDI+

    • VB.NET

      [TUTORIAL] Pen & Linien in GDI+

      Hallo^^
      Ich denke die meisten von euch wissen, wie man Linien mit GDI+ zeichnet. Bei vielen hört es nach Einstellung der Liniendicke und Farbe aber dann auf...
      In meinem Tutorial will ich zeigen wie man verschiedene Linien zeichnet (gestrichelt, gepunktet, Farbig, Texturiert), deren Verbindungsarten (abgerundet, eckig, etc) erklären und ein paar tipps geben wie man kompliziert wirkende "Speziallinien" ganz einfach erzeugt. Ich hoffe ich kann dem ein oder anderem damit helfen oder vllt sogar etwas neues beibringen.

      Vorbereiten um den Code im Tutorial zu testen
      Erstelle einfach nur eine Forms-Anwendung, platziere ein PictureBox (size = 300;300) darauf und kopiere den folgenden Code in die Form1-Klasse:
      Spoiler anzeigen

      VB.NET-Quellcode

      1. Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
      2. Dim Points As New List(Of Point)
      3. Points.Add(New Point(50, 50))
      4. Points.Add(New Point(50, 250))
      5. Points.Add(New Point(50, 250))
      6. Points.Add(New Point(150, 250))
      7. Points.Add(New Point(250, 100))
      8. Points.Add(New Point(250, 250))
      9. Dim PointArray() As Point = Points.ToArray
      10. 'Zeichnen
      11. Draw(e.Graphics, PointArray)
      12. End Sub
      13. Sub Draw(ByVal Gra As Graphics, ByVal points() As Point)
      14. Dim Pen As New Pen(Color.Black, 5)
      15. With Gra
      16. .Clear(Color.White)
      17. .DrawLines(Pen, points)
      18. End With
      19. End Sub

      beim Starten der Anwendung wird automatisch die Beispiel-Linie durch den Sub Draw gezeichnet. Mit diesem werde ich auch im weiteren verlauf arbeiten, sodass ich nur noch den angepassten code dieses Subs hier posten werde.


      1) Einfache Linien - Variable Liniendicke und Farbe
      Das ändern von Farbe und Dicke der zu zeichnenden Linien ist ja noch ganz einfach...

      Spoiler anzeigen

      VB.NET-Quellcode

      1. Dim Pen As New Pen(Color.Black, 3) 'entweder direkt beim erstellen des Pens oder...
      2. With Pen '..im nachhinein
      3. .Color = Color.Red 'Farbe verändert
      4. .Width = 7 'Dicke verändern
      5. End With
      6. With Gra
      7. .Clear(Color.White)
      8. .DrawLines(Pen, points)
      9. End With



      2) Linien gestrichelt/gepunktet darstellen
      Um Linien gestrichelt darzustellen hat man zwei möglichkeiten: Man vernändert den .DashStyle des Pens oder (wenn man mehr freiheit haben will) den .DashPattern


      Möglichkeit 1 - DashStyle verändern

      Das sollte eigentlich für sich sprechen, für den, der die Abstände anpassen möchte wird es jetzt interessant:

      Möglichkeit 2 - DashPattern
      Hier hat man die Freiheit eigene Kombinationen aus Unterbrechen und Zeichnen zu erstellen. Grundlage hierfür ist ein Single-Array der angibt wie Lang unterbrochen oder gezeichnet wird:

      Wichtig, der DashStyle muss dabei auf Custom gesetzt sein und die späteren Abstände hängen von der Dicke des Pens (pen.width) ab. Der Abstand einer Eiheit im Single-Array entspricht der Dicke der Linie.
      Spoiler anzeigen

      VB.NET-Quellcode

      1. Dim Pen As New Pen(Color.Black, 5)
      2. With Pen
      3. 'Möglichkeit 1
      4. .DashStyle = Drawing2D.DashStyle.DashDotDot
      5. ''Möglichkeit 2
      6. '.DashPattern = New Single() {4, 4, 1, 2, 1, 4}
      7. End With
      8. With Gra
      9. .Clear(Color.White)
      10. .DrawLines(Pen, points)
      11. End With



      3) Textur statt Farbe
      Nur eine Farbe? Das ist doch langweilig! Natürlich ist es auch möglich eine Textur zu zeichnen. Praktisch ist dies, wenn man z.b. eine Dicke linie schraffiert darstellen möchte

      Spoiler anzeigen

      VB.NET-Quellcode

      1. Dim Pen As New Pen(Color.Black, 20)
      2. Dim Texture As New Bitmap("C:\bild.bmp") 'ACHTUNG: Das Laden der Textur in der Zeichenroutine ist schlecht!
      3. With Pen
      4. .Brush = New TextureBrush(Texture)
      5. End With
      6. With Gra
      7. .Clear(Color.White)
      8. .DrawLines(Pen, points)
      9. End With



      4) Verbundlinie
      Stell dir vor, du hättest in der Schule mit deinem füller zu feste aufgedrückt, sodass sich das metall verbogen hätte. Würde man damit schreiben wäre jede Linie doppelt gezogen. Soetwas kann man (etwas gewaltfreier) auch mit dem Pen machen. Stichwort hierfür ist .CompoundArray:

      Spoiler anzeigen

      VB.NET-Quellcode

      1. Dim Pen As New Pen(Color.Black, 50)
      2. Pen.CompoundArray = New Single() {0.0, 0.3, 0.6, 0.7, 0.8, 1.0}
      3. With Gra
      4. .Clear(Color.White)
      5. .DrawLines(Pen, points)
      6. End With




      5) Verbindungsarten
      Da eckige oder teilweise nicht verbundene Stücke (tritt besonders dann auf, wenn die linie nicht durchgehend gezeichnet werden kann) sehen unschön aus. Beginn, Ende und die stellen an denen eine Linie in eine andere übergeht können z.b. Abgerundet gezeichnet werden.

      Spoiler anzeigen

      VB.NET-Quellcode

      1. Dim Pen As New Pen(Color.Black, 20)
      2. With Pen
      3. .StartCap = Drawing2D.LineCap.Flat
      4. .LineJoin = Drawing2D.LineJoin.Round
      5. .EndCap = Drawing2D.LineCap.Triangle
      6. End With
      7. With Gra
      8. .Clear(Color.White)
      9. .DrawLines(Pen, points)
      10. End With






      So, dass war mein Tutorial. Ich hoffe es ist ausführlich genug (habe recht wenig erklärt, da die Bilder in kombination mit den paar zeilen code selbsterklärend sein sollten..).

      Über Rückmeldungen würde ich mich freuen!

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „FreakJNS“ ()