Dessiner sur une page Web avec XAML

On utilise la balise canvas de XAML pour intégrer des images dynamiques dans la page web.

Canvas, le canevas de votre programme Web, est à la fois une interface composée de widgets, les composants graphiques tels que boutons, liste, menus, etc. qui composent l'interface d'une application, et aussi une surface sur laquelle on peut dessiner en mode vectoriel.

Configurer le canevas

Le canevas dispose de propriétés que l'on peut modifier:

Width: la largeur.
Height: la hauteur.
Background: la couleur de fond.
Opacity: la transparence.

Ces propriétés doivent être distinguées de celles du contrôle ActiveX que l'on a défini dans le script d'initialisation, en paramètre de la fonction agHost().

Exemple de canevas

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Heigh="100"
  Width="200"
  Background="Blue">
</Canvas>

Dessiner un rectangle

Les éléments graphiques s'insèrent dans le code XAML directement comme des éléments d'interface. On peut insérer un bouton ou insérer un rectangle!

La position de l'objet se définit par des propriétés de Canvas:
Canvas.Left: position horizontale dans le canevas.
Canvas.Top: position verticale dans le canevas.

Les principales propriétés de l'objet Rectangle, commune aux autres figures sont:
Height: hauteur.
Width: largeur.
Fill: couleur de remplissage.
Stroke: couleur du tracé.
StrokeThickness: épaisseur du tracé

Le rectangle a aussi des propriétés propres:
RadiusX: arrondi d'angle horizontal.
RadiusY: arrondi d'angle vertical.

Example:

<Rectangle
  Canvas.Top="20"
  Canvas.Left="30"
  Height="100"
  Width="200"
  Fill="Red"
  Stroke="Black"
  StrokeThickness="1" 
  RadiusX="4"
  RadiusY="6"
/>

Le code XAML est dans le fichier rectangle.xaml. (Sauvé sous le nom rectangle-xaml.txt).

Autres figures de base

Line

Tracer une ligne.
Les propriétés sont X1, X2, Y1, Y2 pour définir les points de départ et d'arrivée. La ligne se place dans le canevas comme le rectangle avec Canvas.Left et Canvas.Top.

Ellipse

Dessiner une cercle ou une ellipse.
Les propriétés sont celles du rectangle sauf les arrondis. Le cercle aura les propriétés Width et Height égales.

Polygon

Une figure fermée dont le nombre de cotés est variable
La figure est définie par une série de couple de valeurs entières séparées par une virgule, les couples étant délimités par un espace blanc. Cette définition est assignée à la propriété Points.
Exemple:

<Polygone
  Points="10,10 30,10 30,20 30,10 10,10" />

Polyline

Série de lignes connectée mais ne format pas nécessairement une figure fermée. Même attributs que le polygone.

Path

Représente une figure définie par des points et des courbes.
La propriété Data est assignée une liste de valeurs réelles qui sont des couples de nombre relatifs précédés éventuellement d'un préfixe pour la forme.

Affichage du rectangle donné en exemple:

© 2011 Scriptol.fr