◆ Portail Antalaha

Bibliothèques › Zdog

Les formes

Les formes sont les éléments visibles d'un modèle Zdog. Toutes héritent des propriétés et méthodes d'Anchor et de Shape.

Rect

Un rectangle. Définissez sa taille avec width et height. Valeurs par défaut : width: 1, height: 1.

let rect = new Zdog.Rect({
  addTo: illo,
  width: 120,
  height: 80,
  stroke: 20,
  color: '#E62',
});

Toutes les formes sont orientées vers l'« avant », c'est-à-dire vers l'axe z positif. Utilisez rotate pour orienter une forme dans une autre direction.

let rect = new Zdog.Rect({
  addTo: illo,
  width: 80,
  height: 64,
  stroke: 10,
  translate: { x: -48 },
  // tourné pour faire face à gauche
  rotate: { y: TAU/4 },
  color: '#E62',
});

rect.copy({
  translate: { y: -48 },
  // tourné pour faire face vers le haut
  rotate: { x: TAU/4 },
  color: '#636',
});

RoundedRect

Un rectangle aux coins arrondis. Définissez sa taille avec width et height, comme pour Rect. Le rayon des coins arrondis se règle avec cornerRadius. Valeur par défaut : cornerRadius: 0.25.

let roundedRect = new Zdog.RoundedRect({
  addTo: illo,
  width: 120,
  height: 80,
  cornerRadius: 30,
  stroke: 20,
  color: '#EA0',
});

Ellipse

Une ellipse. Définissez diameter pour obtenir un cercle. Valeur par défaut : diameter: 1.

let circle = new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  stroke: 20,
  color: '#C25',
});

Définissez width et height pour obtenir une ellipse.

let ellipse = new Zdog.Ellipse({
  addTo: illo,
  width: 60,
  height: 120,
  stroke: 20,
  color: '#C25',
});

Donnez à quarters un nombre entier pour obtenir des quarts de cercle ou des demi-cercles. Le quart de cercle commence en haut à droite et se poursuit dans le sens des aiguilles d'une montre.

let semicircle = new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  quarters: 2,
  stroke: 20,
  color: '#C25',
});

Polygon

Un polygone régulier. Définissez sa taille avec radius et son nombre de côtés avec sides. Valeurs par défaut : radius: 0.5, sides: 3.

let pentagon = new Zdog.Polygon({
  addTo: illo,
  radius: 60,
  sides: 5,
  stroke: 20,
  color: '#EA0',
});

Shape

La classe Shape sert à créer des formes personnalisées. La forme d'un Shape est définie par son path (son tracé).

path

Définit la forme.

Lorsque path n'est pas défini, il vaut par défaut un simple point. Si stroke est défini, un simple point est affiché sous la forme d'une sphère.

new Zdog.Shape({
  addTo: illo,
  // aucun path défini : un simple point par défaut
  stroke: 80,
  color: '#636',
});

Commandes de tracé

Donnez à path un tableau de commandes de tracé. Ces commandes indiquent à la forme la direction à suivre. Le principe ressemble au dessin de tracés dans un <canvas> 2D, dans les chemins SVG ou dans la tortue du langage Logo.

Il existe quatre commandes de tracé : line, move, arc et bezier. Chaque commande s'écrit sous la forme d'un objet dont la clé est le nom de la commande et la valeur est un objet vecteur ou un tableau d'objets vecteurs représentant les points de la commande.

path: [
  { line: {/*x,y,z*/} }, // syntaxe détaillée
  // ou
  {/*x,y,z*/}, // raccourci pour line : le point seul

  { move: {/*x,y,z*/} },

  { arc: [
    {/*x,y,z*/}, // point d'angle
    {/*x,y,z*/}, // point d'arrivée
  ]},

  { bezier: [
    {/*x,y,z*/}, // point de contrôle de départ
    {/*x,y,z*/}, // point de contrôle d'arrivée
    {/*x,y,z*/}, // point d'arrivée
  ]},
]

Pour démarrer le tracé, la première commande est toujours traitée comme un move.

line

{ line: {/*x,y,z*/} }, // syntaxe détaillée
// ou
{/*x,y,z*/}, // raccourci pour line : le point seul

new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -40 }, // départ au 1er point
    { x:  40 }, // ligne jusqu'au 2e point
  ],
  stroke: 20,
  color: '#636',
});

// forme en Z
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -32, y: -40 }, // départ en haut à gauche
    { x:  32, y: -40 }, // ligne jusqu'en haut à droite
    { x: -32, y:  40 }, // ligne jusqu'en bas à gauche
    { x:  32, y:  40 }, // ligne jusqu'en bas à droite
  ],
  closed: false,
  stroke: 20,
  color: '#636',
});

Les points d'un tracé peuvent utiliser des coordonnées z pour former des formes en 3D.

// forme 3D
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -32, y: -40, z:  40 },
    { x:  32, y: -40 },
    { x:  32, y:  40, z:  40 },
    { x:  32, y:  40, z: -40 },
  ],
  closed: false,
  stroke: 20,
  color: '#636',
});

move

{ move: {/*x,y,z*/} },

new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -40, y: -32 },          // départ en haut à gauche
    { x:  40, y: -32 },          // ligne jusqu'en haut à droite
    { move: { x: -40, y: 32 } }, // déplacement vers le bas à gauche
    { x:  40, y:  32 },          // ligne jusqu'en bas à droite
  ],
  closed: false,
  stroke: 20,
  color: '#636',
});

arc

{ arc: [
  {/*x,y,z*/}, // point d'angle
  {/*x,y,z*/}, // point d'arrivée
]},

Affiche une courbe elliptique. L'ellipse de la courbe s'inscrit dans le rectangle formé par le point précédent, le point d'angle et le point d'arrivée.

new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -60, y: -60 },   // départ
    { arc: [
      { x:  20, y: -60 }, // angle
      { x:  20, y:  20 }, // point d'arrivée
    ]},
    { arc: [ // le prochain arc part du dernier point d'arrivée
      { x:  20, y:  60 }, // angle
      { x:  60, y:  60 }, // point d'arrivée
    ]},
  ],
  closed: false,
  stroke: 20,
  color: '#636'
});

bezier

{ bezier: [
  {/*x,y,z*/}, // point de contrôle de départ
  {/*x,y,z*/}, // point de contrôle d'arrivée
  {/*x,y,z*/}, // point d'arrivée
]},

Affiche une courbe de Bézier.

new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -60, y: -60 },   // départ
    { bezier: [
      { x:  20, y: -60 }, // point de contrôle de départ
      { x:  20, y:  60 }, // point de contrôle d'arrivée
      { x:  60, y:  60 }, // point d'arrivée
    ]},
  ],
  closed: false,
  stroke: 20,
  color: '#636'
});

closed

Ferme le tracé en reliant le dernier point au premier. Activé par défaut : closed: true.

new Zdog.Shape({
  addTo: illo,
  path: [ // triangle
    { x:   0, y: -40 },
    { x:  40, y:  40 },
    { x: -40, y:  40 },
  ],
  // fermé par défaut
  stroke: 20,
  color: '#636'
});

new Zdog.Shape({
  addTo: illo,
  path: [
    { x:   0, y: -40 },
    { x:  40, y:  40 },
    { x: -40, y:  40 },
  ],
  closed: false, // non fermé
  stroke: 20,
  color: '#636'
});

Hemisphere

Une demi-sphère. Définissez sa taille avec diameter. La couleur de l'ellipse de la base se règle avec backface. Valeurs par défaut : diameter: 1, fill: true. L'origine de la demi-sphère est le centre de sa base. Le dôme est orienté vers l'avant, c'est-à-dire vers l'axe z positif.

let dome = new Zdog.Hemisphere({
  addTo: illo,
  diameter: 120,
  // fill est activé par défaut
  // désactivez stroke pour obtenir un bord net
  stroke: false,
  color: '#C25',
  backface: '#EA0',
});

Cone

Un cône à base circulaire. Définissez sa taille avec diameter et length. Valeurs par défaut : diameter: 1, length: 1, fill: true. La couleur de l'ellipse de la base se règle avec backface. L'origine du cône est le centre de sa base. Le cône est orienté vers l'avant, c'est-à-dire vers l'axe z positif.

let partyHat = new Zdog.Cone({
  addTo: illo,
  diameter: 70,
  length: 90,
  stroke: false,
  color: '#636',
  backface: '#C25',
});

Cylinder

Un cylindre à bases circulaires. Définissez sa taille avec diameter et length. Valeurs par défaut : diameter: 1, length: 1, fill: true. La couleur de l'ellipse de la base se règle avec backface. L'origine du cylindre est le milieu de sa longueur. Le cylindre est orienté d'avant en arrière le long de l'axe z.

let can = new Zdog.Cylinder({
  addTo: illo,
  diameter: 80,
  length: 120,
  stroke: false,
  color: '#C25',
  backface: '#E62',
});

Pour obtenir des couleurs différentes sur les bases, définissez frontFace et backface.

let can = new Zdog.Cylinder({
  addTo: illo,
  diameter: 80,
  length: 120,
  stroke: false,
  color: '#C25',
  frontFace: '#EA0',
  backface: '#636',
});

Box

Un prisme rectangulaire. Définissez sa taille avec width, height et depth. Les couleurs des faces se règlent avec les options de faces : frontFace, rearFace, leftFace, rightFace, topFace et bottomFace. Valeurs par défaut : width: 1, height: 1, depth: 1, fill: true.

let box = new Zdog.Box({
  addTo: illo,
  width: 120,
  height: 100,
  depth: 80,
  stroke: false,
  color: '#C25', // couleur de face par défaut
  leftFace: '#EA0',
  rightFace: '#E62',
  topFace: '#ED0',
  bottomFace: '#636',
});

Supprimez des faces en désactivant leurs options.

let box = new Zdog.Box({
  addTo: illo,
  width: 120,
  height: 100,
  depth: 80,
  stroke: false,
  color: '#C25',
  // suppression des faces gauche et droite
  leftFace: false,
  rightFace: false,
  rearFace: '#EA0',
  topFace: '#ED0',
  bottomFace: '#636',
});

Traduction française de la documentation de Zdog (licence MIT) – https://zzz.dog