Obwohl es sich bei SVG um Vektorgrafiken handelt, können Sie diese ebenfalls interaktiv mit der Maus in ein Webbrowser-Steuerelement zeichnen. Das Verfahren hat gegenüber den Pixel-Grafiken von HTML5 sogar noch einige Vorzüge, die die hier vorgestellte Lösung anbietet und erläutert. Mit keiner anderen Methode lassen sich auf so einfache Weise Grafiken erzeugen und in Tabellen abspeichern.
Referenz
Die Ausführungen dieses Beitrags setzen jene aus dem Artikel SVG als Grafikkomponente in dieser Ausgabe fort. Dort sind bereits die Grundlagen zum Einsatz des Webbrowser-Steuerelements im Verein mit SVG beschrieben.
SVG-Zeichnen im Unterschied zur Alternative HTML5
Im Beitrag Malen und Zeichnen mit HTML5 veröffentlichten wir eine Beispielanwendung, über die Sie mit der Maus oder mit einem Grafiktablett in eine Zeichenfläche malen können. Die dabei entstehende Pixel-Grafik können Sie dabei in eine Bilddatei oder direkt binär in eine Tabelle abspeichern.
Hier bauen wir diese Anwendung nach und verwenden dabei SVG im Webbrowser-Steuerelement, wobei der Komfort des Malformulars noch etwas erhöht wird. Die Vorteile der SVG-Lösung lassen sich schnell aufzählen:
- HTML5 erzeugt Pixel-Grafiken, die sich binär nur in einem der Standardformate abspeichern lassen. Verlustfreie Speicherung ermöglichen dabei nur die Formate BMP, PNG, TIFF und GIF. Der Speicherbedarf fällt dabei leider ziemlich hoch aus. Anders bei SVG, wo die Zeichnungen nur aus einer Liste von XML-Anweisungen bestehen, die erheblich weniger Bytes benötigen. Zudem lassen sich die SVG-Bilder beliebig hochskalieren.
- Die Elemente der Zeichnung lassen sich in einer HTML5-Grafik später nicht mehr identifizieren. In einer SVG-Grafik ist das anders. Einzelne Elemente können Sie entfernen oder nachbearbeiten. Die vorliegende Malanwendung erlaubt so etwa ein schrittweises Undo.
- SVG bringt von Haus aus Filtereffekte mit, die HTML5 nicht kennt. Zwar gibt es auch dort einen Shadow-Effekt, der einen Schattenwurf der Zeichenelemente zulässt, doch von den komplexen Filterkombinationen von SVG ist das alles weit entfernt.
Der einzige Nachteil besteht darin, dass SVG-Elemente zur Laufzeit vom Browser gerendert werden. Das beeinträchtigt natürlich die Performance. Kritzeln Sie mit einem Grafiktablett etwa schnell einige Linien, so hinkt die Darstellung den Bewegungen deutlich nach. Aber Sinn und Zweck dieser Lösung ist ja auch nicht, unter Access ein vollwertiges Vektorgrafikprogramm zu realisieren – die Einsatzmöglichkeiten erwähnten wir im analogen HTML5-Beitrag.
SVG-Zeichenformular
Beschreiben wir zunächst die Bedienung des Zeichenformulars frmSVGDraw anhand von Bild 1. Im Zentrum befindet sich die Zeichenfläche in Gestalt eines Web-browser-Steuerelements, das verankert ist und sich damit bei Größenänderungen des Formulars entsprechend ausdehnt. Die anderen Elemente richten sich dagegen am rechten oder unteren Rand aus.
Bild 1: Zur Laufzeit entsteht im Formular beim Malen mit verschiedenen Werkzeugeinstellungen additiv eine speicherbare SVG-Grafik.
Das Formular ist an eine Tabelle tblBilderDraw gebunden, so dass Sie pro Datensatz jeweils eine Zeichnung anfertigen oder darstellen können. Das Laden der Grafiken geschieht automatisch beim Wechsel eines Datensatzes. Jedem Bild können Sie oben eine Bezeichnung vergeben. Mit dem Button Alles löschen versetzen Sie die Zeichenfläche in den Ursprungszustand und erhalten eine weiße Zeichenfläche. Bild speichern erst transferiert das Gemälde in die Tabelle, welches ansonsten beim Datensatzwechsel verloren ginge. Sie können es zudem wahlweise über In Datei speichern… als JPG-Datei oder mit Bild in Zwischenablage in selbige exportieren. Der Undo-Button mit dem blauen Pfeil macht den letzten Zeichenvorgang oder auch frühere rückgängig. Sobald Sie die linke Maustaste loslassen, wird intern ein SVG-path-Element angelegt, das den gemalten Polygonzug repräsentiert. Das Undo löscht dieses Element aus dem SVG-XML wieder und setzt einen Zähler herab. Ein erneutes Undo löscht dann das Element mit diesem Zähler.
Rechts können Sie die Linienart bestimmen, bevor Sie loszeichnen. Möglich sind durchgezogene Linienzüge, gepunktete oder gestrichelte. Die Breite der Linien kann aus der darunterliegenden Optionsgruppe gewählt werden. Welche Malfarbe dabei verwendet wird, kann mit Klick auf die Fläche Linienfarbe zugewiesen werden. Das öffnet den normalen Windows-Farbauswahldialog. Alternativ haben Sie aber auch die Möglichkeit, die Farbe aus dem Spektrum rechts auszuwählen. über diesem Spektrum befindet sich eine Optionsgruppe, die das Ziel der Farbauswahl angibt. Das L bezieht sich auf die Linienfarbe, das F auf die Füllfarbe und das H auf die Hintergrundfarbe.
Neben diesen Elementen können Sie mehrere Checkboxen bedienen. Ist Füllen aktiviert, so wird nicht nur ein Linienzug gezeichnet, sondern dieser automatisch geschlossen und mit einer einfarbigen Füllung versehen. Das geschieht bereits während des Malens! Die Formen in der Abbildung machen den Vorgang deutlich. Hier wurde der Schieberegler für die Transparenz eingesetzt. Befindet der sich ganz links, so werden sowohl Linien als auch wie Füllungen, opak, während das Verschieben nach rechts beides immer durchsichtiger macht. Auf diese Weise überlagern Sie verschiedene Formen sequenziell.
Ist die Checkbox Weich aktiv, so werden Linien und Ecken weichgezeichnet. Die Checkbox Schatten aktiviert selbigen, wobei mit dem Schieberegler dessen Ausdehnung geregelt werden kann. Schließlich können Sie noch die Checkbox Turbulenz aktivieren und mit dem Schieberegler daneben den Grad derselben einstellen. Linien malen Sie damit nicht mehr als Linien, sondern als, sondern als turbulent verzerrte Polygonzüge, wie einige Formen in der Abbildung beweisen (siehe auch Bild 2).
Bild 2: Linienzüge können bei aktivierter Turbulenz verzerrt werden.
Außerdem ist es über den Button Bilddatei einfügen… noch möglich, über einen Dateiauswahldialog eine JPG-Datei in die Zeichnung zu laden. Der Cursor über der Zeichenfläche ändert dann seine Gestalt in ein Kreuz, und erst, nachdem Sie nun auf eine Koordinate im Bild klicken, wird das Bild an dieser Stelle eingefügt. Ist ein Transparenzwert aktiviert, so wird auch diese Bilddatei transparent eingefügt.
Eine ganze Menge Features, die dieses Formular bereithält! Da sollte man wohl meinen, dass die Programmierung einen hohen Aufwand erfordert. Tatsächlich kommt die Formularklasse aber mit etwa 400 Zeilen VBA aus, ein Wert, der deutlich macht, wieviel Arbeit der Browser im Verein mit SVG uns da abnimmt. Wollten Sie dasselbe etwa mit dem Windows-GDI-API erreichen, so kämen Sie sicher auf einige Tausend Zeilen.
Tabelle zum Speichern
Die Tabelle tblBilderDraw, an die das Formular gebunden ist, hat den sehr einfachen Aufbau aus Bild 3. Genau genommen ist nur das Feld Bildname an das Textfeld Bezeichnung des Formulars gebunden, während der Inhalt der Grafik im Feld BildOLE per VBA abgespeichert wird. Der Name des Felds ist etwas irreführend, denn die Tabelle wurde schlicht aus der HTML5-Version der Malanwendung importiert. Dort kamen die Pixel binär tatsächlich in ein OLE-Feld. Hier aber haben wir es ja mit XML-Text zu tun, für den ein Memo-Feld besser passt.
Bild 3: Die Tabelle tblBilderDraw speichert nur die gemalten Grafiken und ihre Namen nebst ID.
Die mit Beispielen gefüllte Tabelle in der Datenblattansicht zeigt Bild 4. Sie erkennen sofort, dass es sich beim Inhalt von BildOLE um jeweils komplette HTML-Dokumente handelt, die sogar JavaScript enthalten. Die SVG-Anweisungen folgen erst am unteren Rand der Zeilen und leiten sich mit dem Tag
Bild 4: In der Datenblattansicht der Tabelle tblBilderDraw wird deutlich, dass es sich bei den SVG-Grafiken um HTML-Anweisungen handelt.
Die Größe des in Bild 1 gezeigten Gemäldes beträgt im Feld BildOLE ungefähr 40 kB. Davon entfallen auf den immer gleichen HTML-Rumpf 3 kB. Also nehmen die polyline-Elemente den weitaus größten Teil ein. Da es sich hier um Text mit sich häufig wiederholenden Zahlen handelt, ließe sich das Feld im Bedarfsfall auch gut einer Textkompression unterziehen. Im Beitrag zur RTLCompression, die auch in der HTML5-Version zum Einsatz kommt, lernten Sie eine solche universelle Kompressionsroutine kennen.
Formularentwurf
Ans sich hält der Entwurf des Formulars frmSVGDraw wenig überraschungen bereit. Das ungebundene Webbrowser-Steuerelement ctlIE hat den Steuerelementinhalt =”about:blank” damit es sich mit leerer Seite öffnet und ist auf die Verankerung Quer und nach unten dehnen eingestellt. Die Verankerung der Button-Reihe steht dagegen auf Unten links, die der restlichen Steuerelemente für die Malwerkzeuge auf Oben rechts. Bild 5 gibt die Anordnung wieder.
Bild 5: Die Entwurfsansicht der Malanwendung frmSVGDraw zeigt zentral das Webbrowsersteuerelement und rechts die Zeichenwerkzeuge.
Zwei eingesetzte Steuerelemente bedürfen wohl der Erläuterung. Die horizontalen Schieberegler etwa finden Sie nicht im Umfang von Access selbst. Es handelt sich hier um ActiveX-Elemente, horizontale Scrollbars, aus der Sammlung der MSForms-Steuerelemente, die grundsätzlich mit jeder Office-Version installiert werden. Nach dem Einsetzen des ActiveX-Steuerelements begeben Sie sich zum Eigenschaftenblatt und stellen unter dem Reiter Andere den Eintrag Orientation auf den Wert Horizontal und die Min/Max-Werte auf 0 bis 100. Das Bewegen eines Schiebers löst das Ereignis Change aus, auf das im Formularmodul in der zugehörigen Ereignisprozedur reagiert wird:
Private Sub ctlTransparent_Change() m_Transparency = 100 - ctlTransparent.Value End Sub
Die Modulvariable m_Transparency erhält nun den negierten Wert, den das Steuerelement ctlTransparent zurückgibt. Für das Farbspektrum rechts verwenden wir ein MSForms-Image-Steuerelement. Das wird beim Laden des Formulars schlicht mit einer vorgefertigten Bilddatei colors.jpg versehen. Diese werden Sie im Projektordner indessen vergeblich suchen, denn sie ist tatsächlich in der Systemtabelle MSysResources abgespeichert, die für Grafiken auf Steuerelementen vorgesehen ist, aber ebenso manuell mit Dateien bestückt werden kann. Ein MSForms-Image kann sein Bild allerdings nicht direkt aus dieser Tabelle beziehen. Hier ist etwas Zusatzprogrammierung angesagt. Beim Laden des Formulars wird unter anderen diese Zeile durchlaufen:
Set Me!ctlImgColors.Object.Picture = _
ArrayToPicture(GetColorTableJPG)
Sie haben das Ende des frei verfügbaren Textes erreicht. Möchten Sie ...
Oder bist Du bereits Abonnent? Dann logge Dich gleich hier ein. Die Zugangsdaten findest Du entweder in der aktuellen Print-Ausgabe auf Seite U2 oder beim Online-Abo in der E-Mail, die Du als Abonnent regelmäßig erhältst:
