SVG

4D v16

SVG

Video script

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

********************Nota: este paso ya no es necesario y puede omitirlo.********************

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.