Filtros. Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset

(1)

4D SVG

Filtros Introdução Atributos Cores e gradientes Desenho Documentos Estrutura e definições Texto Utilitários Anexos Novidades

(2)

Filtros

Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset

(3)

Filtros SVG

Os comandos do tema "Filtros" permitem definir os efeitos de filtro que se aplicam aos elementos SVG. Um efeito de filtro consiste em uma sucessão de operações gráficas, aplicadas a uma gráfica fonte, que produz uma gráfica modificada. O resultado do efeito de filtro se renderiza no dispositivo objetivo no lugar da gráfica fonte original.

Um filtro se define utilizando o comando SVG_Define_filter, que se encontra no tema "Estrutura e definições" e se aplica utilizando o comando SVG_SET_FILTER, que se encontra no tema "Atributos ". Os comandos do tema "Filtros" permitem construir as operações de filtrado ou "primitivas de filtro".

(4)

SVG_Filter_Blend

SVG_Filter_Blend ( refFiltro ; imagem ; imagemFundo {; modo {; nome}} ) -> Resultado

Parâmetro Tipo Descrição

refFiltro SVG_Ref Referencia de filtro

imagem cadeia Imagem fonte

imagemFundo cadeia Imagem de fundo fonte

modo cadeia Modo de mistura

nome cadeia Objetivo da primitiva de filtro

Resultado SVG_Ref Referencia da primitiva

Descrição

O comando SVG_Filter_Blend define um filtro de composição para o filtro refFiltro e devolve sua referencia. Se refFiltro não é uma referencia de filtro, é gerado um erro.

Este filtro é composto de duas fontes, imagemFundo e imagem, com a ajuda dos modos de mistura que utiliza atualmente o software de imagens.

O parâmetro opcional modo permite definir o modo de combinação de los píxels utilizados para a mistura (ver a especificação). Seu valor deve ser: "normal" (valor por padrão), "multiply", "screen", "darken" ou "lighten".

O parâmetro opcional nome é o nome atribuído ao resultado desta primitiva de filtro.

Nota: Sob Windows, este comando requer a desativação prévia de Direct2D (ver a constante Direct2D disabled na descrição do comando SET DATABASE PARAMETER).

Exemplo

Em um formulário, mostramos duas imagens SVG idênticas, logo criamos um filtro "blend" e o atribuímos a direita. Este filtro é uma combinação dos filtros "offset" e "blur":

$root:=SVG_New(400;400;"filters test") //definição da primeira imagem (esquerda) $rect:=SVG_New_rect($root;10;10;380;100;0;0;"darkblue";"white";1)

SVG_SET_FILL_BRUSH($root;"orange")

$textAreaRef:=SVG_New_textArea($root;"Hello World!";10;10;380;100;"arial";60;Normal;Align center)

<>pict1:=SVG_Export_to_picture($root) //visualização da primeira imagem

$root2:=SVG_New(400;400;"filters test") //definição da imagem direita idêntica //criação do filtro

$filter:=SVG_Define_filter($root2;"MyShadow")

$vGraph:=True //aplicação da capa gráfica - passe False para aplicar a capa alpha If($vGraph)

$ref1:=SVG_Filter_Blur($filter;2;"sourceGraphic";"blurResult") //"blurResult" será utilizada como "entrada" do filtro offset

Else

$ref1:=SVG_Filter_Blur($filter;2;"sourceAlpha";"blurResult") //"blurResult" será utilizada como "input" do filtro offset

End if

//Adição do filtro offset

$ref2:=SVG_Filter_Offset($filter;5;5;"blurResult";"alphaBlurOffset") //Adição do filtro blend

$ref3:=SVG_Filter_Blend($filter;"sourceGraphic";"alphaBlurOffset";"normal";"finalFilter";) $rect2:=SVG_New_rect($root2;10;10;380;100;0;0;"darkblue";"white";1)

SVG_SET_FILL_BRUSH($root2;"orange")

$textAreaRef2:=SVG_New_textArea($root2;"Hello World!";10;10;380;100;"arial";60;Normal;Align center)

SVG_SET_FILTER($textAreaRef2;"MyShadow") //aplicação do filtro final

(5)

Result (blur input filter = sourceGraphic):

(6)

SVG_Filter_Blur

SVG_Filter_Blur ( refFiltro ; desvio {; entrada {; nome}} ) -> Resultado

refFiltro SVG_Ref Reference of filter

desvio Real Desvio padrão para a operação de tornar embaçado entrada cadeia Força da primitiva de filtro

nome cadeia Objetivo da primitiva de filtro Resultado SVG_Ref Referencia da primitiva

Descrição

O comando SVG_Filter_Blur define um desfoque Gaussiano para o filtro refFiltro e devolve sua referencia. Se refFiltro não é uma referencia de filtro, é gerado um erro.

O parâmetro desvio permite definir o desvio padrão para a operação de desfoque. Se o número é um número inteiro, o mesmo desvio será aplicado aos eixos X e Y. Se o número inclui uma parte decimal, a parte inteira representa o desvio que será aplicado ao eixo X e a parte decimal representa o desvio que será aplicado ao eixo Y.

O parâmetro opcional entrada identifica a fonte gráfica da primitiva de filtro. Pode passar "sourceGraphic", indicando que o gráfico é a fonte do filtro (por padrão),

ou "sourceAlpha", que indica que o canal alpha é a fonte do filtro.

O parâmetro opcional nome é o nome atribuído ao resultado desta primitiva de filtro.

Exemplo

Em um formulário, mostramos duas imagens SVG idênticas, logo criamos um filtro "blur" e o atribuímos a imagem a direita.

$root2:=SVG_New(400;400;"filters test") //definição da imagem direita idêntica //criação do filtro$filter1:=SVG_Define_filter ($root2;"blur")

// filter definition

$vGraph:=True //aplicação na capa gráfica - passe False para aplicar a capa alpha If($vGraph)

SVG_Filter_Blur($filter1;Deviation{Deviation};"sourceGraphic") Else

SVG_Filter_Blur($filter1;Deviation{Deviation};"sourceAlpha") End if

$rect2:=SVG_New_rect($root2;10;10;380;100;0;0;"darkblue";"white";1) //definição da imagem direita idêntica

SVG_SET_FILTER($textAreaRef2;"blur") //aplicação do filtro

<>pict2:=SVG_Export_to_picture($root2) //visualização da segunda imagem Result (input = sourceGraphic):

(7)

(8)

SVG_Filter_Offset

SVG_Filter_Offset ( refFiltro ; dx {; dy {; entrada {; nome}}} ) -> Resultado

refFiltro SVG_Ref Referência de filtro

dx Inteiro longo Offset no eixo X

dy Inteiro longo Offset no eixo Y

entrada cadeia Fonte da primitiva de filtro

nome cadeia Objetivo da primitiva de filtro

Resultado SVG_Ref Referencia da primitiva

Descrição

O comando SVG_Filter_Offset define um offset para o filtro refFiltro e devolve sua referencia. Se refFiltro não é uma referencia de filtro, é gerado um erro.

O parâmetro dx é o valor do deslocamento horizontal. O parâmetro opcional dy é o valor do deslocamento vertical.

O parâmetro opcional entrada identifica a fonte gráfica da primitiva de filtro. Pode passar "sourceGraphic", indicando o gráfico como fonte do filtro (por padrão),

ou "sourceAlpha", que indica o canal alfa do gráfico como fonte do filtro. O parâmetro opcional nome é o nome atribuído ao resultado desta primitiva de filtro.

Exemplo

Em um formulário, mostramos duas imagens SVG idênticas logo criamos um filtro "offset" e o atribuímos a imagem da direita:

$root2:=SVG_New(400;400;"filters test") //definição da imagem da direita idêntica $rect2:=SVG_New_rect($root2;10;10;380;100;0;0;"darkblue";"white";1)

$filter:=SVG_Define_filter($root2;"Offset") //criação do filtro SVG_Filter_Offset($filter;10;20)

SVG_SET_FILTER($textAreaRef2;"Offset") //aplicação do filtro

<>pict2:=SVG_Export_to_picture($root2) //visualização da segunda imagem Resultado:

(9)

Introdução

Componente 4D SVG

Ferramentas de desenvolvimento Detalhes de sintaxes

(10)

Componente 4D SVG

SVG (Scalable Vector Graphics) é um formato de arquivo gráfico vetorial de duas dimensões baseado em XML. 4D inclui um motor de renderização integrado que pode ser utilizado para mostrar os arquivos SVG.

A linguagem XML utilizada para a manipulação de imagens SVG é particularmente rico e extensa. Com o propósito de facilitar seus primeiros passos, 4D oferece o componente 4D SVG, que inclui numerosos comandos que podem ser utilizados para criar e manipular objetos gráficos comuns. Esta livraria não pretende ser exaustiva, mas satisfazer as necessidades mais frequentes dos desenvolvedores 4D. Tenha em conta que as necessidades adicionais podem ser tratadas com os comandos XML de 4D.

Instalação e implementação

O componente 4D SVG deve ser instalado mínimo em 4D v11 SQL releia 3 (versão 11.3). A base local deve funcionar em modo Unicode (o componente não pode ser utilizado nas bases que funcionam em modo Compatibilidade ASCII).

Ao igual que todos os componentes 4D, o componente 4D SVG se instala ao copiar a pasta do componente (4D SVG.4dbase) na pasta Components da base. A pasta Components da base deve estar localizada ao mesmo nível que o arquivo de estrutura. Como os componentes se carregam ao início, a base não deve ser lançada antes de copiar completamente todos os elementos. Se o componente está instalado corretamente, o elemento de 4D SVG aparece na página Métodos da base, na seção "Métodos de componente":

Pode deslocar este elemento para poder ver todos os comandos do componente. Estes comandos podem ser utilizados no editor de métodos de 4D como os comandos 4D ou do plug-in estandarte.

Tenha em conta que o componente 4D SVG permite ser beneficiado de janelas adicionais para a seleção de comandos e a renderização do código SVG. Para obter mais informação, consulte a seção Ferramentas de desenvolvimento.

Efeitos SVG e Direct2D (Windows)

A partir de 4D v13, o motor de renderização Direct2D se utiliza por padrão em Windows. Dependendo de sua configuração de hardware e software, a utilização deste motor pode alterar a renderização de certos efeitos SVG effects tais como sombras. Neste caso, pode desativar Direct2D em sua aplicação com o comando SET DATABASE PARAMETER.

(11)

Ferramentas de desenvolvimento

O componente 4D SVG oferece um conjunto de ferramentas para facilitar a entrada do código e a pré visualização dos gráficos SVG:

a paleta de sintaxes a paleta de cores o visualizador SVG.

Paleta de sintaxes

A paleta de sintaxes lista os comandos do componente 4D SVG agrupados por temas:

Esta paleta permite inserir os comandos do componente no editor de métodos por arrastar e soltar. O comando é colado a continuação no método com seus parâmetros. Os parâmetros opcionais são precedidos por um roteiro.

Para mostrar a paleta de sintaxes, pode:

Executar o método SVGTool_Display_syntax, ou

Se você tem instalado 4D Pop faça clique no botão SVG e escolher o comando SVG Component syntax na paleta do componente 4D Pop, se está utilizando (ver a continuação).

Paleta de cores

A paleta de cores mostra o nome e um exemplo de cada cor especificado na norma SVG, assim como um controle se desliza que pode ser utilizado para mudar a opacidade:

(12)

Pode utilizar esta paleta para inserir uma referencia de cor SVG por arrastar e soltar no editor de métodos de 4D. A cor se insere como uma cadeia que inclui o índice de opacidade (por exemplo, "lavanda:30" para a cor lavanda com uma opacidade de 30%). Para maior informação sobre as referencias de cores, consulte a seção Cores SVG.

Também pode arrastar e soltar uma cor no editor de formulários 4D. Isto cria um quadrado de cor em forma de imagem SVG estática.

Para mostrar a paleta de cores, somente deve executar o método SVGTool_Display_colors.

Visualizador SVG

4D SVG oferece um visualizador SVG que é particularmente útil durante a fase de desenvolvimento:

A janela do visualizador tem duas páginas, acessíveis através dos botões Imagem e Origem ou o menu Apresentação:

Imagem: Esta página oferece uma zona de visualização na que pode arrastar e soltar ou abrir um arquivo imagem SVG (via o menu Arquivo). Também pode mostrar uma referencia SVGTool_SHOW_IN_VIEWER.

Fonte: Esta página lhe permite ver o código XML associado a imagem. Pode selecionar e copiar o código, mas não pode ser modificado.

Quando a janela está no primeiro plano, pode modificar várias opções de visualização e guardar o arquivo imagem no disco utilizando o menu Apresentação:

(13)

Nota: A página "imagem" tem um menu contextual estandarte. Para mostrar a janela de visualização, pode:

Executar o método SVGTool_Display_viewer. Neste caso, a janela aparece vazia.

Chamar ao método SVGTool_SHOW_IN_VIEWER passando uma referencia SVG válida para obter uma vista prévia da imagem de referencia (ver a descrição do comando).

Faça clique no botão SVG e escolha o comando SVG viewer na paleta do componente 4D Pop, se está utilizando (ver mais abaixo).

Integração a 4D Pop

4D Pop é um conjunto de componentes dedicados a produtividade do desenvolvedor e agrupados em uma barra de ferramentas que se integra no entorno de desenvolvimento de 4D

Quando se utiliza ao mesmo tempo 4D Pop e 4D SVG, se agrega um novo botão a barra de ferramentas de 4D Pop:

Este botão permite o acesso direto as ferramentas de ajuda ao desenvolvimento de 4D SVG:

(14)

Detalhes de sintaxes

SVG_Ref

A maioria dos comandos do componente 4D SVG manipulam as estruturas através de referencias de tipo SVG_Ref.

Um SVG_Ref é uma expressão de tipo cadeia de 16 caracteres que identifica de forma única uma estrutura SVG carregada em memória. Pode ser um documento SVG carregado através dos comandos SVG_Copy, SVG_New, SVG_Open_picture ou

SVG_Open_file, ou de toda estrutura SVG manipulada por programação (objeto, filtro, traço, etc.).

Um SVG_Ref é uma referencia XML. Todas as referencias SVG_Ref podem ser utilizadas como parâmetros refElement dos comandos XML DOM de 4D.

Uma vez que não o necessite, lembre chamar ao comando SVG_CLEAR com a referencia SVG_Ref com a finalidade de liberar memória.

Parâmetros opcionais

A não ser que se especifique o contrário, os argumentos numéricos opcionais se ignoram se o valor é igual a -1 e os argumentos textos se ignoram se a cadeia passada está vazia.

Coordenadas

A não ser que se especifique o contrário, os parâmetros de posição (x, y) e de dimensões (largo, alto, radio) se esperam no sistema de coordenadas usuário atual.

(15)

Atributos

SVG_ADD_NAMESPACE SVG_GET_ATTRIBUTES SVG_Get_ID SVG_SET_ATTRIBUTES SVG_SET_ATTRIBUTES_BY_ARRAYS SVG_SET_CLASS SVG_SET_CLIP_PATH SVG_SET_DIMENSIONS SVG_SET_FILL_BRUSH SVG_SET_FILL_RULE SVG_SET_FILTER SVG_SET_ID SVG_SET_MARKER SVG_SET_OPACITY SVG_SET_ROUNDING_RECT SVG_SET_SHAPE_RENDERING SVG_SET_STROKE_BRUSH SVG_SET_STROKE_DASHARRAY SVG_SET_STROKE_LINECAP SVG_SET_STROKE_LINEJOIN SVG_SET_STROKE_MITERLIMIT SVG_SET_STROKE_WIDTH SVG_SET_TRANSFORM_FLIP SVG_SET_TRANSFORM_MATRIX SVG_SET_TRANSFORM_ROTATE SVG_SET_TRANSFORM_SCALE SVG_SET_TRANSFORM_SKEW SVG_SET_TRANSFORM_TRANSLATE SVG_SET_VIEWBOX SVG_SET_VIEWPORT_FILL SVG_SET_VISIBILITY SVG_SET_XY

(16)

SVG_ADD_NAMESPACE

SVG_A DD_NA MESPA CE ( objetoSVG ; prefixo {; URI} )

objetoSVG SVG_Ref Referencia do objeto SVG

prefixo Texto Prefixo do namespace

URI Texto URI do namespace

Descrição

O método SVG_ADD_NAMESPACE adiciona um atributo XML namespace à raíz da árvore DOM da estrutura SVG designada pelo parâmetro objetoSVG. Pode utilizar este método, mais especificamente, para adicionar um namespace a um fragmento de código SVG.

Em prefix, passe uma cadeia com o prefixo do atributo namespace. Pode utilizar uma das seguintes constantes: "svgNS" para o namespace SVG estandarte (http://www.w3.org/2000/svg)

"xlinkNS" para o namespace estandarte XLink (http://www.w3.org/1999/xlink) Neste caso, o parâmetro URI não é necessário.

Também pode passar um prefixo de um namespace personalizado no parâmetro prefixo e seu URI no parâmetro correspondente. Neste caso, o parâmetro URI é obrigatório e se omitido, é gerado um erro.

Exemplo

O seguinte código:

SVG_ADD_NAMESPACE($svgRef;"svgNS")

... adiciona o seguinte código a raíz do objeto SVG:

(17)

SVG_GET_ATTRIBUTES

SVG_GET_A TTRIBUTES ( objetoSVG ; pontA rrayNomes ; pontA rrayValores )

objetoSVG SVG_Ref Referencia SVG

pontArrayNomes Ponteiro Array cadeia dos nomes de atributos pontArrayValores Ponteiro Array cadeia dos valores de atributos

Descrição

O comando SVG_GET_ATTRIBUTES enche os arrays aos que aponta pontArrayNomes e pontArrayValores respectivamente com os nomes e os valores dos atributos do elemento cuja referencia é passada no parâmetro objetoSVG. Se objetoSVG não é válido ou se este atributo não existe, é gerado um erro.

(18)

SVG_Get_ID

SVG_Get_ID ( objetoSVG ) -> Resultado

objetoSVG SVG_Ref Referencia do elemento SVG

Resultado cadeia Nome do elemento

Descrição

O comando SVG_Get_ID devolve o valor do atributo 'id' do elemento cuja referencia é passada no parâmetro objetoSVG. Se

(19)

SVG_SET_ATTRIBUTES

SVG_SET_A TTRIBUTES ( objetoSVG ; nomeA trib ; valorA trib {; nomeA trib2 ; valorA trib2 ; ... ; nomeA tribN ; valorA tribN} )

objetoSVG SVG_Ref Referencia de um elemento SVG nomeAtrib cadeia Nome do atributo a designar

valorAtrib cadeia Valor do atributo

Descrição

O comando SVG_SET_ATTRIBUTES permite atribuir um ou vários atributos personalizados a um objeto SVG de referencia

objetoSVG. Se um ou mais destes atributos já existe, seus valores são substituídos pelos passados como parâmetros. Os atributos e seus valores são passados como parâmetros em pares.

Exemplo

$svg:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";"white";2)

(20)

SVG_SET_ATTRIBUTES_BY_ARRAYS

SVG_SET_A TTRIBUTES_BY_A RRA YS ( objetoSVG ; pontA rrayNomes ; pontA rrayValores )

objetoSVG SVG_Ref Referencia de um elemento SVG pontArrayNomes Ponteiro Nomes dos atributos

pontArrayValores Ponteiro Valores sincronizados dos atributos

Descrição

O comando SVG_SET_ATTRIBUTES_BY_ARRAYS permite atribuir um ou mais atributos personalizados a um objeto SVG de referencia objetoSVG. Se um ou mais de estes atributos já existem, seus valores são substituídos pelos passados como parâmetros.

Os atributos e seus valores são passados por intermédio de dois arrays, aos que apontam pontArrayNomes e pontArrayValores.

Exemplo

$svg:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";"white";2)

ARRAY TEXT($attributes;0)

ARRAY TEXT($values;0)

APPEND TO ARRAY($attributes;"fill")

APPEND TO ARRAY($values;"red")

APPEND TO ARRAY($attributes;"stroke")

APPEND TO ARRAY($values;"blue")

APPEND TO ARRAY($attributes;"stroke-width")

APPEND TO ARRAY($values;"3")

(21)

SVG_SET_CLASS

SVG_SET_CLA SS ( objetoSVG ; classe )

objetoSVG SVG_Ref Referencia de um elemento SVG

classe Texto Nome da classe

Descrição

O comando SVG_SET_CLASS define a classe para o objeto passado em objetoSVG. É gerado um erro se objetoSVG não é uma referencia válida.

Ver também: http://www.w3.org/TR/SVG/styling.html#ClassAttribute

Exemplo

(22)

SVG_SET_CLIP_PATH

SVG_SET_CLIP_PA TH ( objetoSVG ; IDRecorte )

IDRecorte Texto Nome do traço de recorte

Descrição

O comando SVG_SET_CLIP_PATH atribui o traço de recorte chamado IDRecorte ao objeto SVG designado por objetoSVG. É gerado um erro se objetoSVG não é uma referencia válida ou se o traço de recorte não está definido.

Ver também:http://www.w3.org/TR/2001/REC-SVG-20010904/masking.html#EstablishingANewClippingPath

Exemplo 1

Definição de um traço de recorte circular que se lhe atribuirá a uma imagem:

//Definição de um traço circular

$Dom_clipPath:=SVG_Define_clip_path($Dom_SVG;"theClip") $Dom_circle:=SVG_New_circle($Dom_clipPath;150;100;100) //Criação de um grupo

$Dom_g:=SVG_New_group($Dom_SVG) //Inserção de uma imagem

$Txt_path:=Get 4D folder(6)+"logo.svg"

READ PICTURE FILE($Txt_path;$Pic_buffer)

$Dom_picture:=SVG_New_embedded_image($Dom_g;$Pic_buffer) SVG_SET_ID($Dom_picture;"MyPicture")

//Aplicação do recorte ao grupo SVG_SET_CLIP_PATH($Dom_g;"theClip")

Exemplo 2

(23)

//Definição de um traço retangular

$Dom_clipPath:=SVG_Define_clip_path($Dom_SVG;"theClip") $Dom_rect:=SVG_New_rect($Dom_clipPath;5;10;320;240;10;10) //Criação de um grupo

$Dom_g:=SVG_New_group($Dom_SVG) //Inserção de uma imagem

$Txt_path:=Get 4D folder(6)+"logo.svg"

READ PICTURE FILE($Txt_path;$Pic_buffer)

$Dom_picture:=SVG_New_embedded_image($Dom_g;$Pic_buffer) SVG_SET_ID($Dom_picture;"MyPicture")

//Aplicação do recorte ao grupo SVG_SET_CLIP_PATH($Dom_g;"theClip")

(24)

SVG_SET_DIMENSIONS

SVG_SET_DIMENSIONS ( objetoSVG ; largo {; alto {; unidade}} )

largo Inteiro longo Dimensão no eixo X

alto Inteiro longo Dimensão no eixo Y

unidade cadeia Unidade de medida

Descrição

O comando SVG_SET_DIMENSIONS permite fixar as dimensões do objeto SVG de referencia objetoSVG. Se estes atributos já existem, seus valores se substituem pelos passados como parâmetros.

Se passado o parâmetro unidade, se utilizará. Os valores esperados são: px, pt, pc, cm, mm, in, em, ex ou %. Um valor unidade

incorreto gera um erro. Se o parâmetro se omite, se esperam os valores dos parâmetros largo e alto no sistema de coordenadas usuário.

Exemplo

$svg&NBSP;:=SVG_New ` Criar um novo documento

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";"white";2) SVG_SET_DIMENSIONS($object;-1;400) `Nova altura

(25)

SVG_SET_FILL_BRUSH

SVG_SET_FILL_BRUSH ( objetoSVG ; cor )

cor cadeia Expressão de cor

Descrição

O comando SVG_SET_FILL_BRUSH permite fixar a cor de preenchimento para o objeto SVG de referencia objetoSVG. Se este atributo já existe, seu valor se substitui pelo valor passado no parâmetro.

Para obter mais informação sobre as referencias de cores, consulte a seção "Cores SVG".

Exemplo

$svg:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";"white";2) SVG_SET_FILL_BRUSH($object;"blue")

(26)

SVG_SET_FILL_RULE

SVG_SET_FILL_RULE ( objetoSVG ; modoPreench )

objetoSVG SVG_Ref Referencia de um elemento SVG modoPreench Texto Modo de preenchimento do objeto

Descrição

O comando SVG_SET_FILL_RULE permite especificar o modo de preenchimento do objeto SVG designado por objetoSVG. É gerado um erro se objetoSVG não é uma referencia válida.

O parâmetro modoPreench deve conter um dos seguintes valores: "nonzero", "evenodd" ou "inherit". Caso contrário, é gerado um erro.

Ver também:http://www.w3.org/TR/SVG/painting.html#FillRuleProperty

Exemplo

Ilustração dos modos de preenchimento:

//Criação de um traço com o modo de preenchimento 'evenodd' $Dom_path:=SVG_New_path($Dom_SVG;250;75) SVG_PATH_LINE_TO($Dom_path;323;301;131;161;369;161;177;301) SVG_PATH_CLOSE($Dom_path) SVG_SET_FILL_BRUSH($Dom_path;"red") SVG_SET_STROKE_WIDTH($Dom_path;3) SVG_SET_FILL_RULE($Dom_path;"evenodd")

//Criação de um objeto similar com o modo de preenchimento 'nonzero' $Dom_path:=SVG_New_path($Dom_SVG;250;75) SVG_PATH_LINE_TO($Dom_path;323;301;131;161;369;161;177;301) SVG_PATH_CLOSE($Dom_path) SVG_SET_FILL_BRUSH($Dom_path;"red") SVG_SET_STROKE_WIDTH($Dom_path;3) SVG_SET_FILL_RULE($Dom_path;"nonzero") //Movimiento horizontal SVG_SET_TRANSFORM_TRANSLATE($Dom_path;300)

(27)

SVG_SET_FILTER

SVG_SET_FILTER ( objetoSVG ; id )

id cadeia Nome do filtro

Descrição

O comando SVG_SET_FILTER permite associar um filtro ao objeto que tem a referencia objetoSVG. Se objetoSVG não é uma referencia válida, é gerado um erro. Se o atributo já existe, seu valor será substituído.

O parâmetro url é o nome do filtro a utilizar segundo o definido pelo comando SVG_Define_filter. Se este nome não existe, é gerado um erro.

Exemplo

(28)

SVG_SET_ID

SVG_SET_ID ( objetoSVG ; id )

id cadeia ID a atribuir ao objeto

Descrição

O comando SVG_SET_ID permite estabelecer a propriedade 'ID' do objeto SVG de referencia objetoSVG. Se este atributo já existe, seu valor se substitui pelo valor passado no parâmetro.

O ID de um objeto se utiliza para referenciar um objeto. Esta referencia se recupera utilizando o comando SVG_Get_ID. O identificador também é utilizado pelo comando 4D SVG Find element ID by coordinates (consulte a documentação de 4D).

Exemplo

$svg:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";" white";2) SVG_SET_ID($object;"border")

(29)

SVG_SET_MARKER

SVG_SET_MA RKER ( objetoSVG ; id {; posicao} )

objetoSVG SVG_Ref Referência de um elemento SVG

id cadeia Nome do marcador

posicao cadeia Posição do marcador

Descrição

O comando SVG_SET_MARKER permite associar um marcador ao objeto de referencia objetoSVG. Se objetoSVG não é a referencia de um elemento 'line', 'path', 'polyline' ou 'polygon', é gerado um erro. Se o atributo já existe, seu valor será substituído. O parâmetro id é o nome do elemento marcador a utilizar segundo o especificado pelo comando SVG_Define_marker. Se este nome não existe, é gerado um erro.

Para apagar um marcador existente, passe a cadeia "none" ou uma cadeia vazia no parâmetro id.

O parâmetro opcional posicao permite fixar a posição do marcador com respeito ao objeto. É possível colocar diferentes marcadores (se deseja) ao princípio, final ou em qualquer outro pico de um traço. Os valores podem ser os seguintes:

start para colocar um marcador ao começo do traço

end para colocar um marcador ao final do traço

middle para colocar um marcador em cada pico que não seja ao princípio e ao final.

all para colocar marcadores em todos os picos do traço.

Se omitido este parâmetro, o marcador é colocado ao final do traço.

Exemplo 1

Desenhar uma flecha:

$SVG:=SVG_New `Definir a flecha $arrow:=SVG_Define_marker($SVG;"arrow";0;5;4;3;-1) SVG_SET_VIEWBOX($arrow;0;0;10;10) $path:=SVG_New_path($arrow;0;0) SVG_SET_FILL_BRUSH($path;"black") SVG_PATH_LINE_TO($path;10;5) SVG_PATH_LINE_TO($path;0;10) SVG_PATH_CLOSE($path) $line:=SVG_New_path($SVG;100;75) SVG_SET_STROKE_WIDTH($line;10) SVG_PATH_LINE_TO($line;200;75) SVG_PATH_LINE_TO($line;250;125)

`Colocar uma flecha ao final do traço SVG_SET_MARKER($line;" arrow ")

Exemplo 2

(30)

$SVG:=SVG_New

SVG_SET_DEFAULT_BRUSHES("red";"red") `Definir um círculo para marcar os pontos

$point:=SVG_Define_marker($SVG;"pointMarker";2;2;3;3) SVG_SET_VIEWBOX($point;0;0;4;4)

SVG_New_circle($point;2;2;1)

`Definir um quadrado para o ponto de início

$start:=SVG_Define_marker($SVG;"startMarker";1;1;2;2) SVG_New_rect($start;0;0;2;2)

`Definir um triângulo para o ponto final

$end:=SVG_Define_marker($SVG;"endMarker";5;5;3;3;60) SVG_SET_VIEWBOX($end;0;0;10;10)

SVG_New_regular_polygon($end;10;3)

ARRAY LONGINT($tX;0)

ARRAY LONGINT($tY;0)

`Eixos de X

For($Lon_i;0;200;20)

APPEND TO ARRAY($tX;$Lon_i+10)

End for `Dados

APPEND TO ARRAY($tY;100)

$line:=SVG_New_polyline_by_arrays($SVG;->$tX;->$tY;"red";"none";5) `Ordenar os marcadores:

SVG_SET_MARKER($line;"startMarker";"start") SVG_SET_MARKER($line;"pointMarker";"middle") SVG_SET_MARKER($line;"endMarker";"end")

(31)

SVG_SET_OPACITY

SVG_SET_OPA CITY ( objetoSVG ; opacidFundo {; linha | nivel } )

objetoSVG SVG_Ref Referencia de um elemento SVG opacidFundo Inteiro longo Opacidade (%)

linha | nivel Inteiro longo Opacidade (%)

Descrição

O comando SVG_SET_OPACITY permite definir a opacidade do preenchimento e da linha do objeto de referencia objetoSVG. Se estes atributos já existem, seus valores se substituem pelos passados como parâmetros.

Os valores esperados devem estar entre 0 e 100.

Exemplo

$svg:=SVG_New `Criar um novo documento

$object:=SVG_New_rect($svg;10;10;200;100;0;0;"red";"blue")

(32)

SVG_SET_ROUNDING_RECT

SVG_SET_ROUNDING_RECT ( objetoSVG ; arredondadoX {; arredondadoY} )

arredondadoX Inteiro longo Radio no eixo X arredondadoY Inteiro longo Radio no eixo Y

Descrição

O comando SVG_SET_ROUNDING_RECT permite fixar os rádios da elipse utilizada para arredondar as esquinas de um retângulo de referencia objetoSVG. Se estes atributos já existem, seus valores se substituem pelos passados como parâmetros. Se objetoSVG não é a referencia de um retângulo, é gerado um erro.

Os valores se esperam no sistema de coordenadas do usuário.

Exemplo

$svg&NBSP;:=SVG_New ` Criar um novo documento $object:=SVG_New_rect($svg&NBSP;;10;10;200;100)

(33)

SVG_SET_SHAPE_RENDERING

SVG_SET_SHA PE_RENDERING ( objetoSVG ; renderi )

renderi Texto Tipo de renderização

Descrição

O comando SVG_SET_SHAPE_RENDERING permite fixar os compromissos que devem ser feitos para a renderização dos elementos gráficos do objeto designado por objetoSVG. Se objetoSVG não é um objeto SVG, é gerado um erro.

O parâmetro renderi deve conter um dos seguintes valores: "auto", "optimizeSpeed", "crispEdges", "geometricPrecision" ou "inherit". Caso contrário, é gerado um erro.

(34)

SVG_SET_STROKE_BRUSH

SVG_SET_STROKE_BRUSH ( objetoSVG ; cor )

cor cadeia Expressão de cor

Descrição

O comando SVG_SET_STROKE_BRUSH permite fixar a cor utilizado para as linhas do objeto SVG de referencia objetoSVG. Se este atributo já existe, seu valor é substituído pelo valor passado em parâmetro.

Para mais informação sobre as cores, consulte a seção “Cores SVG”.

Exemplo

$svg:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";"white";2) SVG_SET_STROKE_BRUSH($object;"red")

(35)

SVG_SET_STROKE_DASHARRAY

SVG_SET_STROKE_DA SHA RRA Y ( objetoSVG ; listra {; valor}{; valor2 ; ... ; valorN} )

listra Real Longitude da primeira listra

valor Inteiro longo Longitude de espaços e de listras

Descrição

O comando SVG_SET_STROKE_DASHARRAY permite definir o patrão de roteiros e espaços utilizados para delinear o traço do objeto SVG designado por objetoSVG. Se svgObject não é uma referencia SVG válida, é gerado um erro.

O valor total do parâmetro listra indica a longitude da primeira listra do patrão de pontos. Se omitidos os parâmetros valor, a linha pontilhada consistirá em uma série de roteiros e espaços da mesma longitude.

O valor decimal do parâmetro listra, se não é nulo, indica a distância a partir da qual começar as listras. Se listra vale 0, o patrão de pontos é eliminado.

Os parâmetros valor especificam alternativamente a longitude dos espaços e as listras que seguem a primeira listra. Se dado um número ímpar de valores (incluindo a primeira listra), a lista de valores se repete até que se produz um número par de valores. Ver também:http://www.w3.org/TR/SVG/painting.html#StrokeProperties

Exemplo

Ilustrações de uma linha pontilhada:

//Linha $Dom_line:=SVG_New_line($Dom_SVG;10;10;500;500) SVG_SET_STROKE_WIDTH($Dom_line;10) SVG_SET_STROKE_DASHARRAY($Dom_line;8,099) SVG_SET_STROKE_BRUSH($Dom_line;"red") //Retângulo $Dom_rect:=SVG_New_rect($Dom_SVG;25;30;320;240;10;10;"red";"yellow:30") SVG_SET_STROKE_WIDTH($Dom_rect;5) SVG_SET_STROKE_DASHARRAY($Dom_rect;2) //Círculo $Dom_circle:=SVG_New_circle($Dom_SVG;350;400;100;"blue";"none") SVG_SET_STROKE_DASHARRAY($Dom_circle;2;4;6;8)

(36)

SVG_SET_STROKE_LINECAP

SVG_SET_STROKE_LINECA P ( objetoSVG ; modo )

modo cadeia Modo de renderização

Descrição

O comando SVG_SET_STROKE_LINECAP permite especificar a forma dos extremos do traço do objeto SVG de referencia

objetoSVG. Se este atributo já existe, seu valor é substituído pelo valor passado como parâmetro. O parâmetro modo deve conter uma das seguintes cadeias, gerenciadas pelo SVG:

butt (por padrão): estandarte

round square

inherit: herdar do objeto pai

(37)

SVG_SET_STROKE_LINEJOIN

SVG_SET_STROKE_LINEJOIN ( objetoSVG ; modo )

modo cadeia Modo de renderização

Descrição

O comando SVG_SET_STROKE_LINEJOIN permite especificar a forma dos extremos do traço do objeto SVG de referencia

objetoSVG. Se este atributo já existe, seu valor é substituído pelo valor passado como parâmetro. O parâmetro modo deve conter uma das seguintes cadeias, gerenciadas pelo SVG:

miter (por padrão): estandarte

round bevel

inherit: herdar do objeto pai

(38)

SVG_SET_STROKE_MITERLIMIT

SVG_SET_STROKE_MITERLIMIT ( objetoSVG ; uniao )

uniao Inteiro longo Valor de união

Descrição

O comando SVG_SET_STROKE_MITERLIMIT permite definir o limite da longitude da união em ângulo entre o traço e o perfil do objeto SVG designado por objetoSVG. Se objetoSVG não é uma referencia válida SVG, é gerado um erro.

Se o parâmetro uniao é igual a -1, o valor será o valor por padrão (4). Se o parâmetro uniao é igual a 0, então a definição do atributo é eliminada. Todo valor <0, provocará um erro.

(39)

SVG_SET_STROKE_WIDTH

SVG_SET_STROKE_WIDTH ( objetoSVG ; largoTraco {; unidade} )

largoTraco Real Largo de linha

unidade cadeia Unidade de medida

Descrição

O comando SVG_SET_STROKE_WIDTH permite estabelecer a grossura das linhas do objeto SVG de referencia objetoSVG. Se este atributo já existe, seu valor se substitui pelo valor passado em parâmetro.

Passe em largoTraco o valor da grossura das linhas. O parâmetro opcional unidade permite especificar a unidade utilizada. Pode passar um dos seguintes valores: px, pt, pc, cm, mm, in, em, ex ou %. Se omitido o parâmetro unidade, o parâmetro largoTraco

se espera no sistema de coordenadas do usuário.

Exemplo

$svg :=SVG_New

(40)

SVG_SET_TRANSFORM_FLIP

SVG_SET_TRA NSFORM_FLIP ( objetoSVG ; horizontal {; vertical} )

horizontal Booleano Girar horizontal

vertical Booleano Girar vertical

Descrição

O comando SVG_SET_TRANSFORM_FLIP permite aplicar um giro horizontal e/ou vertical ao objeto SVG de referencia

objetoSVG.

Se o parâmetro horizontal é igual a True, se aplica um giro horizontal. Se o parâmetro vertical é igual a True, se aplica um giro vertical.

Exemplo

Efeito de girar um objeto texto:

svgRef:=SVG_New

SVG_SET_VIEWBOX(svgRef;0;0;400;200) $tx:=SVG_New_text(svgRef;"4D";10;0;"";96) SVG_SET_FONT_COLOR($tx;"blue") `Mudar a cor `Efeito:

$tx:=SVG_New_text(svgRef;"4D";10;0;"";96) `Tomar o mesmo texto SVG_SET_FONT_COLOR($tx;"lightblue") `Mudar a cor

SVG_SET_TRANSFORM_FLIP($tx;Vrai) `Aplicar um giro vertical SVG_SET_TRANSFORM_SKEW($tx;-10) `Inclinação

(41)

SVG_SET_TRANSFORM_MATRIX

SVG_SET_TRA NSFORM_MA TRIX ( objetoSVG ; a ; b {; c ; d {; e ; f}} )

objetoSVG SVG_Ref Referencia de um elemento SVG a Inteiro longo Elemento a da matriz de transformação b Inteiro longo Elemento b da matriz de transformação c Inteiro longo Elemento c da matriz de transformação d Inteiro longo Elemento d da matriz de transformação e Inteiro longo Elemento e da matriz de transformação f Inteiro longo Elemento f da matriz de transformação

Descrição

O comando SVG_SET_TRANSFORM_MATRIX aplica uma transformação matricial ao objeto SVG de referencia objetoSVG. Este tipo de transformação permite combinar as transformações tais como, por exemplo, uma rotação e uma tradução.

Exemplo

SVG_SET_TRANSFORM_MATRIX($ID;0,707;-0,707;0,707;0,707;255,03;111,21) `Equivale a aplicar as 3 transformações seguintes:

SVG_SET_TRANSFORM_TRANSLATE($ID;50;90) SVG_SET_TRANSFORM_ROTATE($ID;-45)

(42)

SVG_SET_TRANSFORM_ROTATE

SVG_SET_TRA NSFORM_ROTA TE ( objetoSVG ; angulo {; x ; y} )

objetoSVG SVG_Ref Referencia de um elemento SVG angulo Inteiro longo Ângulo de rotação

x Inteiro longo Coordenada do centro de rotação no eixo X y Inteiro longo Coordenada do centro de rotação no eixo Y

Descrição

O comando SVG_SET_TRANSFORM_ROTATE aplica uma rotação do valor angulo ao objeto SVG de referencia objetoSVG. O ângulode rotação que se espera em graus, a rotação é feita para a direita.

Se não passam os parâmetros opcionais x e y, a rotação se realiza com respeito a origem do sistema de coordenadas usuário atual. Se estes parâmetros são passados, a rotação é realizada com respeito as coordenadas passadas (x, y).

Exemplo

svgRef:=SVG_New

`Desenhar um retângulo vermelho com um borde azul

$rec:=SVG_New_rect($svg;150;50;200;400;0;0;"blue";"red";10)

`Aplicar uma rotação de 10° no sentido das mãos do relógio com respeito ao centro SVG_SET_TRANSFORM_ROTATE($rec;370;175;225)

(43)

SVG_SET_TRANSFORM_SCALE

SVG_SET_TRA NSFORM_SCA LE ( objetoSVG ; escalaX {; escalaY} )

escalaX Real Valor no eixo X

escalaY Real Valor no eixo Y

Descrição

O comando SVG_SET_TRANSFORM_SCALE aplica uma mudança de escala horizontal e/ou vertical a um objeto SVG de referencia objetoSVG.

Se o valor escalaX não é nulo, o objeto aumenta (valor > 1) o diminui (0 < valor < 1) horizontalmente o número de unidades passadas. O valor igual a 1 não muda a escala do objeto.

Se passado o parâmetro escalaY, o objeto aumenta (valor > 1) ou diminui (0 < valor < 1) verticalmente o número de unidades passadas. O valor igual a 1 não muda a escala do objeto. Se omitido este parâmetro, seu valor se supõe que é igual a escalaX.

Exemplo

$SVG:=SVG_New

$Text:=SVG_New_text($SVG;"Hello world!";5)

(44)

SVG_SET_TRANSFORM_SKEW

SVG_SET_TRA NSFORM_SKEW ( objetoSVG ; horizontal {; vertical} )

objetoSVG SVG_Ref Referencia de um elemento SVG horizontal Inteiro longo Valor de inclinação ao largo do eixo X vertical Inteiro longo Valor de inclinação ao largo do eixo Y

Descrição

O comando SVG_SET_TRANSFORM_SKEW especifica uma inclinação horizontal e/ou vertical do objeto SVG de referencia

objetoSVG.

Se o valor de horizontal não é nulo, o objeto se inclina horizontalmente em função do número de unidades passadas, caso contrário, é ignorada.

Se o valor de vertical não é nulo, o objeto se inclina verticalmente em função do número de unidades passadas.

Exemplo

$svg :=SVG_New `Desenho do fundo SVG_New_rect($svg;0;0;270;160;10;10;"black";"gray") `Colocar o texto… $tx:=SVG_New_text($svg;"Hello world!";100;5;"";48) `em branco SVG_SET_FONT_COLOR($tx;"white") `Inclinação SVG_SET_TRANSFORM_SKEW($tx;-50;10)

(45)

SVG_SET_TRANSFORM_TRANSLATE

SVG_SET_TRA NSFORM_TRA NSLA TE ( objetoSVG ; x {; y} )

x Inteiro longo Coordenada no eixo X

y Inteiro longo Coordenada no eixo Y

Descrição

O comando SVG_SET_TRANSFORM_TRANSLATE especifica uma tradução horizontal e/ou vertical do objeto SVG de referencia objetoSVG.

Se o valor de x não é nulo, o objeto será movido horizontalmente o número de unidades passadas, caso contrário, será ignorada. Se passado o parâmetro y, o objeto será movido verticalmente o número de unidades passadas.

Exemplo

svgRef:=SVG_New

`Desenhar um retângulo vermelho

$Object:=SVG_New_rect(svgRef;0;0;200;100;0;0;"black";"red") `Desenhar um quadrado em 0,0

$Object:=SVG_New_rect(svgRef;0;0;20;20) `Mover o quadrado a 150,50

(46)

SVG_SET_VIEWBOX

SVG_SET_VIEWBOX ( objetoSVG ; x ; y ; largo ; alto {; modo} )

objetoSVG SVG_Ref Referencia de um elemento SVG x Real Posição X do retângulo de visualização y Real Posição Y do retângulo de visualização largo Real Largura do retângulo de visualização alto Real Altura do retângulo de visualização modo Texto Adaptação ao retângulo de visualização

Descrição

O comando SVG_SET_VIEWBOX permite definir o retângulo de visualização do objeto SVG de referencia objetoSVG. Se este atributo já existe, seu valor se substitui pelo valor passado em parâmetro.

Os valores se esperam no sistema de coordenadas usuário.

O parâmetro opcional modo permite indicar se a gráfica deve ser adaptada ao tamanho do retângulo de visualização. O valor esperado para modo deve ser reconhecido por SVG: ‘none’, ‘xMinYMin’, ‘xMidYMin’, ‘xMaxYMin’, ‘xMinYMid’, ‘xMidYMid’, ‘xMaxYMid’, ‘xMinYMax’, ‘xMidYMax’, ‘xMaxYMax’ e ‘true’ (para xMidYMid).

Exemplo

`Criar um documento SVG de 4x8cm $svg:=SVG_New

SVG_SET_DIMENSIONS($SVG;4;8;"cm")

`Declarar o sistema de coordenadas usuário como 1 cm = 250 pontos usuário SVG_SET_VIEWBOX($svg;0;0;1000;2000;"true")

(47)

SVG_SET_VIEWPORT_FILL

SVG_SET_VIEWPORT_FILL ( objetoSVG {; cor {; opacidade}} )

cor cadeia Cor de preenchimento

opacidade Inteiro longo Porcentagem de opacidade

Descrição

O comando SVG_SET_VIEWPORT_FILL permite fixar a cor de fundo de um documento SVG de referencia objetoSVG. Se este atributo já existe, seu valor se substitui pelo valor passado como parâmetro. Se objetoSVG é um elemento SVG que não aceita este atributo, é gerado um erro.

O parâmetro opcional cor indica a cor a utilizar para o fundo da imagem. Se este parâmetro é omitido ou contém uma cadeia vazia, se utiliza o branco. Para mais informação sobre cores, consulte a seção Cores SVG.

O parâmetro opcional opacidade pode ser usado para precisar o valor da porcentagem de opacidade a aplicar a este

(48)

SVG_SET_VISIBILITY

SVG_SET_VISIBILITY ( objetoSVG {; ocultar} )

objetoSVG SVG_Ref Referencia de um elemento SVG ocultar Booleano True = Mostrar, False = Ocultar

Descrição

O comando SVG_SET_VISIBILITY esconde ou mostra o objeto SVG de referencia objetoSVG. Se objetoSVG não é a referencia de um objeto que pode ser ocultado, é gerado um erro.

Se o parâmetro opcional ocultar é True ou é omitido, o objeto é mostrado. Se é False, o objeto se oculta.

Exemplo

$svg&NBSP;:=SVG_New

$object:=SVG_New_rect($svg;10;10;200;200;0;0;"black";" white";2)

(49)

SVG_SET_XY

SVG_SET_XY ( objetoSVG ; x {; y} )

x Inteiro longo Coordenada no eixo X

y Inteiro longo Coordenada no eixo Y

Descrição

O comando SVG_SET_XY permite fixar as coordenadas da esquina superior esquerda da área retangular onde o objeto SVG de referencia objetoSVG é localizado. Se estes atributos já existem, seus valores são substituídos pelos passados como

parâmetros. Se objetoSVG é um elemento SVG que não aceita este atributo, é gerado um erro. Os valores se esperam no sistema de coordenadas do usuário.

Exemplo

$svg&NBSP;:=SVG_New `Criar um novo documento

$object:=SVG_New_image($svg;"#Pictures/logo4D.png") `Colocar o logo SVG_SET_XY($object;10;40) `Modificar a posição da imagem

(50)

Cores e gradientes

Cores SVG SVG_Color_from_index SVG_Color_grey SVG_Color_RGB_from_CMYK SVG_Color_RGB_from_HLS SVG_Color_RGB_from_long SVG_GET_COLORS_ARRAY SVG_GET_DEFAULT_BRUSHES SVG_SET_DEFAULT_BRUSHES SVG_SET_HUE SVG_SET_SATURATION

(51)

Cores SVG

Definição de cores

SVG reconhece todas as sintaxes alternativas para as cores definidas na norma CSS2. Os comandos do componente 4D SVG suportam todas estas sintaxes.

Uma cor pode ser expressada em uma das seguintes formas: Formato RGB Formato Exemplo #rgb #f00 #rrggbb #ff0000 rgb(r,g,b) [#cor(255,0,0)/] [#cor(100%, 0%, 0%)/] Formato chave "cor"

SVG aceita uma extensa lista de palavras chaves de nomes de cor, por exemplo "red".

A lista de palavras chaves, assim como sua correspondência RGB se encontra no Anexo A, Array de cores. Também pode ver esta lista e inserir diretamente os valores de cores via a paleta de cores de 4D SVG. Para obter mais informação sobre este ponto, consulte a seção Ferramentas de desenvolvimento.

Opacidade

É possível especificar a opacidade nas expressões de cor dos comandos do componente utilizando a sintaxes "cor:opacidade", onde a opacidade é um número compreendido entre 0 (sem cor) e 100 (cor totalmente opaca. Portanto "red:50" se interpretará como um vermelho em 50% de opacidade.

Gradientes

Os gradientes são transações progressivas de cor ao longo de um vetor. Estes gradientes se definem com os comandos

SVG_Define_linear_gradient e SVG_Define_radial_gradient. Uma vez definidos, os gradientes se utilizam por referencia utilizando a sintaxes "url (#NomeDegrada)".

Da mesma forma, é possível definir uma cor personalizada associada a uma opacidade utilizando o comando

(52)

SVG_Color_from_index

SVG_Color_from_index ( indice ) -> Resultado

indice Inteiro longo Número de cor

Resultado Text field Cor designado por índice

Descrição

O método SVG_Color_from_index devolve a cor SVG correspondente a cor 4D definido no parâmetro indice.

O parâmetro indice designa um número na paleta de cores de 4D, onde as cores estão numeradas de 1 a 256. Para maior informação sobre este ponto, consulte a descrição do comando de 4D SET COLOR.

Exemplo

Neste exemplo, recriamos a paleta de cores de 4D:

$Dom_svg:=SVG_New $Lon_line:=0 For($Lon_ii;0;15;1) $Lon_column:=0 For($Lon_i;1;16;1) $Txt_color:=SVG_Color_from_index(($Lon_ii*16)+$Lon_i) $Dom_rect:=SVG_New_rect($Dom_svg;$Lon_column; $Lon_line;11;11;0;0;"white";$Txt_color) $Lon_column:=$Lon_column+11 End for $Lon_line:=$Lon_line+11 End for SVGTool_SHOW_IN_VIEWER($Dom_svg)

(53)

SVG_Color_grey

SVG_Color_grey ( porcentagem ) -> Resultado

porcentagem Inteiro Intensidade do cinza

Resultado cadeia Cadeia cor

Descrição

O comando SVG_Color_grey devolve uma cadeia que expressa um cor cinza com uma intensidade porcentagem. A cadeia devolvida é da forma "RGB (vermelho, verde, azul)" onde os 3 valores são iguais, sintaxes reconhecida pelos motores de renderização SVG.

Exemplo

$txtColor:=SVG_Color_grey(60) `$txtCor é igual a "#666666"

(54)

SVG_Color_RGB_from_CMYK

SVG_Color_RGB_from_CMYK ( ciano ; magenta ; amarelo ; preto {; formato} ) -> Resultado

ciano Inteiro longo Valor de ciano

magenta Inteiro longo Valor de magenta

amarelo Inteiro longo Valor de amarelo

preto Inteiro longo Valor de preto

formato Inteiro longo Formato da cor

Resultado Texto Cadeia cor

Descrição

O comando SVG_Color_RGB_from_CMYK devolve uma cadeia que expressa a cor correspondente aos quatro parâmetros de cor, ciano, magenta, amarelo e preto, passados como argumentos. A cadeia se devolve por padrão da forma "RGB (vermelho, verde, azul)", sintaxes reconhecida pelos motores de renderização SVG.

ciano, magenta, amarelo e preto, são inteiros longos entre 0 e 100%.

O parâmetro opcional formato permite especificar o formato desejado para a cadeia cor devolvida. Os valores são: Valor Formato

1 (por padrão) rgb(r,g,b)

2 #rgb

3 #rrggbb

(55)

SVG_Color_RGB_from_HLS

SVG_Color_RGB_from_HLS ( tonalidade ; luminosidade ; saturaçao {; formato} ) -> Resultado

tonalidade Inteiro longo Valor da tonalidade

luminosidade Inteiro longo Valor da luminosidade

saturaçao Inteiro longo Valor da saturação

formato Inteiro longo Formato da cor

Resultado Texto Cadeia cor

Descrição

O comando SVG_Color_RGB_from_HLS devolve uma cadeia que expressa a cor que corresponde aos parâmetros tonalidade,

luminosidade e saturaçao passados como argumentos. A cadeia se devolve por padrão da forma "RGB (vermelho, verde, azul)", sintaxes reconhecida pelos motores de renderização SVG.

tonalidade é um inteiro longo entre 0 e 360°.

luminosidade e saturaçao são inteiros longos entre 0 e 100%.

O parâmetro opcional formato permite especificar o formato desejado para a cadeia cor devolvida. Os valores são: Valor Formato

1 (por padrão) rgb(r,g,b)

2 #rgb

3 #rrggbb

(56)

SVG_Color_RGB_from_long

SVG_Color_RGB_from_long ( cor {; formato} ) -> Resultado

cor Inteiro longo Valor da cor

formato Inteiro Formato da cor

Resultado cadeia Cadeia cor

Descrição

O comando SVG_Color_RGB_from_long devolve uma cadeia que expressa a cor passada como argumento. A cadeia devolvida é desta forma "RGB (vermelho, verde, azul)", sintaxes reconhecida pelos motores de renderização SVG.

O parâmetro cor é um inteiro longo de 4 bytes cujo formato (0x00RRGGBB) se descreve a continuação (os bytes se numeram do 0 ao 3, de direita a esquerda):

Byte Descrição

2 Componente vermelho da cor (0..255) 1 Componente verde da cor (0..255) 0 Componente azul da cor (0..255)

O parâmetro opcional formato permite especificar o formato desejado para a cadeia cor devolvida. Os valores são: Valor Formato 1 (por padrão) rgb(r,g,b) 2 #rgb 3 #rrggbb 4 rgb(r%, g%, b%)

Exemplo

$txtColor:=SVG_Color_RGB_from_long($color)

(57)

SVG_GET_COLORS_ARRAY

SVG_GET_COLORS_A RRA Y ( ponteiroA rrayNomcor )

ponteiroArrayNomcor Ponteiro Ponteiro ao array que recebe os nomes das cores

Descrição

O comando SVG_GET_COLORS_ARRAY enche o array apontado pelo parâmetro ponteiroArrayNomcor com os nomes das cores reconhecidos por SVG.

(58)

SVG_GET_DEFAULT_BRUSHES

SVG_GET_DEFA ULT_BRUSHES ( linha {; fundo} )

linha Ponteiro Variável Alfa

fundo Ponteiro Variável Alfa

Descrição

O comando SVG_GET_DEFAULT_BRUSHES devolve, na variável sinalizada por linha, a cor por padrão atual para desenhar as linhas.

Se passado o parâmetro opcional fundo, a variável sinalizada por este parâmetro receberá a cor por padrão atual utilizado para os fundos.

Se não foram modificadas, estas cores são branco e preto, respectivamente.

Exemplo

(59)

SVG_SET_DEFAULT_BRUSHES

SVG_SET_DEFA ULT_BRUSHES ( linha {; fundo} )

linha cadeia Cor

fundo cadeia Cor

Descrição

O comando SVG_SET_DEFAULT_BRUSHES permite fixar as cores por padrão utilizados pelo componente SVG.

O parâmetro linha contém a nova cor que será utilizada para as linhas. O parâmetro opcional fundo contém a nova cor que será utilizada para o desenho de fundo.

Pode passar uma cadeia vazia em qualquer destes parâmetros com a finalidade de restabelecer o valor por padrão do componente, ou seja, preto para as linhas e branco para o fundo.

Exemplo

Como Mondrian…

$svg:=SVG_New

`Definir as cores por padrão

SVG_SET_DEFAULT_BRUSHES("black";"white") `Linhas de 4 pontos de largura

SVG_SET_STROKE_WIDTH($svg;4) $g:=SVG_New_group($svg) SVG_New_rect($g;2;2;40;40) SVG_New_rect($g;2;45;40;100) SVG_SET_FILL_BRUSH(SVG_New_rect($g;2;144;40;60);"midnightblue") SVG_SET_FILL_BRUSH(SVG_New_rect($g;42;2;120;142);"red") SVG_New_rect($g;42;144;95;60) SVG_New_rect($g;137;144;25;25) SVG_SET_FILL_BRUSH(SVG_New_rect($g;137;169;25;35);"yellow") SVG_SET_TRANSFORM_TRANSLATE($g;10;10) `Caption

SVG_New_text($svg;"Inspirado por Piet Mondrian - 1930,\rComposition II in Red, Blue, and Yellow";10;220;"";9)

(60)

SVG_SET_HUE

SVG_SET_HUE ( objetoSVG ; tonalidade )

tonalidade Inteiro longo Valor de tonalidade

Descrição

O comando SVG_SET_HUE define um valor de tonalidade para o objeto SVG designado pelo parâmetro objetoSVG. objetoSVG

deve ser um recipiente SVG (svg, grupo, símbolo, patrão, marcador, etc.) ou uma imagem; caso contrário, é devolvido um erro. No parâmetro tonalidade, passe um valor entre 0 e 360.

(61)

SVG_SET_SATURATION

SVG_SET_SA TURA TION ( objetoSVG ; saturaçao )

saturaçao Inteiro longo Valor de saturação

Descrição

O método SVG_SET_SATURATION define um valor para o objeto SVG designado pelo parâmetro objetoSVG. objetoSVG deve ser um recipiente SVG (svg, grupo, símbolo, patrão, marcador, etc.) ou uma imagem; caso contrário, é devolvido um erro.

(62)

Desenho

SVG_Add_object SVG_ADD_POINT SVG_New_arc SVG_New_circle SVG_New_ellipse SVG_New_ellipse_bounded SVG_New_embedded_image SVG_New_image Updated 14.0 SVG_New_line SVG_New_path SVG_New_polygon SVG_New_polygon_by_arrays SVG_New_polyline SVG_New_polyline_by_arrays SVG_New_rect SVG_New_regular_polygon SVG_PATH_ARC SVG_PATH_CLOSE SVG_PATH_CURVE SVG_PATH_LINE_TO SVG_PATH_MOVE_TO SVG_PATH_QCURVE SVG_Use

(63)

SVG_Add_object

SVG_A dd_object ( objetoSVGObjetivo ; objetoSVGFonte ) -> Resultado

objetoSVGObjetivo SVG_Ref Referencia do elemento pai objetoSVGFonte SVG_Ref Referencia do objeto a adicionar

Resultado SVG_Ref Referencia do objeto SVG

Descrição

O comando SVG_Add_object permite localizar no recipiente SVG designado por objetoSVGFonte um objeto SVG designado por

objetoSVGObjetivo e devolve sua referencia. O recipiente SVG pode ser a raíz do documento ou qualquer outra referencia a um objeto SVG que possa conter este tipo de elemento.

(64)

SVG_ADD_POINT

SVG_A DD_POINT ( objetoSVGPai ; x ; y {; x2 ; y2 ; ... ; xN ; yN} )

objetoSVGPai SVG_Ref Referencia do elemento pai

x Inteiro longo Coordenada do novo ponto no eixo X y Inteiro longo Coordenada do novo ponto no eixo Y

Descrição

O comando SVG_ADD_POINT adiciona um ou mais segmentos a via de acesso referenciada por objetoSVGPai. A via pode ser de tipo 'path' "polyline" ou "polygon". Se objetoSVGPai não é uma referencia de um traço deste tipo, é gerado um erro.

Se passados vários pares de coordenadas, os diferentes pontos serão adicionados sucessivamente. Neste caso, se o último par de coordenadas está incompleto (falta y), será ignorado.

Example

(65)

SVG_New_arc

SVG_New_arc ( objetoSVGPai ; x ; y ; radio ; inicio ; fim {; corPrimeiroPlano {; corFundo {; largoTraco}}} ) -> Resultado

x Inteiro longo Coordenada do centro no eixo X

y Inteiro longo Coordenada do centro no eixo Y

radio Inteiro longo Radio do círculo

inicio Inteiro longo Valor em graus do início do arco fim Inteiro longo Valor em graus do final do arco corPrimeiroPlano cadeia Nome da cor ou do gradiente

corFundo cadeia Nome da cor ou do gradiente

largoTraco Real Grossura do traço

Resultado SVG_Ref Referencia do arco

Descrição

O comando SVG_New_arc cria um novo arco de círculo no recipiente SVG designado por objetoSVGPai e devolve sua referencia. Se objetoSVGPai não é um documento SVG, é gerado um erro.

Os parâmetros opcionais corPrimeiroPlano e corFundo contém respectivamente o nome da cor da linha e da cor de fundo. (Para mais informação sobre as cores, consulte os comandos do tema Cores e gradientes).

O parâmetro opcional largoTraco contém o tamanho do traço expressado em pixels. Seu valor por padrão é 1.

Exemplo 1

Desenho de um arco de 0° a 90° (cor de preenchimento e borde, grossura do traço por padrão):

svgRef:=SVG_New

objectRef:=SVG_New_arc(svgRef;100;100;90;90;180)

Exemplo 2

Desenho de um arco de 90° a 180° de um círculo azul claro com um borde azul e um traço de 2 pontos:

svgRef:=SVG_New

(66)

SVG_New_circle

SVG_New_circle ( objetoSVGPai ; x ; y ; radio {; corPrimeiroPlano {; corFundo {; largoTraco}}} ) -> Resultado

x Inteiro longo Coordenada do centro no eixo X

y Inteiro longo Coordenada do centro no eixo Y

radio Inteiro longo Radio do círculo

corPrimeiroPlano cadeia Nome da cor ou do gradiente

corFundo cadeia Nome da cor ou do gradiente

Resultado SVG_Ref Referencia do círculo

Descrição

O comando SVG_New_circle cria um círculo no recipiente SVG designado por objetoSVGPai e devolve sua referencia. Se

objetoSVGPai não é um documento SVG, é gerado um erro.

O círculo se localiza e dimensiona de acordo as coordenadas do centro (x, y) e o radio é passado como parâmetro.

O parâmetro opcional largoTraco contém o tamanho do traço expressado em pixels. Seu valor por padrão é 1.

Exemplo 1

Desenho de um círculo (cor de preenchimento e de borde, grossura de linha por padrão):

svgRef:=SVG_New

objectRef:=SVG_New_circle(svgRef;100;100;90)

Exemplo 2

Desenho de um círculo azul claro com um borde azul e uma grossura de linha de 2 pontos:

svgRef:=SVG_New

(67)

SVG_New_ellipse

SVG_New_ellipse ( objetoSVGPai ; x ; y ; radioX ; radioY {; corPrimeiroPlano {; corFundo {; largoTraco}}} ) -> Resultado

x Inteiro longo Coordenada no eixo X do centro da elipse y Inteiro longo Coordenada no eixo Y do centro da elipse

radioX Inteiro longo Radio no eixo X

radioY Inteiro longo Radio no eixo Y

corPrimeiroPlano cadeia Nome da cor ou do gradiente corFundo cadeia Nome da cor ou do gradiente

Resultado SVG_Ref Referencia da elipse

Descrição

O comando SVG_New_ellipse cria uma nova elipse no recipiente SVG designado por objetoSVGPai. Se objetoSVGPai não é um documento SVG, é gerado um erro.

A elipse se localiza e dimensiona de acordo aos valores de x, y, largo e alto.

O parâmetro opcional largoTraco contém o tamanho do traço expressado em píxels. Seu valor por padrão é 1.

Exemplo 1

Desenho de uma elipse (cor de preenchimento e de borde, grossura de linha por padrão):

svgRef:=SVG_New

objectRef:=SVG_New_ellipse(svgRef;100;50;90;40)

Exemplo 2

Desenho de uma elipse azul claro com um borde azul e uma grossura de linha de 2 pontos:

svgRef:=SVG_New