Share
Dans mon précédent tutoriel, j'avais décrit le processus d'installation et la hiérarchie des projets dans Paper.js. Cette fois, je vais vous enseigner les chemins, les segments et leur manipulation. Cela vous permettra de créer des formes complexes à l'aide de la bibliothèque. Après cela, je voudrais aborder quelques principes géométriques de base sur lesquels Paper.js est basé.
Les chemins dans Paper.js sont représentés par une séquence de segments reliés par des courbes. Un segment est fondamentalement un point et ses deux poignées, qui définissent l'emplacement et la direction des courbes. Ne pas définir les poignées de segment donne des lignes droites au lieu de courbes.
Une fois que vous avez défini un nouveau chemin en utilisant le nouveau chemin() constructeur, vous pouvez y ajouter des segments à l’aide du bouton path.add (segment) une fonction. Comme cette fonction prend en charge plusieurs arguments, vous pouvez également ajouter plusieurs segments à la fois. Supposons que vous souhaitiez insérer un nouveau segment à un index spécifique dans un chemin existant. Vous pouvez le faire en utilisant le path.insert (index, segment) une fonction. De même, pour supprimer un segment à un index spécifique, vous pouvez utiliser le path.removeSegment (index) une fonction. Ces deux fonctions utilisent l'indexation à base zéro. Cela implique que l’utilisation de path.removeSegment (3) va supprimer le quatrième segment. Vous pouvez fermer tous les chemins que vous tracez avec le chemin.closé propriété. Il va rejoindre les premier et dernier segments du chemin ensemble.
Jusqu'à présent, tous nos chemins avaient des lignes droites. Pour créer des tracés courbes sans spécifier de poignées pour chaque segment, vous pouvez utiliser le path.smooth () une fonction. Cette fonction calcule les valeurs optimales pour les poignées de tous les segments d’un chemin, de manière à ce que la courbe qui les traverse soit lisse. Les segments eux-mêmes ne changent pas d'emplacement. Si vous avez spécifié des valeurs de descripteur pour l'un des segments, ces valeurs seront ignorées. Le code ci-dessous utilise toutes les fonctions et propriétés dont nous avons parlé pour créer quatre chemins, dont deux sont courbes..
var aPath = new Path (); aPath.add (nouveau point (30, 60)); aPath.add (nouveau point (100, 200)); aPath.add (nouveau point (300, 280), nouveau point (280, 40)); aPath.insert (3, nouveau point (180, 110)); aPath.fullySelected = 'true'; aPath.closed = true; var bPath = aPath.clone (); bPath.smooth (); bPath.position.x + = 400; var cPath = aPath.clone (); cPath.position.y + = 350; cPath.removeSegment (3); var dPath = bPath.clone (); dPath.strokeColor = 'green'; dPath.position.y + = 350; dPath.removeSegment (3);
Tout d'abord, nous créons un nouveau chemin, puis nous y ajoutons des segments. En utilisant path.insert (3, nouveau point (180, 110)) insère un nouveau segment à la place du quatrième et déplace le quatrième segment à la cinquième position. J'ai mis entièrement sélectionné à vrai pour vous montrer tous les points et poignées pour chaque courbe. Pour le second chemin, j'ai utilisé le path.smooth () fonction pour rendre la courbe lisse. Suppression du quatrième segment à l'aide de cPath.removeSegment (3) nous donne notre forme originale sans aucune insertion basée sur un index. Vous pouvez le vérifier en commentant aPath.insert (3, nouveau point (180, 110)); dans cette démo CodePen. C’est le résultat final de toutes nos manipulations jusqu’à maintenant:
Paper.js supporte certaines formes de base prêtes à l'emploi. Par exemple, pour créer un cercle, vous pouvez simplement utiliser le nouveau Path.Circle (centre, rayon) constructeur. De même, vous pouvez utiliser le nouveau Path.Rectangle (rect) constructeur pour créer un rectangle. Vous pouvez spécifier les coins supérieur gauche et inférieur droit ou le coin supérieur gauche et la taille du rectangle. Pour dessiner un rectangle aux coins arrondis, vous pouvez utiliser le nouveau Path.RoundedRectangle (rect, size) constructeur où le paramètre de taille détermine la taille des coins arrondis.
Si vous voulez créer un polygone régulier à n côtés, vous pouvez le faire en utilisant le nouveau Path.RegularPolygon (center, numSides, radius) constructeur. Le paramètre centre détermine le centre de notre polygone et le rayon détermine le rayon de notre polygone.
Le code ci-dessous générera toutes les formes dont nous venons de parler.
var aCircle = new Path.Circle (nouveau Point (75, 75), 60); aCircle.strokeColor = 'black'; var aRectangle = new Path.Rectangle (nouveau Point (200, 15), nouveau Point (400, 135)); aRectangle.strokeColor = 'orange'; var bRectangle = new Path.Rectangle (nouveau Point (80, 215), nouveau Size (400, 135)); bRectangle.strokeColor = 'blue'; var myRectangle = new Rectangle (nouveau Point (450, 30), nouveau Point (720, 170)); var cornerSize = new Size (10, 60); var cRectangle = new Path.RoundRectangle (myRectangle, cornerSize); cRectangle.fillColor = 'lightgreen'; var aTriangle = new Path.RegularPolygon (new Point (120, 500), 3, 110); aTriangle.fillColor = '#FFDDBB'; aTriangle.selected = true; var aDodecagon = new Path.RegularPolygon (new Point (460, 490), 12, 100); aDodecagon.fillColor = '#CCAAFC'; aDodecagon.selected = true;
Le premier rectangle que nous créons est basé sur des points de coordonnées. Le prochain utilise le premier point pour déterminer le coin supérieur gauche de notre rectangle, puis utilise la valeur de la taille pour tracer le reste des points. Dans le troisième rectangle, nous avons également spécifié un rayon pour notre rectangle. Le premier paramètre de rayon détermine la courbure horizontale et le deuxième paramètre détermine la courbure verticale.
Les deux dernières formes utilisent simplement le Polygone régulier constructeur pour créer un triangle et un dodécagone. La démo intégrée ci-dessous montre le résultat de notre code.
Il y a deux façons de créer un cercle. La première consiste à créer un grand nombre de segments sans aucune poignée et à les rapprocher. De cette façon, même s’ils seront reliés par une ligne droite, la forme générale sera toujours plus proche d’un cercle. La deuxième méthode consiste à utiliser seulement quatre segments avec des valeurs appropriées pour leurs poignées. Cela peut économiser beaucoup de mémoire et toujours nous donner les résultats souhaités.
La plupart du temps, nous pouvons supprimer un certain nombre de segments d'un chemin sans modification significative de sa forme. La bibliothèque fournit un simple path.simplify ([tolérance]) fonction pour atteindre ce résultat. Le paramètre de tolérance est facultatif. Il est utilisé pour spécifier la distance maximale à laquelle l'algorithme simplificateur de trajet peut s'écarter de son trajet d'origine. Il est réglé sur 2.5 par défaut. Si vous définissez le paramètre sur une valeur plus élevée, la courbe finale sera un peu plus lisse, avec moins de points de segment, mais la déviation pourrait être significative. De même, une valeur inférieure entraînera un très faible écart, mais comprendra beaucoup plus de segments.
Vous pouvez également convertir les courbes d’un chemin en lignes droites à l’aide des touches path.flatten (maxDistance) une fonction. Lors de l’aplatissement d’un chemin, la bibliothèque essaie de maintenir la distance entre les segments aussi près que possible. maxDistance comme possible.
var aPolygon = new Path.RegularPolygon (nouveau Point (140, 140), 800, 120); aPolygon.fillColor = '#CCAAFC'; aPolygon.selected = true; var bPolygon = aPolygon.clone (); bPolygon.fillColor = '#CCFCAA'; bPolygon.simplify (); var cPolygon = aPolygon.clone (); cPolygon.fillColor = '#FCAACC'; cPolygon.simplify (4); var dPolygon = bPolygon.clone (); dPolygon.fillColor = '#FCCCAA'; dPolygon.flatten (80);
Dans le code ci-dessus, j'ai d'abord créé un polygone en utilisant le Polygone régulier fonction discutée ci-dessus. J'ai volontairement mis le choisi propriété à vrai de sorte que tous les segments de ces chemins soient visibles. Ensuite, j'ai cloné le deuxième polygone du premier et utilisé le simplifier fonctionner sur elle. Cela a réduit le nombre de segments à seulement cinq.
Dans le troisième polygone, j'ai défini le paramètre de tolérance sur une valeur plus élevée. Cela réduit encore le nombre de segments. Vous pouvez voir que tous les chemins ont toujours la même forme de base. Dans le chemin final, j'ai utilisé le aplatir (maxDistance) fonction pour aplatir notre courbe. L’algorithme essaie de garder la forme aussi proche que possible de la forme originale tout en respectant les maxDistance contrainte. Voici le résultat final:
Paper.js a quelques types de données de base comme Point, Taille, et Rectangle décrire les attributs géométriques des éléments graphiques. Ce sont des représentations abstraites de valeurs géométriques telles que l'emplacement ou la dimension. Un point décrit simplement un emplacement en deux dimensions et sa taille décrit des dimensions abstraites dans un espace en deux dimensions. Le rectangle désigne ici une zone délimitée par le point en haut à gauche, sa largeur et sa hauteur. C'est différent du chemin rectangulaire dont nous avons discuté plus tôt. Contrairement au chemin, ce n'est pas un élément. Vous pouvez en savoir plus à leur sujet dans ce tutoriel sur Paper.js.
Vous pouvez effectuer des opérations mathématiques de base - addition, soustraction, multiplication et division-sur des points et des tailles. Toutes les opérations ci-dessous sont valables:
var pointA = nouveau point (20, 10); var point B = pointA * 3; // x: 60, y: 30 var pointC = pointB - pointA; // x: 40, y: 20 var pointD = pointC + 30; // x: 70, y: 50 var pointE = pointD / 5; // x: 14, y: 10 var pointF = pointE * new Point (3, 2); // x: 42, y: 20 // Vous pouvez vérifier la sortie de la console pour la vérification console.log (pointF);
Outre ces opérations de base, vous pouvez également effectuer des opérations d'arrondissement ou générer des valeurs aléatoires pour les points et les tailles. Considérez les exemples suivants:
var point = nouveau point (3.2, 4.7); var arrondi = point.round (); // x: 3, y: 5 var ceiled = point.ceil (); // x: 4, y: 5 var floored = point.floor (); // x: 3, y: 4 // Génère un point aléatoire avec x compris entre 0 et 50 // et y entre 0 et 40 var pointR = nouveau Point (50, 40) * Point.random (); // Génère une taille aléatoire de largeur comprise entre 0 et 50 // et de hauteur comprise entre 0 et 40 var sizeR = new Size (50, 40) * Size.random ();
le au hasard() Cette fonction génère des valeurs aléatoires entre 0 et 1. Vous pouvez les multiplier par un Point ou Taille objet de valeur appropriée pour obtenir les résultats souhaités.
Ceci conclut les notions de base en mathématiques que vous devez connaître pour créer quelque chose d’utile avec Paper.js..
Après avoir suivi ce didacticiel, vous devriez être capable de créer une variété de chemins et de formes, d’aplatir les courbes ou de simplifier des chemins complexes. Vous avez maintenant également une compréhension de base des différentes opérations mathématiques que vous pouvez effectuer avec Paper.js. En combinant tout ce que vous avez appris dans ce didacticiel et dans le précédent tutoriel de la série, vous devriez pouvoir créer des polygones complexes sur différentes couches et les mélanger. Vous devriez également pouvoir insérer et supprimer des segments d’un chemin pour obtenir la forme souhaitée..
Si vous recherchez des ressources JavaScript supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons sur le marché Envato..
Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
Accentsconagua