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
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...
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.
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
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:
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.
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!
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:
VB.NET-Quellcode
- Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
- Dim Points As New List(Of Point)
- Points.Add(New Point(50, 50))
- Points.Add(New Point(50, 250))
- Points.Add(New Point(50, 250))
- Points.Add(New Point(150, 250))
- Points.Add(New Point(250, 100))
- Points.Add(New Point(250, 250))
- Dim PointArray() As Point = Points.ToArray
- 'Zeichnen
- Draw(e.Graphics, PointArray)
- End Sub
- Sub Draw(ByVal Gra As Graphics, ByVal points() As Point)
- Dim Pen As New Pen(Color.Black, 5)
- With Gra
- .Clear(Color.White)
- .DrawLines(Pen, points)
- End With
- 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...
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.
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
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:
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.
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“ ()