<\/p>\n
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.<\/b><\/p>\nReferenz<\/h2>\n
Die Ausführungen dieses Beitrags setzen jene aus dem Artikel SVG als Grafikkomponente<\/b> in dieser Ausgabe fort. Dort sind bereits die Grundlagen zum Einsatz des Webbrowser-Steuerelements<\/b> im Verein mit SVG<\/b> beschrieben.<\/p>\nSVG-Zeichnen im Unterschied zur Alternative HTML5<\/h2>\n
Im Beitrag Malen und Zeichnen mit HTML5<\/b> 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.<\/p>\n
Hier bauen wir diese Anwendung nach und verwenden dabei SVG<\/b> im Webbrowser-Steuerelement<\/b>, wobei der Komfort des Malformulars noch etwas erhöht wird. Die Vorteile der SVG<\/b>-Lösung lassen sich schnell aufzählen:<\/p>\n Der einzige Nachteil besteht darin, dass SVG<\/b>-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<\/b>-Beitrag.<\/p>\n Beschreiben wir zunächst die Bedienung des Zeichenformulars frmSVGDraw<\/b> 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. <\/p>\n Bild 1: Zur Laufzeit entsteht im Formular beim Malen mit verschiedenen Werkzeugeinstellungen additiv eine speicherbare SVG-Grafik.<\/span><\/b><\/p>\n Das Formular ist an eine Tabelle tblBilderDraw<\/b> 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<\/b> vergeben. Mit dem Button Alles löschen<\/b> versetzen Sie die Zeichenfläche in den Ursprungszustand und erhalten eine weiße Zeichenfläche. Bild speichern<\/b> erst transferiert das Gemälde in die Tabelle, welches ansonsten beim Datensatzwechsel verloren ginge. Sie können es zudem wahlweise über In Datei speichern…<\/b> als JPG<\/b>-Datei oder mit Bild in Zwischenablage <\/b>in selbige exportieren. Der Undo<\/b>-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<\/b>-Element angelegt, das den gemalten Polygonzug repräsentiert. Das Undo<\/b> löscht dieses Element aus dem SVG-XML<\/b> wieder und setzt einen Zähler herab. Ein erneutes Undo<\/b> löscht dann das Element mit diesem Zähler.<\/p>\n Rechts können Sie die Linienart<\/b> 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<\/b> 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<\/b> bezieht sich auf die Linienfarbe<\/b>, das F<\/b> auf die Füllfarbe<\/b> und das H<\/b> auf die Hintergrundfarbe.<\/p>\n Neben diesen Elementen können Sie mehrere Checkboxen bedienen. Ist Füllen<\/b> 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<\/b> 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.<\/p>\n Ist die Checkbox Weich<\/b> aktiv, so werden Linien und Ecken weichgezeichnet. Die Checkbox Schatten<\/b> aktiviert selbigen, wobei mit dem Schieberegler dessen Ausdehnung geregelt werden kann. Schließlich können Sie noch die Checkbox Turbulenz<\/b> 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).<\/p>\n Bild 2: Linienzüge können bei aktivierter Turbulenz verzerrt werden.<\/span><\/b><\/p>\n Außerdem ist es über den Button Bilddatei einfügen…<\/b> noch möglich, über einen Dateiauswahldialog eine JPG<\/b>-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.<\/p>\n 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<\/b> Zeilen VBA aus, ein Wert, der deutlich macht, wieviel Arbeit der Browser im Verein mit SVG<\/b> uns da abnimmt. Wollten Sie dasselbe etwa mit dem Windows-GDI-API<\/b> erreichen, so kämen Sie sicher auf einige Tausend Zeilen.<\/p>\n Die Tabelle tblBilderDraw<\/b>, an die das Formular gebunden ist, hat den sehr einfachen Aufbau aus Bild 3. Genau genommen ist nur das Feld Bildname<\/b> an das Textfeld Bezeichnung<\/b> des Formulars gebunden, während der Inhalt der Grafik im Feld BildOLE<\/b> per VBA abgespeichert wird. Der Name des Felds ist etwas irreführend, denn die Tabelle wurde schlicht aus der HTML5<\/b>-Version der Malanwendung importiert. Dort kamen die Pixel binär tatsächlich in ein OLE-Feld<\/b>. Hier aber haben wir es ja mit XML-Text<\/b> zu tun, für den ein Memo<\/b>-Feld besser passt.<\/p>\n Bild 3: Die Tabelle tblBilderDraw speichert nur die gemalten Grafiken und ihre Namen nebst ID.<\/span><\/b><\/p>\n Die mit Beispielen gefüllte Tabelle in der Datenblattansicht zeigt Bild 4. Sie erkennen sofort, dass es sich beim Inhalt von BildOLE<\/b> um jeweils komplette HTML<\/b>-Dokumente handelt, die sogar JavaScript<\/b> enthalten. Die SVG<\/b>-Anweisungen folgen erst am unteren Rand der Zeilen und leiten sich mit dem Tag<\/b> Bild 4: In der Datenblattansicht der Tabelle tblBilderDraw wird deutlich, dass es sich bei den SVG-Grafiken um HTML-Anweisungen handelt.<\/span><\/b><\/p>\n Die Größe des in Bild 1<\/b> gezeigten Gemäldes beträgt im Feld BildOLE<\/b> ungefähr 40 kB<\/b>. Davon entfallen auf den immer gleichen HTML<\/b>-Rumpf 3 kB<\/b>. Also nehmen die polyline<\/b>-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<\/b>, die auch in der HTML5<\/b>-Version zum Einsatz kommt, lernten Sie eine solche universelle Kompressionsroutine kennen.<\/p>\n Ans sich hält der Entwurf des Formulars frmSVGDraw<\/b> wenig überraschungen bereit. Das ungebundene Webbrowser-Steuerelement ctlIE<\/b> hat den Steuerelementinhalt =“about:blank“<\/b> damit es sich mit leerer Seite öffnet und ist auf die Verankerung<\/b> Quer und nach unten dehnen<\/b> eingestellt. Die Verankerung der Button-Reihe steht dagegen auf Unten links<\/b>, die der restlichen Steuerelemente für die Malwerkzeuge auf Oben rechts<\/b>. Bild 5 gibt die Anordnung wieder.<\/p>\n Bild 5: Die Entwurfsansicht der Malanwendung frmSVGDraw zeigt zentral das Webbrowsersteuerelement und rechts die Zeichenwerkzeuge.<\/span><\/b><\/p>\n 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<\/b>-Elemente, horizontale Scrollbars, aus der Sammlung der MSForms<\/b>-Steuerelemente, die grundsätzlich mit jeder Office-Version installiert werden. Nach dem Einsetzen des ActiveX<\/b>-Steuerelements begeben Sie sich zum Eigenschaftenblatt und stellen unter dem Reiter Andere<\/b> den Eintrag Orientation<\/b> auf den Wert Horizontal<\/b> und die Min\/Max<\/b>-Werte auf 0<\/b> bis 100<\/b>. Das Bewegen eines Schiebers löst das Ereignis Change<\/b> aus, auf das im Formularmodul in der zugehörigen Ereignisprozedur reagiert wird:<\/p>\n Die Modulvariable m_Transparency<\/b> erhält nun den negierten Wert, den das Steuerelement ctlTransparent<\/b> zurückgibt. Für das Farbspektrum rechts verwenden wir ein MSForms-Image<\/b>-Steuerelement. Das wird beim Laden des Formulars schlicht mit einer vorgefertigten Bilddatei colors.jpg<\/b> versehen. Diese werden Sie im Projektordner indessen vergeblich suchen, denn sie ist tatsächlich in der Systemtabelle MSysResources<\/b> abgespeichert, die für Grafiken auf Steuerelementen vorgesehen ist, aber ebenso manuell mit Dateien bestückt werden kann. Ein MSForms-Image<\/b> 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:<\/p>\n <\/p>\n Das Picture<\/b>-Objekt für das Steuerelement errechnet sich hier über zwei Hilfsfunktionen. GetColorTableJPG<\/b> entnimmt der Systemtabelle die Binärdaten des Bilds und gibt sie als Byte-Array <\/b>zurück:<\/p>\n Aus dem Byte-Array<\/b> nun ein StdPicture<\/b>-Objekt zu machen, ist natürlich eine wesentlich schwierigere Angelegenheit. Hier kommt mit der Funktion ArrayToPicture<\/b> wieder einmal eine GDIPlus-API<\/b>-Routine zum Einsatz, welche sich im Modul mdlGDIPSpecial<\/b> versteckt.<\/p>\n Auf die Funktionsweise des Moduls können wir an dieser Stelle nicht eingehen. Der Klick auf einen Punkt im Spektrum-Image löst nun das Ereignis MouseDown<\/b> aus. In dieser Ereignisprozedur muss die Farbe unter dem Mauszeiger bestimmt werden. Das lässt sich mit einer einzigen API-Funktion leichter erledigen, als gedacht:<\/p>\n GetCursorPixel<\/b> nimmt die vom Ereignis zurückgegebenen x<\/b>– und y<\/b>-Koordinaten des Bildschirms entgegen und ermittelt für sie die Pixel-Farbe als RGB-Long-Wert<\/b>.<\/p>\n Nebenbei sein noch erwähnt, dass Sie sich beim Webbrowser als Grafik-Engine nicht um die Skalierung von Bildern kümmern müssen. Sind geladenen oder erzeugte Bilder größer, als das Browser-Fenster, so blenden sich automatisch Scroll-Balken ein, mit denen Sie sich in die gewünschten Bildteile hineinbewegen können, wie Bild 6 demonstriert. Das gilt für geladenen Pixel-Grafiken in gleicher Weise, wie für SVG<\/b>-Vektorgrafiken. Beim Abspeichern der Bilder wird dann aber selbstverständlich die teilweise nicht sichtbare Gesamtfläche verwendet.<\/p>\n Bild 6: Um die Einblendung von Scroll-Balken brauchen Sie sich beim Webbrowser-Steuerelement mit SVG-Grafik nicht zu kümmern.<\/span><\/b><\/p>\n Beginnen wir chronologisch mit den Ereignisprozeduren des Formulars, von denen die Form_Open<\/b>-Prozedur die erste ist. Sie belegt lediglich einige modulweite Member<\/b>-Variablen mit Vorgabewerten etwa zur Linienbreite oder Füllfarbe. Mit Form_Load<\/b> geht es dann richtig los. Das Webbrowser-Steuerelement wird angewiesen, ein leeres Dokument zu laden, und in diesem werden, ähnlich wie bei den SVG<\/b>-Diagrammen, ein gültiges head<\/b>– sowie svg<\/b>-Element angelegt. Die Breite und Höhe der SVG<\/b>-Fläche werden dabei nicht auf einen fixen Wert eingestellt, sondern auf 100%<\/b>, damit sich die Fläche später bei Größenänderung des verankerten Webbrowsers entsprechend ausdehnt. Zusätzlich erhält das Dokument einen JavaScript<\/b>-Block:<\/p>\n Ein JavaScript<\/b> kann über das Tag script<\/b> dynamisch neu in einem HTML-Dokument erzeugt werden, wobei ihm dessen Code über die Eigenschaft Text des Elements zugewiesen wird. Das Script enthält einige Funktionen, über die die Parameter der SVG<\/b>-Filter zur Laufzeit gesteuert werden können.<\/p>\n Im Beispiel ist das der Turbulenzeffekt, dessen Parameter baseFrequency<\/b> in Abhängigkeit vom übergebenen Wert in v<\/b> belegt wird. Die JavaScript<\/b>-Funktion können Sie direkt aus VBA heraus aufrufen:<\/p>\n Das ist die Ereignisprozedur, die ausgelöst wird, wenn Sie den Slider für die Turbulenz verschieben. Der Wert des ActiveX-Steuerelements (Value<\/b>) wird verwendet, um etwa diese Zeile zu generieren, wenn er 55<\/b> beträgt:<\/p>\n Die Methode execScript<\/b> eines HTMLWindow<\/b>-Objekts, welches aus dem Dokument oDoc<\/b> ermittelt wird, ruft diese Zeile schließlich auf.<\/p>\n Dieses Gemisch aus VBA und JavaScript<\/b> mag etwas verwirrend sein, demonstriert jedoch, wie beide Sprachen kombiniert werden können, wenn eine allein nicht reicht. Das ist hier der Fall, weil es nicht gelang, den Turbulenz-Parameter direkt über VBA und ein SVG-Effekt<\/b>-Objekt zu setzen.<\/p>\n Die SVG<\/b>-Filter und ihre Effekte selbst werden in einer gesonderten Routine CreateFilterGroup<\/b> angelegt. Wie das geht, erfuhren Sie bereits im Betrag zu den SVG<\/b>-Diagrammen, wo für die Texte des Tortendiagramms ein Dropshadow<\/b>-Effekt generiert wurde. Hier funktioniert das auf ähnliche Weise, nur sind es hier eben wesentlich mehr Filter, die dem Weichzeichnen der Linien und der Turbulenz dienen, weshalb der Umfang der Prozedur so groß wurde, dass wir sie hier nicht abbilden. Alle Filter werden hier übrigens in einer SVG-Elementgruppe<\/b> zusammengefasst, die Sie über das Tag<\/b> g<\/b> erzeugen können. Dieses Gruppenobjekt wird schließlich als Kindelement dem allgemeinen SVG<\/b>-Objekt angehängt.<\/p>\n Bevor es mit dem Zeichnen losgehen kann, tritt noch das Ereignis Beim Anzeigen<\/b> für den aktuellen Datensatz auf den Plan. Enthält dieser bereits ein zuvor gemaltes Bild im Feld BildOLE<\/b>, so soll dieses geladen werden. Andernfalls soll eine leere Zeichenfläche entstehen. Das ermittelt die Prozedur anhand der Länge (Len<\/b>) des Feldinhalts (siehe Listing 1). Ist diese 0<\/b>, so liest sie den HTML<\/b>-Text aus dem Feld aus und schreibt ihn über die VBA-Methode CallByName<\/b> in das Dokument. Das ist deshalb nötig, weil die write<\/b>-Methode eines HTMLDocument<\/b>-Objekts leider einen zu VBA inkompatiblen Datentyp als Parameter erwartet, weshalb beim Kompilieren ein Fehler aufträte. Die abschließend aufgerufene Hilfsroutine SetPathCounter<\/b> setzt den SVG<\/b>-Elementzähler, welcher sich in der Modulvariablen pathcounter<\/b> repräsentiert, auf die Zahl der SVG<\/b>-Elemente, welche sich bereits in der Grafik befinden:<\/p>\n Listing 1: Anzeigen einer bestehenden SVG-Grafik in Form_Current<\/span><\/b><\/p>\n Das Objekt oSVG<\/b> wird aus der SVG-Fläche, die die id zeichnung<\/b> besitzt, erhalten. Die Zahl der polyline<\/b>-Elemente kann dann ganz einfach über die Eigenschaft length<\/b> auf die Auflistung erhalten werden, die getElementsByTagName<\/b> zurückgibt. Da die Zeichnung außerdem polygon<\/b>-Elemente enthalten kann, muss deren Zahl hinzuaddiert werden. pathcounter<\/b> ist nämlich ein Zähler, der für neue SVG<\/b>-Elemente beim Zeichnen benutzt wird, um deren id<\/b> zu generieren. Das erste Zeichenelement bekommt die ID draw1<\/b>, das zweite die ID draw2<\/b>, und so weiter. Damit können alle Elemente später eindeutig identifiziert werden. Enthält eine vorliegende Zeichnung etwa bereits 38<\/b> Polygonzüge, so stellt sich mit SetPathCounter<\/b> der Zähler auf 39<\/b> ein, so dass das nächste Element die ID draw39 <\/b>bekommt. Eine bestehende Grafik kann so also problemlos weiterbearbeitet werden. Zusätzlich kann das letzte Element per Undo<\/b>-Button gelöscht werden, indem der pathcounter<\/b> um eins zurückgesetzt wird:<\/p>\n Hier wird zur Sicherheit noch ermittelt, ob es ein Element mit der betreffenden id<\/b> überhaupt gibt. Err.Number<\/b> hat sonst einen Wert abweichend von 0<\/b>, und nur im Erfolgsfall wird pathcounter<\/b> herabgesetzt.<\/p>\n Es gibt zwei Ereignisse, die beim Malen mit der Maus verwendet werden. Das mit WithEvents<\/b> deklarierte SVG<\/b>-Element oSVG<\/b> löst diese aus. Es handelt sich um onmousemove<\/b> beim Bewegen des Mauszeigers und um onmouseup<\/b> beim Loslassen der Maustaste.<\/p>\n Die auf das Wesentliche gekürzte Prozedur für onmousemove<\/b> zeigt Listing 2. Hier wird wieder die linke Maustaste über das Event<\/b>-Objekt identifiziert, wenn dessen Eigenschaft Button<\/b> den Wert 1<\/b> hat. Dann kommt der pathcounter<\/b> ins Spiel. Das zu dessen Wert im Verein mit draw<\/b> gehörige Element wir der Variablen oSVGElement<\/b> zugewiesen. Gibt es ein solches Element noch nicht, was der Test auf Nothing<\/b> entscheidet, so wird ein neues Element mit dieser id<\/b> angelegt.<\/p>\n Listing 2: Beim Bewegen des Mauszeigers über die SVG-Fläche generiert diese Prozedur die Polygone.<\/span><\/b><\/p>\n Dabei kommt es darauf an, ob die Checkbox Füllen<\/b> des Formulars aktiviert ist. Die Member-Variable m_Fill<\/b> steht dann auf True<\/b>. Dann nämlich muss ein polygon<\/b>-Element erzeugt werden, im anderen Fall ein polyline<\/b>-Element, weil letzteres, da nicht geschlossen, keine Füllung aufweisen kann.<\/p>\n Anschließend werden mehrere Attribute des Elements gesetzt, wie die Malfarbe über die Style<\/b>-Eigenschaft stroke<\/b>, oder die Linienbreite per stroke-width<\/b>. Die Linienart steht in stroke-dasharray<\/b>, die Transparenz in opacity<\/b>. Die Werte all dieser Attribute leitet sich von den Steuerelementen des Formulars ab, deren Einstellungen wiederum Member<\/b>-Variablen zugewiesen sind. Ob ein Filter auf einen Polygonzug angewandt wird, entscheiden die drei folgenden Bedingungen, die, falls zutreffend, das Attribut filter<\/b> des Elements auf einen der zuvor definierten globalen Effekte setzt.<\/p>\n Ganz egal, ob das Element nun schon existierte oder neu angelegt wurde, das Bewegen der Maus muss eine neue Koordinate am Punkt der Mausbewegung erzeugen. Das geschieht über die Methode createSVGPoint<\/b>, die hier ausnahmsweise createSVGElementNS<\/b> ersetzt. Die x<\/b>– und y<\/b>-Werte des Punkts oPoint<\/b> leiten sich aus der Koordinate des Event<\/b>-Objekts (OffsetX<\/b>, OffsetY<\/b>) ab. Der Punkt wird der Auflistung Points<\/b> des SVG<\/b>-Elements per appendItem<\/b> hinzugefügt, was bei polyline<\/b>-, wie polygon<\/b>-Elementen, gleichermaßen funktioniert. Das abschließende releaseCapture<\/b> auf das HTML<\/b>-Dokument ist zwingend erforderlich, damit das Browser-Fenster neue Events entgegennehmen und damit neue Mausbewegungen abfangen kann.<\/p>\n Wird die linke Maustaste losgelassen, so kommt es zum Ereignis onmouseup<\/b>. Dann soll der Polygonzug beendet werden:<\/p>\n Tatsächlich passiert hier weiter nichts, als dass der Zähler pathcounter<\/b> um eins erhöht wird – das SVG<\/b>-Element ist ja bereits erzeugt. Beim nächsten Bewegen der Maus mit gedrückter linker Maustaste wird die onmousemove<\/b>-Prozedur aber erkennen, dass das Element mit der zum neuen pathcounter<\/b>-Wert gehörigen id<\/b> noch nicht existiert und ein neues anlegen.<\/p>\n Unglaublich, aber wahr: Das ist imgrunde auch schon alles, was für das Zeichnen der Figuren benötigt wird. Ein Polygonzug präsentiert sich im fertigen Dokument dann etwa dergestalt:<\/p>\n Die Koordinaten sind durch Leerzeichen getrennt und die x\/y<\/b>-Werte durch Kommas.<\/p>\n Bliebe noch die Integration von Bilddateien in das SVG<\/b>-Dokument, wie in Bild 7. Nach dem Laden einer JPG<\/b>-Datei über den Button Bild einfügen…<\/b> kann die Grafik beliebig weiterverarbeitet werden. In der Abbildung wurden einige Schlangenlinien über das Bild gelegt. Der Button löst die Ereignisprozedur in Listing 3 aus.<\/p>\n Bild 7: Auch Bilddateien können in die SVG-Grafik geladen und mit dem Zeichenwerkzeug weiterverarbeitet und übermalt werden.<\/span><\/b><\/p>\n über die Hilfsfunktion GetOpenFileDialog<\/b> des Moduls mdlHelper<\/b>, die einen Datei öffnen<\/b>-Dialog lädt, können Sie eine JPG<\/b>-Datei auswählen. Die Picture<\/b>-Variable oPic<\/b> wird dann zunächst über die Funktion LoadPicture<\/b> erzeugt, wobei diese temporär nur dafür verwendet wird, um die Abmessungen des Bilds über Width<\/b> und Height<\/b> zu ermitteln. Hier ist allerdings eine Umrechnung von der Einheit OLEHiMetric<\/b> in Pixel<\/b> vorzunehmen, was ungefähr über den Faktor 0.0378<\/b> geschieht.<\/p>\n Der Inhalt der Datei kommt nun über Open-Get <\/b>in ein Byte-Array bin<\/b>. Und dann wird ein SVG<\/b>-Bildelement (image<\/b>) erzeugt und ihm das Byte-Array base64<\/b>-kodiert als Hexadezimal-String im Attribut href<\/b> verabreicht, wie dies auch schon bei den SVG<\/b>-Diagrammen erläutert wurde.<\/p>\n Bevor es weitergehen kann, muss noch abgewartet werden, bis das Bild im Browser fertig gerendert ist. Das lässt sich mit der Eigenschaft ReadyState<\/b> abfragen, die auf complete<\/b> stehen muss. Anschließend können weitere Attribute auf das Bildobjekt abgesetzt werden, wie dessen Transparenz über das Style<\/b>-Attribut opacity<\/b>.<\/p>\n Im Prinzip wären wir damit fertig, doch in das Klassenmodul ist noch ein zusätzliches Feature eingebaut: Das Bild soll an einer durch die Maus bestimmten Koordinate abgelegt werden. Die Modulvariable clickwait<\/b> wird dazu auf den Wert True<\/b> gesetzt und der Maus-Cursor mit style.cursor<\/b> in ein Kreuz verwandelt. Die folgende Schleife mit ihrem DoEvents<\/b> läuft anschließend so lange, bis clickwait<\/b> den Wert False besitzt. Diese änderung geschieht nämlich dann, wenn die Maustaste losgelassen wird, was wir in der obigen Version der Ereignisprozedur onmouseup<\/b> unterschlagen hatten:<\/p>\n Die Member-Variablen m_x<\/b> und m_y<\/b> stellen sich hier auf die vom Event<\/b>-Objekt erhaltene Koordinate ein und clickwait<\/b> wird zurückgesetzt. Dadurch wird die Schleife in Listing 3<\/b> verlassen. Nun kann die Position des Bilds im Dokument durch Setzen der Attribute x<\/b> und y<\/b> auf die Werte in m_x<\/b> und m_y<\/b> eingestellt werden.<\/p>\n Das Abspeichern des Dokuments in die Tabelle tblBilderDraw<\/b> ist schnell erledigt, da es sich nicht um eine Pixel-Grafik handelt:<\/p>\n Hiermit erhalten Sie den kompletten HTML<\/b>-Text.<\/p>\n Schwieriger wird es hingegen mit dem Export in eine Bilddatei. Dieses Problem hatten wird bereits bei den SVG<\/b>-Diagrammen. Hier greifen wir zur gleichen Methode, wie dort, und verwenden die API-Funktion OleDraw<\/b>, die von der Prozedur SaveOLEToImageFile<\/b> im Modul mdlGDIPSpecial<\/b> verwendet wird. Sie wird auch beim Abspeichern in die Zwischenablage über den entsprechenden Button im Formular aufgerufen.<\/p>\n Wie es sich mit dem Speicherbedarf für die Grafiken verhält, demonstriert die Abfrage in Bild 8, die über die Len<\/b>-Funktion die Byte-Länge des Felds BildOLE<\/b> der Tabelle in der Spalte Size<\/b> ausgibt. Sie erkennen, dass das Urwald-Bild mit dem eingebetteten Bitmap (siehe oben) mit Abstand am größten ist.<\/p>\n\n
SVG-Zeichenformular<\/h2>\n
![\"Zur](\"..\/fileadmin\/_temp_\/2018_04\/frmSVGDraw_RT.png\")
<\/p>\n![\"Linienzüge](\"..\/fileadmin\/_temp_\/2018_04\/frmDrawTurbulence.png\")
<\/p>\nTabelle zum Speichern<\/h2>\n
![\"Die](\"..\/fileadmin\/_temp_\/2018_04\/tblBilderDraw_DS.png\")
<\/p>\n![\"In](\"..\/fileadmin\/_temp_\/2018_04\/tblBilderDraw_RT.png\")
<\/p>\nFormularentwurf<\/h2>\n
![\"Die](\"..\/fileadmin\/_temp_\/2018_04\/frmSVGDraw_DS.png\")
<\/p>\nPrivate Sub <\/span>ctlTransparent_Change()\r\n m_Transparency = 100 - ctlTransparent.Value\r\nEnd Sub<\/span><\/pre>\nSet<\/span> Me!ctlImgColors.Object.Picture = _\r\n ArrayToPicture(GetColorTableJPG)<\/pre>\nFunction <\/span>GetColorTableJPG() As Byte<\/span>()\r\n GetColorTableJPG = CurrentDb.OpenRecordset( _\r\n \"SELECT BLOB FROM MSysResources WHERE Id=4\", _\r\n dbOpenDynaset)(0).Value\r\nEnd Function<\/span><\/pre>\nPrivate Sub <\/span>ctlImgColors_MouseDown( _\r\n ByVal Button As Integer<\/span>, ByVal Shift As Integer<\/span>, _\r\n ByVal x As Single<\/span>, ByVal y As Single<\/span>)\r\n Dim <\/span>lColor As Long<\/span>\r\n lColor = GetCursorPixel(x, y)\r\n...\r\nEnd Sub<\/span><\/pre>\n![\"Um](\"..\/fileadmin\/_temp_\/2018_04\/frmDraw_Scrollbars.png\")
<\/p>\nProgrammierung des Anwendungsformulars<\/h2>\n
Set<\/span> oElement = oDoc.createElement(\"script\")\r\nWith<\/span> oElement\r\n .type = \"text\/javascript\"\r\n .Text = \"function turbfreq(v){ _\r\n document.getElementById(''''turbfilter''''). _\r\n setAttribute (''''baseFrequency'''', v);} \"\r\n ...\r\nEnd With<\/span>\r\noDoc.head.appendChild oElement<\/pre>\nPrivate Sub <\/span>ctlTurb_Change()\r\n oDoc.parentWindow.execScript CStr(\"turbfreq(\" & _\r\n Replace<\/span>(CStr(Me!ctlTurb.Value \/ 1000), _\r\n \",\", \".\") & \")\")\r\nEnd Sub<\/span><\/pre>\nturbfreq(0.055);<\/pre>\n
Private Sub <\/span>Form_Current()\r\n Form_Load\r\n If <\/span>Len<\/span>(Me!BildOLE.Value) > 0 Then<\/span>\r\n CallByName Me!ctlIE.Object.Document, _\r\n \"write\", VbMethod, Me!BildOLE.Value\r\n Set<\/span> oDoc = Me!ctlIE.Object.Document\r\n DoEvents\r\n SetPathCounter\r\n End If<\/span>\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>SetPathCounter()\r\n Dim <\/span>i As Long<\/span>\r\n \r\n Set<\/span> oSVG = oDoc.getElementById(\"zeichnung\")\r\n i = oSVG.getElementsByTagName(\"polyline\").Length\r\n i = i + oSVG.getElementsByTagName(\"polygon\").Length\r\n pathcounter = i + 1\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>cmdUndo_Click()\r\n On Error Resume Next<\/span>\r\n oSVG.getElementById(\"draw\" & _\r\n CStr(pathcounter - 1)).removeNode\r\n If <\/span>Err.Number = 0 Then<\/span> pathcounter = pathcounter - 1\r\nEnd Sub<\/span><\/pre>\nZeichenroutinen<\/h2>\n
Private Sub <\/span>oSVG_onmousemove()\r\n Dim <\/span>oSVGElement As <\/span>SVGElement\r\n Dim <\/span>oPoint As <\/span>SVGPoint\r\n \r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 1 Then<\/span>\r\n Set<\/span> oSVGElement = oDoc.getElementById(\"draw\" & CStr(pathcounter))\r\n If <\/span>oSVGElement Is Nothing Then<\/span>\r\n Set<\/span> oSVGElement = oDoc.createElementNS( _\r\n \"http:\/\/www.w3.org\/2000\/svg\", IIf(m_Fill, \"polygon\", \"polyline\")\r\n oSVGElement.setAttribute \"id\", \"draw\" & CStr(pathcounter)\r\n With<\/span> oSVGElement.Style\r\n .setAttribute \"stroke\", ColorToStr(m_Color)\r\n .setAttribute \"stroke-width\", CStr(m_LineWidth)\r\n If <\/span>Not<\/span> m_Fill Then<\/span> .setAttribute \"fill\", \"none\" _\r\n Else<\/span> .setAttribute \"fill\", ColorToStr(m_FillColor)\r\n Select Case m_LineType\r\n Case <\/span>2: .setAttribute \"stroke-dasharray\", \"2,2\"\r\n Case <\/span>3: .setAttribute \"stroke-dasharray\", \"5,3\"\r\n End Select<\/span>\r\n .setAttribute \"opacity\", Replace<\/span>(CStr(m_Transparency \/ 100), \",\", \".\")\r\n If <\/span>m_Shadow Then<\/span> .setAttribute \"filter\", \"url(#shadow)\"\r\n If <\/span>m_Soft Then<\/span> .setAttribute \"filter\", \"url(#blur)\"\r\n If <\/span>m_Turbulence Then<\/span> .setAttribute \"filter\", \"url(#turb)\"\r\n End With<\/span>\r\n Set<\/span> oPoint = oSVG.createSVGPoint\r\n oPoint.x = oEvent.offsetX: oPoint.y = oEvent.OffsetY\r\n oSVGElement.Points.appendItem oPoint\r\n oSVG.appendChild oSVGElement\r\n Else<\/span>\r\n Set<\/span> oPoint = oSVG.createSVGPoint\r\n oPoint.x = oEvent.offsetX: oPoint.y = oEvent.OffsetY\r\n oSVGElement.Points.appendItem oPoint\r\n End If<\/span>\r\n oDoc.releaseCapture\r\n End If<\/span>\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>oSVG_onmouseup()\r\n Set<\/span> oEvent = oDoc.parentWindow.event\r\n If <\/span>oEvent.Button = 1 Then<\/span>\r\n pathcounter = pathcounter + 1\r\n End If<\/span>\r\nEnd Sub<\/span><\/pre>\n<polyline id=\"draw16\" style=\"opacity: 1; fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;\" points=\"153,108 153,108 153,109 155,112 155,114 155,117\" \/><\/pre>\n
![\"Auch](\"..\/fileadmin\/_temp_\/2018_04\/frmDraw_LoadImage.png\")
<\/p>\n...\r\n If <\/span>clickwait Then<\/span>\r\n m_x = oEvent.offsetX: m_y = oEvent.OffsetY\r\n clickwait = False<\/span>\r\n Else<\/span>\r\n pathcounter = pathcounter + 1\r\n End If<\/span>\r\n...<\/pre>\nAbspeichern und Exportieren der Grafik<\/h2>\n
Me!BildOLE.Value = oDoc.all(0).outerHTML<\/pre>\n
![\"Dies](\"..\/fileadmin\/_temp_\/2018_04\/qry_SVGBildgroessen_RT.png\")
<\/p>\n