4D Doc Center : Script del vídeo

4D v14

SVG

Script del vídeo

En este vídeo, vamos a aprender a crear una área SVG y trazar objetos (formularios, textos, etc.) utilizando el componente 4DSVG.

Primero, debemos añadir el componente:

Salir de 4D
Poner el componente en la carpeta Components
Y relanzar 4D.

Después, es importante saber que un área SVG es una imagen que interactúa con 4D. Puede trazar objetos en esta área que representan los datos de la base de datos y cuando se trabaja con estos objetos, puede recuperar la información de 4D, con el fin de procesarla y actuar en consecuencia.

Así es como funciona:

Se crea en la memoria el área a representar
Luego, se exporta a una imagen.

Para continuar con nuestra programación, vamos a necesitar un formulario con una imagen.

Vamos a crear un formulario llamado SVG donde colocamos una variable de tipo imagen. 4D declara automáticamente las variables cuando son de tipo imagen. El área no es editable y la vamos a llamar vSVGPict.

A continuación, creamos un botón y en este botón creamos una nueva área:

SVG (svg_new) por ejemplo 300 por 500 píxeles.

Más adelante vamos a utilizar este ID para hacer referencia a esta área específica, ya que, obviamente, podemos tener más de un área SVG en la memoria.

A continuación tenemos unas líneas que nos permitirán crear el área SVG y luego el comando de exportación:

SVG EXPORT TO PICTURE
el área
a la imagen SVG
y acá copiamos la fuente de datos XML

Estas 2 líneas son todo lo que necesitamos para crear el área en la memoria y cargar la imagen.

Dentro, podemos trazar, por ejemplo, utilizando las siguientes líneas de código:

 $PosX1:=10

 $PosX2:=50

 $PosY1:=10

 $PosY2:=200

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

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

Vamos a probar los resultado inmediatamente y obtenemos una línea trazada de un punto de coordenadas x1;y1 a x2;y2.

También podemos trazar un rectángulo:

 $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)

Vemos que el rectángulo está truncado porque excede el tamaño límite de 300 píxeles que hemos definido para el ancho. Si pasamos el área a 400 y los volvemos a trazar, el rectángulo queda completo.

Podemos añadir una texto simple

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

El texto aparece aquí.

Luego un texto con formato, un texto con estilo:

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

Ahora vemos como el texto está en negrita e itálica en el comando desde que los solicitamos 1+2, porque los atributos se pueden combinar. Si hubiéramos solicitado 1+2+4, el texto también estaría subrayado.

Podemos añadir la lista de técnicos:

 $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

donde los apellidos tendrán un espacio de 15 píxeles de separación cada vez.

Ahora que ha viso cómo añadir información a un área SVG, puede ver el ejemplo de SVG2 que le permite hacer una pequeña programación en la cual puede:

administrar la altura de la línea de títulos
el número de columnas
y si es necesario el número de líneas
el espacio interlineal
si se muestra no no
navegar por fecha
si es necesario, ir a una fecha específica donde verá 3 casillas, las cuales pueden corresponder a citas, por ejemplo.