4D Doc Center : Video Skript

Home

4D v14

SVG

Video Skript

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

Zuerst müssen wir die Komponente hinzufügen. Dazu:

Beenden wir 4D
Setzen die Komponente in den Ordner Components
Und starten 4D neu

Sie müssen auch 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. 300 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:

 $PosX1:=10

 $PosX2:=50

 $PosY1:=10

 $PosY2:=200

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

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

Wir testen gleich das Ergebnis: eine Linie gezeichnet von x1;y1 zu x2;y2.

Wir können auch ein Rechteck zeichnen:

 $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 sehen, dass das Rechteck abgeschnitten ist, weil es größer als die definierte Breite von 300 Pixel ist. Wir ändern den Bereich auf 400 und zeichnen erneut, das Rechteck erscheint jetzt ganz.

Wir fügen einen einfachen Text hinzu:

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

Dieser Text erscheint hier.

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.