Share
Le canevas HTML5 est pris en charge par tous les navigateurs populaires depuis longtemps. Vous pouvez l'utiliser pour dessiner des graphiques dans un navigateur à l'aide de JavaScript. Les graphiques pouvant être créés sur un canevas vont de simples lignes et formes à des compositions de photos et animations..
Dans cette série, vous découvrirez une très utile bibliothèque de toiles appelée Konva. Vous pouvez utiliser Konva pour dessiner différentes formes sur la toile ou sur la scène. Entre autres choses, la bibliothèque vous permet de redimensionner, de faire pivoter et d’animer toutes ces formes et d’y attacher des écouteurs d’événements..
Ce tutoriel se concentrera sur les concepts fondamentaux de la bibliothèque tout en donnant un bref aperçu des différentes fonctionnalités de la bibliothèque. Nous passerons ensuite à des sujets plus spécifiques et complexes. La bibliothèque a vu le jour pour la première fois en tant que fourche de la populaire bibliothèque KineticJS.
Tout ce que vous dessinez avec Konva vous obligera à créer une scène en utilisant Konva.Stage. Vous pouvez spécifier l'élément conteneur d'une étape à l'aide de la commande récipient attribut. Chaque étape nécessite également une valeur de largeur et de hauteur qui peut être spécifiée à l'aide du largeur et la taille attributs respectivement.
Une seule étape peut contenir plusieurs couches. Chacune de ces couches aura deux moteurs de rendu. Le rendu de scène est utilisé pour dessiner toutes les formes que vous pouvez voir sur la scène. Le rendu graphique de hit est caché aux utilisateurs. Il est utilisé pour effectuer une détection d'événements haute performance..
Un seul calque peut contenir plusieurs formes, des groupes de formes différentes ou un groupe de groupes. La scène, les calques, les groupes et les formes agissent comme des nœuds virtuels pouvant être individuellement stylés et transformés.
Avant de créer des formes, nous devons inclure la bibliothèque dans votre projet. Il y a plusieurs façons de le faire. Si vous utilisez des gestionnaires de paquets, vous pouvez exécuter les commandes suivantes.
npm installer konva // OU bower installer konva
Vous pouvez également créer un lien direct vers une version simplifiée de la bibliothèque hébergée sur cdnjs et jsDelivr.
Une fois la bibliothèque installée, vous pouvez utiliser le code suivant pour créer des formes rectangulaires sur le canevas..
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var rectA = new Konva.Rect (x: 75, y: 150, largeur: 200, hauteur: 50, rotation: 45, remplissage: "bleu", contour: "noir", contour: largeur: 4); var rectB = new Konva.Rect (x: 350, y: 50, width: 100, height: 250, cornerRadius: 50, remplissage: "rouge", contour: "marron", strokeWidth: 10); layerA.add (rectA); layerA.add (rectB); stage.add (layerA);
Dessiner n'importe quoi sur la toile est un processus en cinq étapes. Tout d'abord, vous devez instancier une étape où différentes formes seraient dessinées à l'aide de Konva.Stage. Pour cela, vous devez spécifier la largeur et la hauteur de la scène, ainsi que la identifiant pour l'élément conteneur qui contiendrait la scène. Dans notre cas, les rectangles sont dessinés à l'intérieur d'un div dont identifiant est Exemple.
Dans l'étape suivante, vous devez instancier toutes les couches que vous souhaitez rendre sur votre scène. Nous ne créons qu'un seul calque dans cet exemple, mais vous pouvez créer plusieurs calques et les ajouter tous à une seule étape. Différentes couches peuvent être très utiles lorsque votre arrière-plan est constitué d'éléments statiques et mobiles. Dans ce cas, vous pouvez ajouter les éléments statiques sur un calque et les éléments en mouvement sur l'autre. Étant donné que vous n’aurez pas à mettre à jour l’arrière-plan statique après chaque redessinage, cela peut considérablement améliorer les performances..
Après avoir créé les calques, vous pouvez initialiser différentes formes telles que des rectangles, des ellipses, des étoiles et des anneaux que vous souhaitez afficher sur les calques. Enfin, vous devez ajouter les formes aux calques et les calques à la scène.
Regrouper différentes formes est une bonne idée lorsque vous souhaitez gérer toutes les formes en une seule unité. Par exemple, supposons que vous ayez créé une voiture en utilisant deux cercles pour les roues et deux blocs rectangulaires pour la carrosserie. Si vous voulez faire avancer cette voiture sans créer de groupe, vous devrez traduire individuellement toutes les formes, une à la fois. Une méthode plus efficace consiste simplement à ajouter les cercles et les rectangles à un groupe et à les traduire tous en même temps..
Pour ajouter une forme à un groupe, vous devez utiliser le ajouter() comme vous l’avez fait lors de l’ajout de formes à un calque. Vous pouvez également ajouter un groupe à un autre groupe pour créer des entités plus complexes. Par exemple, vous pouvez créer une personne à l’intérieur de la voiture en tant que groupe et l’ajouter au groupe qui représente la voiture..
Dans l'exemple suivant, j'ai gardé les choses simples et créé seulement un carA groupe. Après cela, je peux faire pivoter et redimensionner toute la voiture à la fois.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var wheelA = nouveau Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, remplissage: "gris", trait: "noir", nom: "Première roue"); var wheelB = nouveau Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, remplissage: "gris", trait: "noir", nom: "deuxième roue"); var frameA = new Konva.Rect (x: 80, y: 150, largeur: 240, hauteur: 60, cornerRadius: 10, remplissage: "rouge", contour: "noir", nom: "cadre inférieur"); var frameB = nouveau Konva.Rect (x: 135, y: 90, largeur: 120, hauteur: 60, cornerRadius: 10, remplissage: "orange", contour: "noir", nom: "Cadre supérieur"); var carA = nouveau Konva.Group (x: 50, y: 0, rotation: 20, scaleX: 1.2); carA.add (roue A, roue B, cadre A, cadre B); layerA.add (carA); stage.add (layerA);
Vous connaissez déjà les couches à Konva. La superposition est quelque chose de différent. Par défaut, toutes les formes que vous ajoutez à un calque sont dessinées dans l'ordre dans lequel elles ont été ajoutées. Cela signifie que les formes ajoutées à un calque après les autres seront dessinées au-dessus d'autres formes..
Konva vous permet de contrôler l’ordre dans lequel les formes sont dessinées en utilisant différentes méthodes de superposition telles que moveToTop (), moveToBottom (), déplacer vers le haut(), moveDown (), et zIndex ().
le moveToTop () méthode va dessiner la forme donnée sur toutes les autres formes qui ont été ajoutées au même calque. Formes dessinées sur un calque ajouté à la scène Konva après la couche de notre forme spécifique restera toujours au-dessus de notre forme. C’est pourquoi le cercle indigo de l’exemple suivant reste en dessous du cercle vert clair même après avoir appelé moveToTop ().
le moveToBottom () méthode va dessiner la forme donnée en dessous de toutes les autres formes qui ont été ajoutées au même calque. Juste comme moveToTop (), les formes se déplaceront au bas de leurs propres calques et non aux calques situés en dessous.
le déplacer vers le haut() et moveDown () Les méthodes déplacent la forme sur laquelle elles sont appelées, une position au-dessus ou au-dessous de leur position actuelle dans le même calque. le zIndex () Cette méthode permet de définir l’index d’une forme à l’intérieur de son calque parent. Contrairement à CSS, vous ne pouvez pas définir un paramètre arbitraire. zIndex valeur en Konva. Pour un calque de 10 formes, le zIndex la valeur ne peut être qu'entre 0 et 9 (inclus).
Dans l'exemple ci-dessus, vous pouvez constater que le simple fait d'appuyer sur le bouton "Indigo en haut" ne dessine pas le cercle indigo au-dessus de tous les autres, tandis que l'appui sur "Indigo au-dessus de tous les autres" le positionnera en haut. En effet, le dernier bouton déplace également le calque contenant le cercle indigo vers le haut..
Comme les cercles peuvent être déplacés, il peut être judicieux de les faire glisser les uns sur les autres et de voir comment la position du cercle indigo change lorsque vous appuyez sur différents boutons..
Nous avons couvert quelques concepts fondamentaux liés à Konva dans ce tutoriel. Vous devriez maintenant pouvoir dessiner des formes communes sur la toile et les déplacer en groupe. Le tutoriel vous a également montré comment pousser une forme particulière vers le haut ou vers le bas en cas de chevauchement.
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..
Si vous avez des questions concernant ce didacticiel, n'hésitez pas à me le faire savoir dans les commentaires. Le prochain tutoriel vous apprendra à dessiner des formes de base dans Konva.
Accentsconagua