Cours Composant 4D SVG
Cours Composant 4D SVG en PDF
...
Composant 4D SVG
Le SVG (Scalable Vector Graphics) est un format de fichier graphique vectoriel bidimensionnel basé sur le XML. 4D comporte un moteur de rendu intégré permettant d'afficher les fichiers SVG. Le langage XML dédié à la manipulation des images SVG est particulièrement riche et étendu. Afin d'en simplifier l'accès et la prise en main, 4D propose le composant 4D SVG. Ce composant comporte de nombreuses commandes permettant la création et la manipulation d'objets graphiques usuels. Le but de cette bibliothèque n'est pas d'être exhaustif mais de répondre aux besoins les plus courants des développeurs 4D. A noter que tous les besoins spécifiques supplémentaires pourront être traités avec les commandes XML de 4D.
Installation et mise en œuvre
Le Composant 4D SVG doit être installé au minimum dans 4D v11 SQL release 3 (version 11.3). Comme tout composant 4D, le Composant 4D SVG s'installe par la copie du dossier du composant (4D SVG.4dbase) dans le dossier Components de la base. Le dossier Components de la base doit être situé au même niveau que le fichier de structure. Les composants étant chargés au démarrage, la base ne doit pas être lancée avant la copie complète de tous les éléments. Si le composant est correctement installé, l'élément 4D SVG apparaît dans la page Méthodes de la base, rubriques "Méthodes composant" :
Vous pouvez déployer cet élément afin de visualiser l'ensemble des commandes du composant. Les commandes s'utilisent dans l'éditeur de méthodes de 4D comme des commandes 4D ou de plug-in standard. A noter que le Composant 4D SVG vous permet de bénéficier de fenêtres supplémentaires pour la sélection des commandes et le rendu du code SVG. Pour plus d'informations, reportez-vous à la section Outils de développement.
Le composant 4D SVG propose un ensemble d'outils destinés à faciliter la saisie du code et la prévisualisation des graphiques SVG :
- la palette de syntaxe
- la palette de couleurs
- le visualisateur SVG
Palette de syntaxe
La palette de syntaxe liste les commandes du composant 4D SVG regroupées par thèmes :
La palette permet d'insérer les commandes du composant dans l'éditeur de méthodes par simple glissé-déposer. La commande est alors collée dans la méthode avec ses paramètres. Les paramètres optionnels sont préfixés d'un trait de soulignement.
Pour afficher la palette de syntaxe, vous pouvez soit :
- exécuter la méthode SVGTool_Display_syntax,
- cliquer sur le bouton SVG et choisir la commande Syntaxe du composant
SVG dans la palette du composant 4D Pop si vous l'utilisez (cf. ci-dessous).
Palette de couleurs
La palette de couleurs affiche le nom et un échantillon de chaque couleur définie dans la norme SVG, ainsi qu'un curseur permettant de faire varier le taux d'opacité :
…
Vous pouvez utiliser cette palette pour insérer par glisser-déposer une référence de couleur SVG dans l'éditeur de méthodes de 4D. La couleur est insérée sous forme de chaîne incluant éventuellement le taux d'opacité (par exemple "lavender:30" pour la couleur lavande et une opacité de 30 %). Pour plus d'informations sur les références de couleurs, reportez-vous à la section Couleurs SVG. Vous pouvez également glisser-déposer une couleur dans l'éditeur de formulaires de 4D. Cette action crée un carré de couleur sous forme d'image SVG statique.
Pour afficher la palette de couleurs, il vous suffit d'exécuter la méthode SVGTool_Display_colors.
Visualisateur SVG
4D SVG propose un visualisateur SVG, particulièrement utile en phase de développement :
…
La fenêtre du visualisateur comporte deux pages, accessibles via les boutons Image et Source ou le menu Présentation :
- Image : cette page présente une zone de visualisation dans laquelle vous pouvez glisser-déposer ou ouvrir un fichier image SVG (via le menu Fichier). Vous pouvez également y afficher une référence SVG valide à l'aide de la commande SVGTool_SHOW_IN_VIEWER.
- Source : cette page permet de visualiser le code XML associé à l'image. Vous pouvez sélectionner et copier le code, mais vous ne pouvez pas le modifier.
Lorsque la fenêtre est au premier plan, vous pouvez modifier plusieurs options d'affichage et enregistrer le fichier image sur disque via le menu Présentation :
…
Note : La page "Image" dispose d'un menu contextuel standard.
Pour afficher la fenêtre du visualisateur, vous pouvez soit :
- exécuter la méthode SVGTool_Display_viewer. Dans ce cas, la fenêtre s'affiche vide.
- appeler la méthode SVGTool_SHOW_IN_VIEWER en lui passant une référence SVG valide afin de prévisualiser l'image référencée (voir la description de la commande)
- cliquer sur le bouton SVG et choisir la commande Visualisateur SVG dans la palette du composant 4D Pop si vous l'utilisez (cf. ci-dessous).
Intégration à 4D Pop
4D Pop est un ensemble de composants dédiés à la productivité du développeur et regroupés dans une barre d'outils qui s'intègre dans l'environnement de développement de 4D. Lorsque vous utilisez conjointement 4D Pop et 4D SVG, un nouveau bouton est disponible dans la barre d'outils de 4D Pop :
…
Ref_SVG
La plupart des commandes du composant 4D SVG manipulent les structures SVG via des références de type Ref_SVG. Une Ref_SVG est une expression de type Chaîne de 16 caractères. Elle identifie de façon unique une structure SVG chargée en mémoire. Il peut s'agir d'un document SVG chargé via les commandes SVG_Copy, SVG_New, SVG_Open_picture ou SVG_Open_file, ou de toute structure SVG manipulée par programmation (objet, filtre, tracé, etc.). Une Ref_SVG est une référence XML. Toutes les références Ref_SVG peuvent être utilisées comme paramètres refElément des commandes XML DOM de 4D. Une fois que vous n'en avez plus besoin, n'oubliez pas d'appeler la commande SVG_CLEAR avec les références Ref_SVG afin de libérer la mémoire.
Paramètres optionnels
Sauf mention contraire, les arguments numériques optionnels sont ignorés si leur valeur est égale à -1 et les arguments texte sont ignorés si la chaîne passée est vide.
Coordonnées
Sauf mention contraire, les paramètres de position (x, y) et de dimensions (largeur, hauteur, rayon) sont attendus dans le système de coordonnées utilisateur courant.
SVG_GET_ATTRIBUTES (objetSVG; pointTabNoms; pointTabValeurs)
Paramètre Type Description
objetSVG Ref_SVG Référence SVG
pointTabNoms Pointeur Tableau chaîne des libellés d'attributs
pointTabValeurs Pointeur Tableau chaîne des valeurs d'attributs
Description
La commande SVG_GET_ATTRIBUTES remplit les tableaux pointés par pointTabNoms et pointTabValeurs respectivement des noms et des valeurs des attributs de l'élément dont la référence est passée dans objetSVG. Si objetSVG n'est pas valide ou si cet attribut n'existe pas, une erreur est générée.
SVG_Get_ID (objetSVG) Chaîne
Paramètre Type Description
objetSVG Ref_SVG Référence d'élément SVG
Résultat Chaîne Nom de l'élément
Description
La commandeSVG_Get_ID retourne la valeur de l'attribut 'id' de l'élément dont la référence est passée en paramètre.
Si objetSVG n'est pas valide ou si cet attribut n'existe pas, une erreur est générée.
SVG_SET_ATTRIBUTES (objetSVG; nomAttribut; valeurAttribut{;
nomAttribut2; valeurAttribut2; ...; nomAttributN; valeurAttributN})
Paramètre Type Description
objetSVG Ref_SVG Référence d'un élément SVG
nomAttribut Chaîne Nom de l'attribut à fixer
valeurAttribut Chaîne Valeur de l'attribut
Description
La commande SVG_SET_ATTRIBUTES permet d'affecter un ou plusieurs attribut(s) personnalisé(s) à un objet SVG de référence objetSVG. Si le ou les attribut(s) existaient déjà, leurs valeurs sont remplacées par celles passées en paramètre. Les attributs et leurs valeurs sont passés par couples de paramètres.
Exemple
$svg:=SVG_New
$object:=SVG_New_rect ($svg; 10; 10; 200; 200; 0; 0; "black";"white"; 2)
SVG_SET_ATTRIBUTES($object; "style"; "fill:red; stroke:blue; strokewidth:3")
SVG_SET_ATTRIBUTES_BY_ARRAYS (objetSVG; pointTabNoms;
pointTabValeurs)
Paramètre Type Description
objetSVG Ref_SVG Référence d'un élément SVG
pointTabNoms Pointeur Noms des attributs
pointTabValeurs Pointeur Valeurs synchronisées des attributs
Description
La commande SVG_SET_ATTRIBUTES_BY_ARRAYS permet d'affecter un ou plusieurs attribut(s) personnalisé(s) à un objet SVG de référence objetSVG. Si le ou les attribut(s) existaient déjà, leurs valeurs sont remplacées par celles passées en paramètres. Les attributs et leurs valeurs sont passés par l'intermédiaire de deux tableaux, sur lesquels pointent pointTabNoms et pointTabValeurs.
Exemple
$svg:=SVG_New
$object:=SVG_New_rect ($svg; 10; 10; 200; 200; 0; 0; "black";"white"; 2)
TABLEAU TEXTE($attributes; 0)
TABLEAU TEXTE ($values; 0)
AJOUTER A TABLEAU($attributes; "fill")
AJOUTER A TABLEAU($values; "red")
AJOUTER A TABLEAU($attributes; "stroke")
AJOUTER A TABLEAU($values; "blue")
AJOUTER A TABLEAU($attributes; "stroke-width")
AJOUTER A TABLEAU($values; "3")
SVG_SET_ATTRIBUTES_BY_ARRAYS ($object; -> $attributes; -> $values)
SVG_SET_DIMENSIONS (objetSVG; largeur{; hauteur{; unité}})
Paramètre Type Description
objetSVG Ref_SVG Référence d'un élément SVG
largeur Numérique Dimension sur l'axe x
hauteur Numérique Dimension sur l'axe y
unité Chaîne Unité
Description
La commande SVG_SET_DIMENSIONS permet de fixer les dimensions de l'objet SVG de référence objetSVG. Si ces attributs existaient déjà, leurs valeurs sont remplacées par celles passées en paramètres. Si le paramètre unité est passé, il sera utilisé. Les valeurs attendues sont : px, pt, pc, cm, mm ou in. Une valeur d'unité incorrecte génère une erreur. Si le paramètre est omis, les valeurs de largeur et hauteur sont attendues dans le système de coordonnées utilisateur.
Exemple
$svg :=SVG_New `Créer un nouveau document
$object:=SVG_New_rect ($svg; 10; 10; 200; 200; 0; 0; "black";"white"; 2)
SVG_SET_DIMENSIONS ($object; -1; 400) `Nouvelle hauteur
SVG_SET_FILL_BRUSH (objetSVG; couleur)
Paramètre Type Description
objetSVG Ref_SVG Référence d'un élément SVG couleur Chaîne Expression couleur
Description
La commande SVG_SET_FILL_BRUSH permet de fixer la couleur de remplissage de l'objet SVG de référence objetSVG. Si cet attribut existait déjà, sa valeur est remplacée par celle passée en paramètre.
Pour plus d'informations sur les références de couleurs, reportez-vous à la section "Couleurs SVG".
Exemple
$svg:=SVG_New
$object:=SVG_New_rect ($svg; 10; 10; 200; 200; 0; 0; "black";"white"; 2)
SVG_SET_FILL_BRUSH ($object; "blue")
SVG_SET_FILTER (objetSVG; url)
Paramètre Type Description
objetSVG Ref_SVG Référence d'élément SVG url Chaîne Nom du filtre
Description
La commande SVG_SET_FILTER permet d'associer un filtre à l'objet de référence objetSVG. Si objetSVG n'est pas une référence valide, une erreur est générée. Si l'attribut existait déjà, sa valeur est remplacée.
Le paramètre url est le nom du filtre à utiliser, tel que défini avec la commande SVG_Define_filter. Si ce nom n'existe pas, une erreur est générée.
Exemple
Reportez-vous à l'exemple de la commande SVG_Define_filter.
SVG_SET_ID (objetSVG; id)
Paramètre Type Description
objetSVG Ref_SVG Référence d'un élément SVG id Chaîne Identifiant à attribuer à l'objet