Table des Matières
OpenLaszlo permet de faire des dessins à deux dimensions. Cela se fait en utilisant du code procédural dans un élément <drawview> pour dessiner des lignes et remplir des formes. Dans ce tutoriel nous verrons les points clef de la bibliothèque et montrerons quelques-uns des effets intéressants qu'on peut obtenir avec quelques lignes de code.
Le groupe de travail sur la technologie hypertexte des applications web (Web Hypertext Application Technology Working Group ("WHATWG")) est une "collaboration non officielle entre des concepteurs de navigateurs internet et des tiers qui souhaitaient développer de nouvelles technologies pour permettre aux concepteurs d'écrire et de déployer des applications sur la toile mondiale". Ce groupe a récemment publié une spécification pour la réalisation de dessins (vous pouvez la trouver ici).
OpenLaszlo implémente une partie de cette bibliothèque de dessin du whatwg. Pour savoir en quoi quoi OpenLaszlo s'écarte de la spécification du whatwg, consultez le Manuel de Référence LZX.
La classe <drawview> étend la classe <view>. Ainsi il hérite des propriétés de <view>; une balise <drawview> crée une vue rectangulaire. A première vue, une vue de dessin ressemble à n'importe quelle autre vue :
Exemple 13.1. view et drawview
<canvas height="75" proxied="false">
<simplelayout spacing="5" axis="x"/>
<view height="50" width="50" bgcolor="red"/>
<drawview height="50" width="50" bgcolor="blue"/>
</canvas>
|
Il n'y a quasiment pas d'autres attributs dans la classe drawview en plus de ceux hérités de la classe view. drawview a quatre autres attributs en plus :
-
fillStyle
-
globalAlpha
-
lineWidth
-
strokeStyle
Ces attributs peuvent être modifiés et manipulés à partir de code procédural (script) dans des balises <method> d'éléments <drawview>. La classe drawview a dix méthodes qui lui sont associées. Nous allons les voir plus bas, après avoir expliqué quelques concepts supplémentaires.
Pour dessiner une ligne (ou un "chemin"), vous positionez un stylo logique à un point de départ et vous le faites bouger vers des coordonnées x et y en connectant les points par une ligne droite ou quadratique. La ligne reste invisible tant que vous ne lui donnez pas de l'épaisseur. Quand vous donnez de l'épaisseur à un chemin, vous définissez la largeur et le style de la ligne, la rendant ainsi visible.
Par exemple, le code suivant n'affiche rien de visible :
Exemple 13.2. Dessin invisble
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100)
this.lineTo(200,100)
this.quadraticCurveTo(120, 200, 300, 100)
</method>
</drawview>
</canvas>
|
Mais en ajoutant la ligne this.stroke() nous obtenons :
Exemple 13.3. Ecriture de la ligne
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100)
this.lineTo(200,100)
this.quadraticCurveTo(120, 200, 300, 100)
this.stroke()
</method>
</drawview>
</canvas>
|
La méthode closePath()() dessine une ligne jusqu'au point de départ du chemin courant :
Example 13.4. Fermeture de chemin
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.closePath()
this.stroke()
</method>
</drawview>
</canvas>
|
Maintenant que nous avons une forme fermée, nous pouvons la remplir. Premièrement nous définissions un style de remplissage avec fillStyle, puis nous remplissons la forme.
Exemple 13.5. Style de remplissage
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.stroke()
//fillSytles are hex numbers representing color.
this.fillStyle = 0xff00ff
this.fill()
</method>
</drawview>
</canvas>
|
Remarquez que si vous ne fermez pas le chemin mais appelez la méthode fill(), le chemin sera fermé automatiquement. Consultez les pages de référence pour plus de détails.
L'attribut globalAlpha est utilisé pour définir l'opacité de lignes et de remplissages. Il prend une valeur entre zéro (transparent) et un (opaque).
Exemple 13.6. Utilisation de globalAlpha
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.stroke()
this.fillStyle = 0xff00ff
this.globalAlpha= .3
this.fill()
</method>
</drawview>
</canvas>
|
Remarquez que le code est procédural, donc la valeur de alpha s'applique à la fois au fillStyles et au lineStyles qui sont définis avant l'appel à la méthode stroke() ou fill(). Dans l'exemple précédent, la valeur de globalAlpha vaut 1 (valeur par défaut) quand on définit l'épaisseur de la ligne (stroke) et 0,3 au remplissage de la couleur.
Un style de remplissage fillStyle peut être un dégradé de couleur, c'est à dire un mélange de couleur dans une zone. Pour utiliser un dégradé, il faut d'abord le créer en utilisant le constructeur de fonction approprié (linéaire ou radial), puis définir le style de remplissage fillStyle comme étant le dégradé. Un dégradé est un objet de type LzCanvasGradient; vous définissez les paramètres du gradient en lui appliquant des méthodes comme addColorStop(). addColorStop()() prend deux arguments : le numéro de l'arrêt et la couleur.
Exemple 13.7. Ajout d'un dégradé
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.stroke()
//the gradient starts at the x and y where the curved line starts
var g = this.createLinearGradient(200,100, 150, 300)
//opacity is 0 -- the fill is invisible
this.globalAlpha = 0;
//starting color is black
g.addColorStop(0, 0x000000);
//now the opacity is set to opaque
this.globalAlpha = 1;
//the gradient goes from black to purple
g.addColorStop(1, 0xff00ff);
this.fillStyle = g;
this.fill();
</method>
</drawview>
</canvas>
|
Pour avoir une idée de ce à quoi ressemble un dégradé, essayez de faire varier les coordonnées x et y du dernier point.
Souvenez-vous également que les zones de dessins drawview ont des couleurs d'arrière plan. Vous pouvez les utiliser en plus des dégradés et des transparences :
Exemple 13.8. Arrière-plans et dégradés
<canvas height="200" proxied="false">
<drawview height="150" width="300" bgcolor="blue">
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.stroke()
var g = this.createLinearGradient(200,100, 150, 300)
this.globalAlpha = 0;
g.addColorStop(0, 0xffffff);
this.globalAlpha = 1;
g.addColorStop(.3, 0xff00ff);
this.fillStyle = g;
this.fill();
</method>
</drawview>
</canvas>
|
Le dégradé peut être linéaire ou radial (pour plus de détails voir la Référence).
Nous avons vu que dessiner une ligne revient à faire bouger un stylo. Mais comment soulève-t-on le style pour le déplacer vers un autre point de la toile ? En utilisant la méthode beginPath()().
Exemple 13.9. Commencer un chemin
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(100,100);
this.lineTo(200,100);
this.quadraticCurveTo(120, 200, 300, 100)
this.closePath()
this.stroke()
this.beginPath()
this.moveTo(200,000);
this.lineTo(100,200);
this.quadraticCurveTo(120, 200, 300, 100)
this.closePath()
this.stroke()
</method>
</drawview>
</canvas>
|
La méthode clear néttoie complètement l'espace.
Exemple 13.10. Nettoyer la vue
<canvas height="200" proxied="false">
<drawview>
<method event="oninit">
this.moveTo(40,40)
this.lineTo(80,40)
this.lineTo(80, 80)
this.lineTo(40,90)
this.closePath()
this.stroke()
this.fillStyle = 0xff00ff;
this.fill()
</method>
<button onclick="parent.clear()" text="clear"/>
</drawview>
</canvas>
|
Bien que la bibliothèque de <drawview> soit procédurale, il est simple de mélanger le mode procédural des bibliothèques de dessin avec le style LZX déclaratif. Le petit programme suivant illustre cela. L'attribut r est modifié par un élément <animator>; quand r change, la méthode redraw()() est invoquée.
Exemple 13.11. Dessiner avec un animator
<canvas width="300" height="300" debug="false" >
<class name="circle" extends="drawview" >
<attribute name="circlecolor" value="white"/>
<attribute name="r" value="100"/>
<method event="oninit">
this.redraw();
</method>
<method event="onr">
this.redraw();
</method>
<method name="redraw" ><![CDATA[
this.clear();
this.beginPath();
this.moveTo(x+r, y);
var a = Math.tan(22.5 * Math.PI/180);
for (var angle = 45; angle<=360; angle += 45) {
// endpoint:
var endx = r*Math.cos(angle*Math.PI/180);
var endy = r*Math.sin(angle*Math.PI/180);
// control:
// (angle-90 is used to give the correct sign)
var cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
var cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
this.quadraticCurveTo(cx+x, cy+y, endx+x, endy+y);
}
var g = this.createLinearGradient(0, 0, 8, x+r, y+r, 0)
this.globalAlpha = 1;
g.addColorStop(0, 0xffffff);
this.globalAlpha = 0;
g.addColorStop(1, this.circlecolor);
this.fillStyle = g;
this.fill()
this.globalAlpha = 1;
this.linewidth= 5;
this.stroke();
]]>
</method>
</class>
<circle r="50" x="50" y="50" circlecolor="blue"/>
<circle x="50" y="50" circlecolor="teal">
<animatorgroup process="sequential" repeat="Infinity">
<animator attribute="r" from="20" to="0" duration="3000"/>
<animator attribute="r" from="0" to="20" duration="3000"/>
</animatorgroup>
</circle>
</canvas>
|
Les développeurs OpenLaszlo ont déjà utilisé la bibliothèque de dessin pour créer un sélecteur de couleurs et un programme de dessin. Voyez ce que vous pouvez en faire. Amusez-vous bien!