Chemins SVG

Si vous cherchez à agrémenter un Lightscript, l’ajout d’un arrière-plan peut être un moyen accrocheur de le faire. Il existe plusieurs façons d’accomplir cela, mais de loin la plus simple et la plus efficace est d’utiliser des chemins SVG.

Les chemins SVG peuvent être créés relativement facilement en utilisant Adobe Illustrator. Il est préférable de commencer avec une image PNG ordinaire que vous souhaitez simplifier en chemin SVG. Une fois que vous avez trouvé une image d’arrière-plan, créez un nouveau projet Illustrator en cliquant sur Nouveau et en choisissant le préréglage Web Large.

Ensuite, importez votre image de référence dans le nouveau plan de travail en cliquant sur Fichier -> Importer dans la barre d’outils, puis en choisissant votre image dans la fenêtre contextuelle qui apparaît.

Souvent, le plan de travail sera beaucoup plus grand que l’image que vous avez importée. Pour corriger cela, cliquez sur Objet -> Plans de travail -> Adapter aux contours de l’illustration.

Ensuite, choisissez une partie de l’image que vous souhaitez isoler dans un chemin. Les images SVG sont constituées de polygones définis par leur chemin de contour. Ces polygones peuvent ensuite être remplis avec une couleur ou un dégradé en utilisant l’API Canvas JS.

Dans cet exemple, je vais tracer le contour de l’étang et le remplir avec une couleur unie. Pour commencer, sélectionnez l’outil stylo en appuyant sur P sur votre clavier. Cliquez sur un point le long du contour de la forme que vous souhaitez tracer, puis commencez à ajouter des points jusqu’à ce que vous ayez créé un chemin continu de la même forme et taille que votre forme choisie. La couleur de cette forme n’a pas d’importance, car vous définirez la couleur séparément dans le code JavaScript.

Une fois que vous êtes satisfait de votre chemin, exportez-le en cliquant sur Fichier -> Exporter -> Exporter sous. Assurez-vous de choisir le type de fichier SVG.

Dans la prochaine fenêtre qui s’ouvre, assurez-vous que Image est défini sur Lien, puis cliquez sur l’option Afficher le code.

Dans la fenêtre Notepad qui s’ouvre, localisez la balise <polygon> et copiez l’intégralité de l’attribut points. Il devrait s’agir d’une longue chaîne de nombres. Ensuite, cliquez sur Annuler, car vous avez maintenant toutes les données dont vous avez besoin.

Pour dessiner une image basée sur un chemin sur le canvas d’effet, déclarez deux nouvelles constantes. Tout d’abord, déclarez une constante définie à la chaîne que vous avez copiée précédemment.

Astuce

Par exemple, 351 396.5 440 435.5 501.84 deviendrait M351 396.5 440 435.5 501.84.

Maintenant, créez un nouveau chemin avec new Path2D(path) où path est le nom de votre première constante.

Cette image peut maintenant être dessinée en appelant ctx.fill(path2d) où path2d est le nom du chemin que vous avez déclaré à l’étape précédente.

Pour définir la couleur d’une forme, appelez ctx.fillStyle(color) avant de dessiner l’image. Cette fonction accepte les codes de couleur hexadécimaux, les noms de couleurs CSS, les fonctions de couleurs CSS et les dégradés comme arguments.

Vous pouvez également utiliser l’ensemble des effets de transformation canvas comme scale et translate. Pour vous assurer que les transformations s’appliquent uniquement à l’image actuelle, utilisez ctx.setTransform(1,0,0,1,0,0) après que chaque couche est dessinée.

L’exemple de code suivant montre comment dessiner une simple image de chemin SVG. Cette technique peut être répétée autant de fois que vous le souhaitez pour dessiner des arrière-plans complexes.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Le code ci-dessus devrait produire ce résultat :