Débuter avec Paper.js Projets et éléments

Vous avez peut-être entendu parler de Paper.js. Commençons donc par la question: qu'est-ce que Paper.js? C'est une bibliothèque qui vous permet de créer et de travailler avec des graphiques vectoriels. Le site officiel le décrit comme le couteau suisse de graphisme vectoriel. 

Malgré le fait que la bibliothèque a beaucoup à offrir, il est facile à apprendre même si vous n'en avez jamais entendu parler auparavant. Dans ce tutoriel, je vais commencer par les bases de la bibliothèque, puis par la suite, pour des sujets complexes..

Utiliser PaperScript

Il y a deux façons d'utiliser la bibliothèque. Vous pouvez utiliser PaperScript, qui est une extension de JavaScript, et vous aider à faire les choses un peu plus rapidement, ou vous pouvez simplement utiliser du vieux JavaScript.

PaperScript est le même vieux code JavaScript que vous avez toujours utilisé. Cependant, il ajoute un support pour les opérateurs mathématiques pour point et Taille objets. Cela simplifie également l’installation de gestionnaires d’événements pour Projet, Vue, et la souris Outil objets. 

Lors du chargement de PaperScript, vous devez utiliser la balise de script habituelle avec le type défini sur "text / paperscript". Si vous chargez le code en externe, vous devez également ajouter un 

Utiliser JavaScript

Si vous n'êtes pas à l'aise avec PaperScript, vous pouvez également utiliser JavaScript dans vos projets. Vous devrez ajouter quelques lignes de code supplémentaires si vous décidez de le faire de cette façon. La première chose à faire est de vérifier si le DOM est prêt car vous ne pourrez pas travailler avec le canevas auparavant. Après cela, vous pouvez configurer un projet et une vue à l'aide de la papier objet. Toutes les classes et tous les objets Paper.js ne seront désormais accessibles que par le biais de la papier objet. 

Comme je l'ai indiqué précédemment, vous devrez utiliser des fonctions mathématiques au lieu d'opérateurs lorsque vous utilisez Point et Size. Le code ci-dessous illustre toutes ces différences:

window.onload = function () var canvas = document.getElementById ('quad'); paper.setup (canvas); var path = new paper.Path (); path.strokeColor = 'black'; var pointOne = new paper.Point (100, 20); var pointTwo = nouveau papier.Point (-100, 100); var pointTrois = nouveau papier.Point (300, 30); path.moveTo (pointOne); path.lineTo (pointOne.add (pointTwo)); path.lineTo (pointTwo.add (pointThree)); path.lineTo (pointOne.add (pointTrois)); path.closed = true; paper.view.draw (); 

Comme le montrent les extraits de code ci-dessus, il est relativement facile d'utiliser PaperScript lorsque vous utilisez Paper.js. Par conséquent, tous les exemples à partir de maintenant seront basés sur PaperScript.

Hiérarchie de projet

Si vous avez déjà utilisé une application de création graphique telle qu'Adobe Photoshop ou Illustrator, vous devez bien connaître le concept de calques. Chaque couche de ces programmes a son propre contenu qui, lorsqu'il est combiné avec d'autres couches, crée le résultat final. Des couches similaires existent également dans Paper.js et sont accessibles à l’aide de project.layers. 

Au départ, chaque projet a une seule couche accessible via project.activeLayer. Tous les nouveaux éléments que vous créez sont ajoutés au calque actif en tant que son enfant. Tous les enfants d’une couche spécifique sont accessibles à l’aide de la layer.children propriété du calque actif.

Il y a plusieurs façons d'accéder à tous ces enfants. Si vous n’avez besoin que d’accéder au premier et au dernier enfant d’un article, vous pouvez utiliser item.firstChild et item.lastChild respectivement. Vous pouvez également attribuer un nom spécifique à un enfant, puis utiliser ce nom pour y accéder ultérieurement. Supposons qu'une couche sur laquelle vous travaillez compte environ 30 enfants. Il n’est pas pratique de les examiner tous un par un. Pour cette raison, la bibliothèque a un layer.children.length propriété que vous pouvez utiliser pour obtenir le nombre total d'enfants, puis parcourir la liste à l'aide d'un pour boucle. 

Cet extrait de code accède à divers enfants à l'aide de toutes les propriétés que nous venons de décrire:

var circleA = nouveau Path.Circle (nouveau Point (45, 150), 45); var circleB = new Path.Circle (nouveau Point (110, 150), 20); var circleC = nouveau Path.Circle (nouveau Point (165, 150), 35); var circleD = new Path.Circle (new Point (255, 150), 55); var circleE = new Path.Circle (nouveau Point (375, 150), 65); var circleF = new Path.Circle (nouveau Point (475, 150), 35); circleC.name = 'GreenCircle'; project.activeLayer.firstChild.fillColor = 'orange'; project.activeLayer.lastChild.fillColor = 'pink'; project.activeLayer.children [1] .fillColor = 'purple'; project.activeLayer.children ['GreenCircle']. fillColor = 'lightgreen'; pour (var i = 3; i < 5; i++)  project.activeLayer.children[i].fillColor = 'tomato'; 

La démo intégrée ci-dessous montre le script en action. Vous pouvez vérifier que la couleur de tous les cercles correspond à la couleur que nous leur avons assignée dans le code ci-dessus..

Vous pouvez également utiliser le item.parent méthode pour accéder au parent d'un élément, comme le item.chenfants méthode, que vous avez utilisé pour accéder à tous ses enfants. Chaque fois que vous créez un nouvel élément, son parent sera toujours le calque actif du projet. Cependant, il peut être modifié en ajoutant l'élément en tant qu'enfant d'un autre couche ou groupe. 

Avant d’aller plus loin, laissez-moi vous expliquer ce qu’est un groupe est en fait. Pour être honnête, les deux couche et groupe Sont très similaires. Une différence majeure entre ces deux éléments est que tous les nouveaux éléments que vous créez sont automatiquement ajoutés au calque actif, mais dans le cas d'un groupe, vous devrez les ajouter vous-même.. 

Vous pouvez ajouter des éléments à un groupe de plusieurs manières. Vous pouvez passer un élément de tableau au constructeur du groupe et ils seront tous ajoutés au groupe item.chenfants tableau. Pour ajouter des éléments à un groupe une fois celui-ci créé, vous pouvez utiliser le item.addChild (item) une fonction. Vous pouvez également insérer un enfant à un index spécifique à l'aide de la commande item.insertChild (index, item) une fonction. 

Supprimer des éléments est aussi simple que de les ajouter. Pour supprimer un élément d’un projet, vous pouvez utiliser le item.remove () une fonction. Gardez à l'esprit que cela ne détruira pas l'élément et qu'il peut être rajouté au projet à tout moment. Si l'élément que vous avez supprimé avait des enfants, tous les enfants seront également supprimés. Que faire si vous souhaitez supprimer tous les enfants tout en conservant l’élément intact? Ceci peut être réalisé en utilisant le item.removeChildren () une fonction.

Comprendre les objets

Le terme article est apparu plus que quelques fois dans le tutoriel maintenant. Alors c'est quoi? Tout ce qui apparaît dans un projet Paper.js est un article. Ceci comprend couches, les chemins, groupes, etc. Alors que différents éléments ont des propriétés qui leur sont spécifiques, d'autres propriétés sont applicables à tous..

Si vous avez l'intention de masquer un élément à l'utilisateur, vous pouvez le faire en définissant la valeur item.visible à faux. Vous pouvez également cloner n'importe quel élément à l'aide du bouton item.clone () une fonction. Cette fonction renvoie l'élément cloné, que vous pouvez stocker dans une variable et manipuler ultérieurement. Vous pouvez également modifier l'opacité de tout élément à l'aide de la touche élément.opacité propriété. Toute valeur comprise entre 0 et 1 rendra l'élément translucide.

Vous pouvez également définir un mode de fusion pour tout élément à l’aide des touches item.blendMode propriété. Le mode de fusion doit être passé en tant que chaîne. La bibliothèque fournit également un item.selected propriété qui, si définie à vrai, crée un contour visuel au-dessus de cet élément. Cela peut être très utile lors du débogage car il vous permet de voir la construction des chemins, des points de segment individuels et des boîtes de délimitation d'éléments.

Transformations d'article

Les éléments peuvent être mis à l’échelle, pivotés ou déplacés dans un projet Paper.js avec facilité. Dans cette section, je couvrirai brièvement toutes ces transformations.. 

Pour changer la position d'un article, vous pouvez utiliser ses item.position propriété et définissez la position sur un nouveau point. Si vous souhaitez déplacer un élément, vous pouvez le faire à l'aide de l'outil += opérateur.

Vous pouvez également redimensionner n’importe quel élément à l’aide de la touche item.scale (scale) une fonction. Cela redimensionnera l'élément autour de son point central. Vous pouvez redimensionner un élément autour d’un autre point en le spécifiant comme second paramètre, comme item.scale (scale, point). En outre, la bibliothèque vous permet également de redimensionner les éléments différemment dans les directions verticale et horizontale en donnant deux paramètres comme paramètres, comme item.scale (scaleX, scaleY).

Faire pivoter des éléments revient à les redimensionner. Vous pouvez utiliser le item.rotate (angle) fonction de rotation des éléments autour de leur centre. L'angle est spécifié en degrés et la rotation s'effectue dans le sens des aiguilles d'une montre. Pour faire pivoter un élément autour d’un point spécifique, vous pouvez également passer un point en tant que second paramètre, tel que item.rotate (angle, point). 

L'extrait de code suivant applique toutes les transformations et manipulations que nous venons de décrire sur trois rectangles différents..

var rectA = nouveau Path.Rectangle (nouveau Point (250, 70), nouveau Size (120, 120)); rectA.fillColor = 'pink'; var rectB = rectA.clone (); rectB.fillColor = 'purple'; rectB.position + = nouveau point (80, 80); rectB.opacité = 0,6; rectB.blendMode = 'color-burn'; rectB.scale (1,5); rectB.rotate (45); var rectC = rectB.clone (); rectC.fillColor = 'lightgreen'; rectC.position + = new Point (-180, 0); rectC.blendMode = 'color-dodge'; rectC.scale (1,5);

Le code est assez explicite. Je clone le rectangle B du rectangle A, et le rectangle B acquiert toutes les propriétés du rectangle A. Il en va de même pour le rectangle B et C. 

Notez que j'ai utilisé le += opérateur dont j'ai parlé ci-dessus pour déplacer les éléments. Cet opérateur déplace les éléments par rapport à leurs anciennes positions au lieu d'utiliser des valeurs absolues.

La démo ci-dessous vous montre le résultat final après toutes ces transformations. Vous pouvez essayer différents modes de fusion ou modifier d'autres propriétés dans la démo pour voir comment elles affectent le résultat final..

Dernières pensées

Comme je l'ai mentionné précédemment, Paper.js est facile à apprendre et vous permet de créer facilement des graphiques vectoriels. Ce tutoriel couvrait les notions de base que vous devez savoir pour travailler avec la bibliothèque. Bientôt, nous publierons le prochain tutoriel de la série, qui traitera en détail des chemins et de la géométrie.. 

En attendant, il est important de noter que JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..


Jusque-là, je vous suggère de créer quelques démos de base et de mettre en pratique ce que vous avez appris jusqu'à présent. Si vous avez des questions concernant ce tutoriel, faites-le moi savoir dans les commentaires..