|
Suite à notre introduction
à Ming, nous allons maintenant passer à une approche
pas à pas des fonctions de cette bibliothèque. Dans
cet article, nous aborderons les fonctions graphiques, et plus précisément
les fonctions de dessin.
Bien que experimentale, Ming dispose d'un lot de fonctions graphiques
assez conséquent, qui nous permet de créer des formes
évoluées par combinaison de formes plus simples.
Figures
de base
Nous avons dans notre précédents article comment créer
un objet "droite" (ou un "segment de droite"):
$droite = new SWFShape();
$droite->setLine(1, 0, 0, 0);
$droite->drawLine(0, 220);
De même, nous avons vu comment créer un objet "carré",
qui est une combinaison de quatres objets "droite" dans
un cinquième objet conteneur, la figure fermée étant
ensuite remplie:
$carre = new SWFShape();
$carre->setRightFill($carre->addFill(0, 0, 255));
$carre->movePenTo(-100, -100);
$carre->drawLineTo(100, -100);
$carre->drawLineTo(100, 100);
$carre->drawLineTo(-100, 100);
$carre->drawLineTo(-100, -100);
Nous avons donc à notre disposition les outils nécessaires
à la construction de figures dérivées ou approchantes:
triangles, quadrilatères (carré, rectange, losange,
trapèze...), et toute autre figure composée de segments
de droites et d'angles.
Le cercle
Nous allons maintenant aborder la création d'un arc de cercle,
à partir duquel nous pourrons construire un cercle plein
de la même manière que nous avons construit un carré
plein. Nous utiliserons les méthodes drawCurve()
et drawCurveTo() de l'objet SWFShape.
Ces deux méthodes ne s'utilisent pas de la même manière
que drawLine() et drawLineTo():
en effet, le dessin d'un trait ne nécessite que deux points,
il en faut un troisième pour une courbe. La courbe a donc
besoin d'un point de départ (le dernier endroit où
la "plume" s'est posée, qu'on peut modifier avec
movePen() ou movePenTo()),
d'un point de contrôle défini relativement au point
de départ, et d'un point d'encrage défini lui-aussi
par rapport au point d'encrage. Ming tracera le trait de la courbe
en partant du point de départ, en se dirigeant vers la point
de contrôle et en déviant plus ou moins vite vers le
point d'encrage, selon la position de ces deux derniers points.
Rappellons la différence entre drawCurve()
et drawCurveTo() (et, plus généralement,
entre les fonctions de dessins "avec ou sans To
final", pour simplifier): les coordonnées de drawCurve()
se font par rapport à la position initiale de la "plume"
qui se "déplace" dans le repère. Utiliser
drawCurveTo(), de son coté,
fera que la plume se positionnera dans l'espace de la forme dessinée,
et non plus par rapport au point d'origine. En clair, drawCurve()
trace une courbe par rapport au point précédent (a
pour le point b, et b pour le point c), et drawCurveTo()
la trace à l'aide de coordonnées globales.
Ainsi, les deux codes suivants donnent des résultats équivalents:
$courbe1 = new SWFShape();
$courbe1->movePen(0,0);
$courbe1->setLine(1, 125, 175, 125); // 1 twip, vert sombre
$courbe1->drawCurveTo(200, 112, 225, 300);
$courbe2 = new SWFShape();
$courbe2->movePen(0,0);
$courbe2->setLine(1, 255, 125, 125); // 1 twip, rouge sombre
$courbe2->drawCurve(200, 112, 25, 188);
Notez que les coordonnées du point d'encrage (d'arrivée)
dans drawCurveTo() sont la somme
des coordonnées de drawCurve()...
Des lignes et des courbes, se sont là toutes les capacités
de dessin de Ming.
Malgré tout, l'objet SWFShape présente encore quelques
méthodes que nous n'avons pas encore abordé. Outre
addFill(), movePen()
et movePenTo(), nous disponsons
des méthodes setLeftFill()
et setRightFill(). Nous allons revenir
sur chacune.
movePen(): déplace la plume
par rapport à son emplacement précédent.
movePentTo(): déplace la
plume avec des coordonnées globales.
addFill(): ajouter un remplisage
à la liste des styles de remplissage de la figure. Elle renvoie
un objet SWFFill, que l'on peut ensuite utiliser avec les fonctions
set...Fill(). Le remplissage peut
être plein (une couleur), en dégradé ou sous
forme d'une image bitmap.
setLeftFill(): rempli la figure
avec le style de remplissage défini précédemment
avec addFill(), ou un remplissage
plein. Le "Left" signifie que cette fonctions doit être
utilisée pour les figures tracées dans les sens inverse
des aiguilles d'une montre.
setRightFill(): idem que setLeftFill(),
mais ne s'applique que pour les figures tracées dans le sens
des aiguilles d'une montre.
Pour faciliter le dessin d'un cercle, l'auteur de la bibliothèque
propose une fonction complète. Elle permet de tracer un cercle
de rayon $r, centré sur les
coordonnées ($x, $y)
dans la forme $s.
$a = $r * 0.414213562;
// la tangente d'un angle de 22.5°
$b = $r * 0.707106781; // le sinus d'un angle de 45°
//
(ou la moitié de la racine de 2)
$s->movePenTo($x+$r, $y);
$s->drawCurveTo($x+$r, $y-$a, $x+$b, $y-$b);
$s->drawCurveTo($x+$a, $y-$r, $x, $y-$r);
$s->drawCurveTo($x-$a, $y-$r, $x-$b, $y-$b);
$s->drawCurveTo($x-$r, $y-$a, $x-$r, $y);
$s->drawCurveTo($x-$r, $y+$a, $x-$b, $y+$b);
$s->drawCurveTo($x-$a, $y+$r, $x, $y+$r);
$s->drawCurveTo($x+$a, $y+$r, $x+$b, $y+$b);
$s->drawCurveTo($x+$r, $y+$a, $x+$r, $y);
Ce qui nous permet d'écrire...
(fichier cercle.php)
<?php
$cercle = new SWFShape();
$cercle->setLine(1,0,0,0);
$r = 42; // le rayon du cercle
$x = 42; // l'abcisse du point central
$y = 42; // l'ordonnée du point central
$a = $r * 0.414213562;
$b = $r * 0.707106781;
$cercle->movePenTo($x+$r, $y);
$cercle->drawCurveTo($x+$r, $y-$a, $x+$b, $y-$b);
$cercle->drawCurveTo($x+$a, $y-$r, $x, $y-$r);
$cercle->drawCurveTo($x-$a, $y-$r, $x-$b, $y-$b);
$cercle->drawCurveTo($x-$r, $y-$a, $x-$r, $y);
$cercle->drawCurveTo($x-$r, $y+$a, $x-$b, $y+$b);
$cercle->drawCurveTo($x-$a, $y+$r, $x, $y+$r);
$cercle->drawCurveTo($x+$a, $y+$r, $x+$b, $y+$b);
$cercle->drawCurveTo($x+$r, $y+$a, $x+$r, $y);
$swf=new SWFMovie();
$swf->setDimension(640, 480);
$swf->setBackground(255, 255, 255);
$cercle1=$swf->add($cercle);
$cercle1->moveTo(100, 100);
header('Content-type: application/x-shockwave-flash');
$swf->output();
?>
Voici pour les
fonctions de dessin de figures. Nous aborderons les autres fonctions
de Ming au fur et à mesure...
|
[