SVG

Home

4D v16

SVG

Beschreibung

Diese Sequenz zeigt, wie Sie mit der 4D SVG Component einen SVG Bereich erstellen und Objekte darin zeichnen (Formulare, Texte, etc.)

Sie müssen wissen, dass ein SVG Bereich ein Bild ist. Sie können also Objekte zeichnen, um die Daten der Anwendung darzustellen und so Information aus 4D wiederfinden, um sie zu bearbeiten.

Sie erstellen einen Bereich, um ihn im Speicher darzustellen und exportieren ihn in ein Bild.

Zum Fortführen der Programmierung benötigen wir ein Formular mit einem Bild.

Wir erstellen ein Formular mit Namen SVG und legen eine Variable vom Typ Bild hinein. 4D typisiert Variablen vom Typ Bild automatisch. Der Bereich ist nicht eingebbar. Wir nennen ihn vSVGPict.

Als nächstes erstellen wir eine Schaltfläche und darin einen neuen Bereich:

SVG (svg_new) mit z.B. 400 mal 500 Pixel

Diese ID verwenden wir später als Referenz auf diesen spezifischen Bereich, da es ja mehr als einen SVG Bereich im Speicher geben kann.

Mit wenigen Zeilen können Sie den SVG Bereich und den Export-Befehl anlegen:

SVG EXPORT TO PICTURE
Bereich
zum SVG Bild
Hier kopieren wir die SML Datenquelle

Über diese 2 Zeilen legen Sie den Bereich im Speicher an und laden das Bild.

Darin können wir z.B. mit folgenden Zeilen Code zeichnen:

 vId_SVG:=SVG_New(400;500)

 

 $PosX1:=10

 $PosX2:=50

 $PosY1:=10

 $PosY2:=200

 $Color:="RED" //"lightgrey"

 $IdLine:=SVG_New_line(vID_SVG;$PosX1;$PosX2;$PosX2;$PosY2;$Color;5)

 SVG EXPORT TO PICTURE(vID_SVG;vImgSVG;Copy XML data source)

Wir testen gleich das Ergebnis: eine Linie gezeichnet von x10;y10 zu x50;y200.

Wir können auch ein Rechteck zeichnen. Dazu fügen wir vor SVG EXPORT TO PICTURE folgenden Code ein:

 $PosX1:=100

 $PosX2:=250

 $PosY1:=30

 $PosY2:=80

 $Rounded_InPixels:=10

 $InsideColor:="lightgrey"

 $Color:="RED" //"lightgrey"

 vRefRect:=SVG_New_rect(vID_SVG;$PosX1;$PosY1;$PosX2;$PosY2;$Rounded_InPixels;$Rounded_InPixels;$InsideColor;$Color)

Wir fügen einen einfachen Text hinzu:

$textID:=SVG_New_text(vID_SVG;"Text to display";10;100)

Dann einen formatierten Text, d.h. mit Stilelementen:

$textID:=SVG_New_textArea(vID_SVG;"TextArea";50;200;80;40;"Fancy New Regular";18;1+2;3)

Der Text ist jetzt fett und kursiv, da wir im Befehl 1+2 angefordert haben und die Attribute kombinierbar sind. Bei 1+2+4 wäre der Text auch noch unterstrichen.

Wir können die Liste der Techniker hinzufügen:

 $Offset:=0

 While(Not(End selection([TECHNICIANS])))

    $textID:=SVG_New_text(vID_SVG;[TECHNICIANS]First_Name+" "+[TECHNICIANS]Last_Name;10;$Offset)

    $Offset:=$Offset+15

    NEXT RECORD([TECHNICIANS])

 End while

wobei die Nachnamen jeweils einen Abstand von 15 Pixel haben.

Da Sie nun wissen, wie Sie Elemente in den SVG Bereich setzen können, sehen Sie sich das Beispiel SVG2 an. Es enthält folgende Optionen:

Höhe der Titelzeile bestimmen
Anzahl Spalten
Bei Bedarf Anzahl der Zeilen
Zeilenabstand
Ein- oder ausgeblendet
Nach Datum durchlaufen
Bei Bedarf zu einem bestimmten Datum mit drei Boxen gehen, z.B. um einen Termin anzugeben.