![\"Hinzufügen](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_001.png\")
<\/p>\nIm Artikel “Bitmaps programmieren mit VB.NET” haben wir gezeigt, wie Sie mit VB.NET Bitmaps erzeugen und die einzelnen Pixel mit Farben füllen beziehungsweise die enthaltenen Farben auslesen. Im vorliegenden Artikel gehen wir einen Schritt weiter: Wir nutzen eine Klasse namens Graphics, um in einem Bitmap zu zeichnen. Dabei zeigen wir die Techniken zum Erstellen der grundlegenden Formen und liefern Know-how, wie Sie Füllungen und Schraffuren hinzufügen. Schließlich speichern wir die erzeugten Bitmaps im Dateisystem und zeigen diese in der jeweiligen Standardapp für die entsprechende Dateiendung an.<\/b><\/p>\nVorbereitung: LINQPad<\/h2>\n
Genau wie im oben genannten Artikel Bitmaps programmieren mit VB.NET <\/b>(www.datenbankentwickler.net\/297<\/b>) verwenden wir auch in diesem Artikel LINQPad als Spielwiese zum Ausprobieren der Beispiele. Hier brauchen wir zum Testen einiger Zeilen Code nicht extra ein VB-Projekt anzulegen und dieses jedes Mal neu zu starten, um die Funktionsweise zu prüfen. Wir geben die gewünschten Zeilen einfach in eine Methode ein und starten diese mit F5 <\/b>– ganz wie es beispielsweise im VBA-Editor möglich ist. Wie Sie LINQPad nutzen, lesen Sie im Artikel LINQPad: LINQ, C# und VB einfach ausprobieren <\/b>(www.datenbankentwickler.net\/100<\/b>).<\/p>\n
Für unser aktuelles Beispiel benötigen wir lediglich eine neue LINQPad-Query mit dem Wert VB Program <\/b>im Auswahlfeld Language<\/b>. Damit wir die Elemente des Namespaces System.Drawing <\/b>verwenden können, fügen wir diesen zu der Query hinzu. Dazu klicken Sie mit der rechten Maustaste auf den Registerreiter der Query und wählen den Eintrag Query Properties… <\/b>aus. Hier wechseln Sie zur Registerseite Additional Namespace Imports <\/b>und geben den Namespace System.Drawing <\/b>einfach ein – ohne Imports<\/b>-Anweisung, wie es direkt in Modulen nötig wäre (siehe Bild 1). Anschließend schließen Sie den Dialog mit der OK<\/b>-Schaltfläche wieder.<\/p>\n
<\/p>\n
Bild 1: Hinzufügen eines Verweises auf den Namespace System.Drawing<\/span><\/b><\/p>\n Auch in diesem Artikel wollen wir die erzeugten Bilder in einem Verzeichnis speichern, wo wir diese schnell wiederfinden. Den Namen dieses Verzeichnisses hinterlegen wir in einer Konstanten, die wir oben im Code wie folgt definieren:<\/p>\n Während Sie in Objekten der Bitmap<\/b>-Klasse mit der Methode SetPixel <\/b>nur die Farbe für einzelne Pixel festlegen können, bietet die Graphics<\/b>-Klasse einige weitere Möglichkeiten. Die Graphics<\/b>-Klasse stellt Methoden wie DrawLine <\/b>zum Zeichnen von Linien oder DrawString <\/b>zum Einfügen von Texten zur Verfügung.<\/p>\n Dabei referenziert das Objekt auf Basis der Graphics<\/b>-Klasse zunächst das Element, dem beispielsweise Linien oder Texte hinzugefügt werden sollen. Um die im oben genannten Artikel vorgestellte Bitmap-<\/b>Klasse direkt einzubinden, nutzen wir die dort erzeugten Bitmaps quasi als Zeichenblatt. Das Graphics<\/b>-Objekt füllen wir dabei mit der From-Image<\/b>-Methode mit dem Bitmap<\/b>-Element.<\/p>\n Danach können wir die nachfolgenden Methoden nutzen, um dem Bitmap<\/b>-Objekt über die Graphics<\/b>-Klasse Elemente hinzuzufügen:<\/p>\n Diese Methoden sehen wir uns in den folgenden Abschnitten im Detail an und stellen dabei weitere benötigte Klassen vor wie beispielsweise solche zur Angabe des zu verwendenden Stiftes.<\/p>\n Den Start machen wir mit einer einfachen Methode, die eine Linie zu einem Bitmap von 480 x 320 Pixeln hinzufügen soll. Im ersten Beispiel nutzen wir die Überladung der DrawLine<\/b>-Methode, welche mit dem ersten Parameter ein Pen<\/b>-Objekt entgegennimmt und mit den übrigen vieren die Koordinaten des Startpunkts und des Endpunkts der zu zeichnenden Linie. Da die Koordinaten 0<\/b>-basiert sind, soll unsere diagonale Linie vom Punkt 0,0 zum Punkt 479, 319 verlaufen:<\/p>\n Hier definieren wir außerdem ein Pen<\/b>-Element, bei dessen Initialisierung wir eine Überladung verwenden, welche nur die Farbe des zu verwendenden Stiftes entgegennimmt – hier Color.Black<\/b>. Das mit objPen <\/b>referenzierte Pen<\/b>-Element übergeben wir als ersten Parameter der DrawLine<\/b>-Methode. Anschließend speichern wir das Bitmap<\/b>-Objekt und zeigen es in der entsprechenden Anwendung an – hier in Paint<\/b>. Das Ergebnis sehen sie in Bild 2.<\/p>\n Bild 2: Eine mit der DrawLine-Methode erstellte Linie.<\/span><\/b><\/p>\n Gegebenenfalls liegen Ihnen der Start- und der Endpunkt der Linie als Koordinaten bereits vor und Sie möchten diese in Form von Point<\/b>-Objekten erfassen. Dazu erstellen Sie wie folgt zwei neue Point<\/b>-Objekte, und zwar vor dem Aufruf der DrawLine<\/b>-Methode:<\/p>\n In der DrawLine<\/b>-Methode geben Sie die Punkte aus objStartpoint <\/b>und objEndpoint <\/b>dann als zweiten und dritten Parameter an:<\/p>\n Die oben gezeichnete Linie ist eine schwarze, durchgezogene Linie mit einer Breite von einem Pixel. Die Farbe Schwarz haben wir beim Erstellen des Pen<\/b>-Elements als Parameter angegeben, die übrigen Eigenschaften werden standardmäßig eingestellt:<\/p>\n Die Breite können Sie mit dem zweiten Parameter einer weiteren Überladung des Konstruktors der Pen<\/b>-Klasse angeben, hier zum Beispiel für eine Linie mit einer Breite von drei Pixeln:<\/p>\n Später schauen wir uns weitere Möglichkeiten der Pen<\/b>-Klasse an.<\/p>\n Die Methode DrawLines <\/b>erlaubt das Zeichnen mehrerer zusammenhängender Linien gleichzeitig, wobei Sie die Koordinaten der Start- und Endpunkte als Point<\/b>-Elemente jeweils mit einem Array übergeben. Im folgenden Beispiel erstellen wir wieder ein Bitmap mit 480 x 320 Pixeln und referenzieren dieses mit dem Graphics<\/b>-Element. Dann erstellen wir das Array der Punkte, wobei die Punkte jeweils als neue Point<\/b>-Elemente angeben. Danach rufen wir die DrawLines<\/b>-Methode auf und übergeben dieser als zweiten Parameter das Array aus obj-Points<\/b> (siehe Methode EinfacherLinienzug <\/b>in der Beispieldatei):<\/p>\n Das Ergebnis sehen wir in Bild 3. Der resultierende Linienzug liefert ein Z.<\/p>\n Bild 3: Ein Linienzug in Z-Form<\/span><\/b><\/p>\n Als Nächstes schauen wir uns an, wie wir Rechtecke zeichnen können. Ein Rechteck erfordert prinzipiell genau wie eine Linie nur die Angabe zweier Koordinaten – die des oberen linken und des unteren rechten Punktes. Zum Erstellen eines Rechtecks verwenden wir die Methode DrawRectangle<\/b>.<\/p>\n Diese erwartet in einer Überladung statt der oben angegebenen Koordinaten jedoch nur eine absolute Koordinate für den ersten Punkt mit x und y sowie mit weiteren Parametern die Angabe der gewünschten Breite und Höhe. Das sieht für ein Rechteck um das komplette Bitmap wie folgt aus (siehe Bild 4):<\/p>\n Bild 4: Ein einfaches Rechteck<\/span><\/b><\/p>\n Sie können allerdings auch eine Rect<\/b>-Struktur erstellen, welche prinzipiell die gleichen Informationen enthält, und diese als zweiten Parameter an die DrawRectangle<\/b>-Methode übergeben. Wir haben das Rechteck nun mit einem Abstand von 10 Pixeln zu den Seitenrändern erstellt.<\/p>\n Das Ergebnis sieht wie in Bild 5 aus, die vollständige Methode finden Sie unter dem Namen EinfachesRechteck_Rect <\/b>in der Beispieldatei:<\/p>\n Bild 5: Ein Rechteck mit 10 Pixeln Abstand zum Rand des Bitmaps<\/span><\/b><\/p>\n Gegebenenfalls möchten Sie das Rechteck auch mit einer Farbe füllen wie in Bild 6.<\/p>\n Bild 6: Gefülltes Rechteck<\/span><\/b><\/p>\n Wider Erwarten gibt es keine Überladung für die DrawRectangle<\/b>-Methode, welche die Angabe einer Füllfarbe zulässt. Stattdessen gibt es eine weitere Methode namens FillRectangle<\/b>, der wir ebenfalls eine Rect<\/b>-Struktur mit den Abmessungen des Rechtecks übergeben können. Außerdem erwartet diese die Füllfarbe in Form eines Brush<\/b>-Elements. Die FillRectangle<\/b>-Methode füllt allerdings kein zuvor noch zu erstellendes Rechteck, sondern sie erstellt ein neues Rechteck, das direkt mit der angegebenen Farbe gefüllt wird. Wenn Sie also beispielsweise ein Rechteck mit einem schwarzen Rahmen erstellen wollen, das mit roter Farbe gefüllt ist, benötigen Sie sowohl den Aufruf einer DrawRectangle<\/b>– als auch einer FillRectangle<\/b>-Methode. In diesem Fall definieren wir das Rechteck mit dem schwarzen Rahmen wie zuvor. Damit das rote, ausgefüllte Rechteck genau innerhalb des schwarzen Rechtecks angezeigt wird und den Rahmen nicht überdeckt, beginnt es bei den Koordinaten x=12 <\/b>und y=12<\/b> (die Linie des schwarzen Rechtecks startet bei (10|10)<\/b>, aber da wir als Breite 3 Pixel angegeben haben, wird auch noch das Pixel (11|11)<\/b> vom Rand des Rechtecks eingenommen – und natürlich noch die anderen Pixel, die innerhalb der eigentlichen Linie liegen). Die Breite und die Höhe stellen wir ebenfalls entsprechend ein. So erstellen wir also zwei Rectangle<\/b>-Objekte namens objRectangle <\/b>und objRectangleFill <\/b>und nutzen diese dann jeweils als zweiten Parameter der Methoden DrawRectangle <\/b>und FillRectangle<\/b>:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>Const strPath As String<\/span> = \"C:\\...\\BitmapTest\\\"<\/pre>\nZeichnen mit Graphics<\/h2>\n
Dim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\nDim <\/span>objGraphics As <\/span>Graphics\r\nobjGraphics = Graphics.FromImage(bmp)<\/pre>\n\n
Eine einfache Linie hinzufügen<\/h2>\n
Sub <\/span>EinfacheLinie\r\n Dim <\/span>strFilename As String<\/span> = \"EinfacheLinie.bmp\"\r\n Dim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\n Dim <\/span>objGraphics As <\/span>Graphics\r\n Dim <\/span>objPen As <\/span>New<\/span> Pen(color.Black)\r\n objGraphics = Graphics.FromImage(bmp)\r\n objGraphics.DrawLine(objPen, 0,0,479,319)\r\n bmp.Save(strPath & strFilename)\r\n Process.Start(strPath & strFilename)\r\nEnd Sub<\/span><\/pre>\n![\"Eine](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_002.png\")
<\/p>\nEinfache Linie mit Point-Elementen als Parameter<\/h2>\n
Dim <\/span>objStartPoint As <\/span>New<\/span> Point(0,0)\r\nDim <\/span>objEndpoint As <\/span>New<\/span> Point(479,319)<\/pre>\nobjGraphics.DrawLine(objPen, objStartPoint, objEndpoint)<\/pre>\n
Den Stift mit der Pen-Klasse anpassen<\/h2>\n
Dim <\/span>objPen As <\/span>New<\/span> Pen(Color.Black)<\/pre>\nDim <\/span>objPen As <\/span>New<\/span> Pen(Color.Black, 3)<\/pre>\nEinen Linienzug zeichnen<\/h2>\n
Dim <\/span>strFilename As String<\/span> = \"EinfacheLinien.bmp\"\r\nDim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\nDim <\/span>objGraphics As <\/span>Graphics\r\nDim <\/span>objPoints As <\/span>Point() = {New<\/span> Point(0,0), New<\/span> Point(479,0), New<\/span> Point(0,319), New<\/span> Point(479,319)}\r\nDim <\/span>objPen As <\/span>New<\/span> Pen(color.Black, 3)\r\nobjGraphics = Graphics.FromImage(bmp)\r\nobjGraphics.DrawLines(objPen, objPoints)\r\nbmp.Save(strPath & strFilename)\r\nProcess.Start(strPath & strFilename)<\/pre>\n![\"Ein](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_003.png\")
<\/p>\nRechtecke zeichnen mit DrawRectangle<\/h2>\n
![\"Ein](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_004.png\")
<\/p>\nDim <\/span>strFilename As String<\/span> = \"EinfachesRechteck.bmp\"\r\nDim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\nDim <\/span>objGraphics As <\/span>Graphics\r\nDim <\/span>objPen As <\/span>New<\/span> Pen(color.Black, 3)\r\nobjGraphics = Graphics.FromImage(bmp)\r\nobjGraphics.DrawRectangle(objPen, 0, 0, 479, 319)<\/pre>\nRechteck auf Basis einer Rect-Struktur erstellen<\/h2>\n
![\"Ein](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_005.png\")
<\/p>\nDim <\/span>strFilename As String<\/span> = \"EinfachesRechteck_Rect.bmp\"\r\nDim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\nDim <\/span>objGraphics As <\/span>Graphics\r\nDim <\/span>objRectangle As <\/span>New<\/span> rectangle(10, 10, 459, 299)\r\nDim <\/span>objPen As <\/span>New<\/span> Pen(color.Black, 3)\r\nobjGraphics = Graphics.FromImage(bmp)\r\nobjGraphics.DrawRectangle(objPen, objRectangle)<\/pre>\nFüllen eines Rechtecks mit einer Farbe<\/h2>\n
![\"Gefülltes](\"..\/fileadmin\/_temp_\/2022_01\/pic_298_006.png\")
<\/p>\nDim <\/span>strFilename As String<\/span> = \"Rechteck_Gefuellt.bmp\"\r\nDim <\/span>bmp As <\/span>New<\/span> Bitmap(480, 320)\r\nDim <\/span>objGraphics As <\/span>Graphics\r\nDim <\/span>objRectangle As <\/span>New<\/span> Rectangle(10, 10, 459, 299)\r\nDim <\/span>objRectangleFill As <\/span>New<\/span> Rectangle(12, 12, 456, 296)\r\nDim <\/span>objPen As <\/span>New<\/span> Pen(color.Black, 3)\r\nDim <\/span>objBrush As <\/span>New<\/span> SolidBrush(color.Red)\r\nobjGraphics = Graphics.FromImage(bmp)\r\nobjGraphics.DrawRectangle(objPen, objRectangle)\r\nobjGraphics.FillRectangle(objBrush, objRectangleFill)<\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t