SVG

4D v16

SVG

Video script

Neste vídeo, vamos aprender a criar uma área SVG e traçar objetos (formulários, textos, etc.) utilizando o componente 4DSVG.

********************Nota: Este passo não é mais necessário e pode ignorá-lo.********************

Primeiro, devemos adicionar o componente:

Sair de 4D
Colocar o componente na pasta Components
E relançamento de 4D.

********************

Depois, é importante saber que uma área SVG é uma imagem que interage com 4D. Pode traçar objetos nesta área que representam os dados do banco de dados e quando se trabalha com estes objetos, pode recuperar a informação de 4D, com o propósito de processar e atuar em consequência.

Assim é como funciona:

É criada na memória a área a representar
Depois, é exportada a uma imagem.

Para continuar com nossa programação, vamos necessitar um formulário com uma imagem.

Vamos criar um formulário chamado SVG onde colocamos uma variável de tipo imagem. 4D declara automaticamente as variáveis quando são de tipo imagem. A área não é editada e vamos chamar vSVGPict.

A continuação, criamos um botão e neste botão criamos uma nova área:

SVG (svg_new) por exemplo 300 por 500 píxels.

Mais a frente vamos utilizar este ID para fazer referencia a esta área específica, como, obviamente, podemos ter mais de uma área SVG na memória.

A continuação temos umas linhas que nos vão permitir criar a área SVG e depois o comando de exportação:

SVG EXPORT TO PICTURE
a área
a imagem SVG
e aqui copiamos a fonte de dados XML

Estas 2 linhas são tudo o que necessitamos para criar a área na memória e carregar a imagem.

Dentro, podemos traçar, por exemplo, utilizando as seguintes linhas 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 provar os resultados imediatamente e obtemos uma linha traçada de um ponto de coordenadas x1;y1 a x2;y2.

Também podemos traçar um retâ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 o retângulo está truncado porque excede ao tamanho limite de 300 píxels que definimos para o largo. Se passamos a área a 400 e voltamos a traçá-los, o retângulo fica completo.

Podemos adicionar um texto simples

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

O texto aparece aqui.

Depois um texto com formato, um texto com estilo:

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

Agora vemos como o texto está em negrito e itálica no comando desde que solicitamos 1+2, porque os atributos podem ser combinados. Se tivéssemos solicitado 1+2+4, o texto também estaria sublinhado.

Podemos adicionar a 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

onde os sobrenomes terão um espaço de 15 píxels de separação cada vez.

Agora que já viu como adicionar informação a uma área SVG, pode ver o exemplo de SVG2 que lhe permite fazer uma pequena programação na qual pode:

administrar a altura da linha de títulos
o número de colunas
e caso seja necessário o número de linhas
o espaço inter-linear
se é mostrada ou não
navegar por data
se é necessário, ir a uma data específica aonde verá 3 caixas, as quais podem corresponder a compromissos, por exemplo.