Share
Le didacticiel d’introduction de la série vous a appris à dessiner votre première forme avec Konva. Il expliquait également le fonctionnement des couches et des groupes à Konva. Dans le reste de la série, nous nous concentrerons sur des sujets plus spécifiques tels que la création de formes simples et complexes ou l'attachement d'auditeurs d'événements à différentes formes afin de rendre vos graphiques interactifs.
Ce tutoriel vous montrera comment créer des formes de base telles que des rectangles, des cercles et des ellipses dans Konva. Vous découvrirez également différents attributs pouvant être utilisés pour personnaliser l'apparence de toutes ces formes en fonction de vos besoins. Des sections ultérieures du didacticiel expliqueront comment dessiner différents types de lignes et de polygones réguliers à l'aide de Konva..
Vous pouvez créer des rectangles dans Konva en utilisant le Konva.rect () objet. La position du coin supérieur gauche d’un rectangle peut être spécifiée à l’aide des touches X et y Propriétés. De même, vous pouvez spécifier la largeur et la hauteur du rectangle à l’aide des touches largeur et la taille Propriétés. Tous les rectangles que vous dessinez auront des angles vifs par défaut. Cependant, vous pouvez les arrondir en choisissant une valeur appropriée pour le cornerradius propriété.
Il est possible d'afficher ou de masquer un rectangle à l'aide de la visible propriété. Si vous ne souhaitez pas masquer complètement un rectangle tout en le rendant semi-transparent, vous pouvez utiliser le opacité propriété. Vous pouvez définir un nombre compris entre 0 et 1 inclus. La forme ne sera pas visible si l'opacité est définie sur 0.
Vous pouvez également faire pivoter ou redimensionner vos formes de rectangle à l’aide des touches rotation et échelle propriétés respectivement. La rotation est spécifiée en tant que nombre simple mais appliquée en degrés. Vous avez la possibilité de redimensionner n’importe quel rectangle sur l’axe des x ou des y indépendamment à l’aide des touches scaleX et échelleY Propriétés.
Voici un exemple qui dessine différents rectangles sur une toile en utilisant toutes les propriétés que nous venons de décrire.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var rectA = nouveau Konva.Rect (x: 10, y: 10, largeur: 200, hauteur: 50, remplissage: "jaune", contour: "noir"); var rectB = new Konva.Rect (x: 160, y: 30, largeur: 80, hauteur: 250, remplissage: "orange", contour: "noir"); var rectC = nouveau Konva.Rect (x: 200, y: 160, largeur: 180, hauteur: 180, cornerRadius: 10, strokeWidth: 10, opacité: 0,8, remplissage: "rouge", contour: "noir") ; var rectD = nouveau Konva.Rect (x: 400, y: 20, largeur: 180, hauteur: 180, scaleX: 1.8, scaleY: 0.75, rotation: 45, remplissage: "lightgreen", contour: "black") ; layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Vous devriez noter que les rectangles sont ne pas dessinés dans l'ordre dans lequel ils sont créés. Au lieu de cela, ils sont dessinés dans l'ordre dans lequel ils ont été ajoutés au calque. le remplir et accident vasculaire cérébral les propriétés sont utilisées pour définir les couleurs de remplissage et de contour, respectivement.
Vous pouvez créer des cercles dans Konva en utilisant le Konva.circle () objet. Cette fois, le X et y les propriétés déterminent le point central pour tracer le cercle. Vous pouvez toujours spécifier une valeur pour les propriétés width et height. Ces valeurs permettent de calculer le diamètre du cercle à tracer. Cependant, un cercle a la même largeur et la même hauteur. Cela signifie que la valeur spécifiée ultérieurement est prioritaire sur celle spécifiée précédemment en cas de conflit. En d'autres termes, si vous définissez la largeur d'un cercle à 100 et plus tard mettre sa la taille à 180, le cercle aura un diamètre de 180 et la largeur sera ignorée.
Pour éviter toute confusion, vous pouvez omettre le largeur et la taille propriétés et spécifiez une valeur pour la rayon du cercle. N'oubliez pas que vous devez définir le rayon sur 50 pour pouvoir tracer un cercle dont la largeur et la hauteur sont 100.
De la même manière, vous pouvez également créer une ellipse à l'aide du Konva.ellipse () objet. La seule différence est que la propriété radius acceptera désormais un objet avec les propriétés x et y comme valeur. Si elle est spécifiée, les propriétés width et height seront maintenant appliquées indépendamment pour déterminer la forme finale de l'ellipse..
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var circA = new Konva.Circle (x: 100, y: 100, width: 180, remplissage: "jaune", contour: "noir"); var circB = new Konva.Circle (x: 180, y: 150, hauteur: 100, remplissage: "orange", contour: "noir"); var circC = nouveau Konva.Circle (x: 200, y: 275, rayon: 100, opacité: 0,5, remplissage: "rouge", contour: "noir"); var ellipA = new Konva.Ellipse (x: 400, y: 75, width: 70, height: 100, rotation: -15, remplissage: "lightgreen", contour: "noir"); var ellipB = new Konva.Ellipse (x: 400, y: 75, width: 80, height: 120, rotation: -15, strokeWidth: 5, remplissage: "blanc", contour: "noir"); var ellipC = nouveau Konva.Ellipse (x: 450, y: 275, rayon: x: 100, y: 50, scaleY: 2, remplissage: "violet", contour: "noir"); layerA.add (circA, circB, circC, ellipB, ellipA, ellipC); stage.add (layerA);
Vous devriez noter que ellipb a une plus grande hauteur et largeur par rapport à ellipa. Depuis qu'ils ont tous les deux le même X et y les valeurs, je devais ajouter ellipb à la couche en premier afin de garder ellipa visible. Si ellipb a été ajouté après ellipa, il aurait été tiré dessus ellipa, le cacher aux spectateurs.
Si vous observez de près, vous verrez également que le cercle violet est en fait une ellipse avec y rayon réglé à 50 et X rayon défini sur 100. Toutefois, il a été mis à l’échelle par un facteur 2 dans la direction y. La mise à l'échelle augmente également la largeur du trait, ce qui la rend deux fois plus large en haut et en bas de l'ellipse par rapport à ses bords gauche et droit..
Vous pouvez utiliser le Konva.Line () objet afin de créer différents types de lignes et de courbes. Toutes les lignes nécessitent de spécifier les points par lesquels la ligne doit passer à l'aide de la points propriété. Les points sont spécifiés sous forme de tableau.
Vous pouvez joindre n'importe quel ensemble de points fournis à l'aide du points tableau pour former un polygone en définissant la valeur de la fermé attribuer à vrai. De même, vous pouvez convertir un ensemble de lignes droites en splines en définissant une valeur pour le tension attribut. Une valeur de zéro entraînera des lignes droites. Des valeurs plus élevées créent des lignes plus courbes.
Il vous est possible de créer une forme fermée et courbée (un blob) en définissant une valeur pour le tension propriété ainsi que la fermeture de la courbe en définissant fermé à vrai.
Comme pour le reste des formes dont nous avons parlé, vous pouvez définir la largeur du trait pour tracer les lignes à l’aide des touches largeur du trait attribut. Vous pouvez également spécifier un remplir couleur pour les formes fermées.
Dans l'exemple suivant, j'ai utilisé le même ensemble de points pour tracer toutes les formes. Cependant, j'ai aussi utilisé le bouge toi() méthode pour décaler chaque forme d'une distance spécifique afin d'éviter les chevauchements.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var lineA = new Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], trait: "noir"); var lineB = new Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], fermé: vrai, remplissage: "jaune", contour: "noir") ; var lineC = nouveau Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], tension: 0,8, trait: "bleu"); var lineD = new Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], tension: 1,8, trait: "rouge"); var lineE = new Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], fermé: vrai, tension: 2,2, remplissage: "bleu clair", contour: " noir" ); lineB.move (x: 180, y: 40); lineC.move (x: 380, y: 0); lineD.move (x: 0, y: 200); lineE.move (x: 180, y: 220); layerA.add (lineA, lineB, lineC, lineD, lineE); stage.add (layerA);
Notez également que les lignes rouges et bleues sont tracées en utilisant le même ensemble de points, mais un tension la valeur change de manière significative la forme finale de la courbe.
Vous pouvez choisir avec soin la valeur des différents points de la points tableau pour dessiner des polygones réguliers comme des pentagones et des hexagones. Dessiner des polygones réguliers plus complexes tels que des octogones utilisant cette méthode peut être fastidieux et sujet aux erreurs. Pour éviter les erreurs, vous devez utiliser le Konva.RegularPolygon () objet pour créer des polygones réguliers.
le X et y les propriétés sont utilisées pour spécifier le centre du polygone. le rayon Cette propriété est utilisée pour spécifier la distance entre le centre du polygone et tous ses sommets. Vous pouvez utiliser le côtés propriété pour spécifier le nombre de côtés que le polygone devrait avoir. N'oubliez pas que tous les côtés d'un polygone créé à l'aide de cette méthode auront des longueurs égales. Vous pouvez changer la longueur de certains côtés en utilisant le bouton scaleX et échelleY propriétés, mais il va également changer la largeur de trait du côté mis à l'échelle.
Comme toutes les autres formes dont nous avons parlé, vous pouvez modifier la largeur du trait, l’opacité et la visibilité des polygones réguliers en utilisant largeur du trait, opacité, et visibilité.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var triangle = nouveau Konva.RegularPolygon (x: 150, y: 275, côtés: 3, rayon: 100, scaleY: 1.6, trait: "noir", remplissage: "rgba (200,0,200, 1)",) ; var square = nouveau Konva.RegularPolygon (x: 60, y: 60, côtés: 4, rayon: 50, remplissage: "rgba (200,0,0, 0,5)", trait: "noir"); var pentagone = nouveau Konva.RegularPolygon (x: 160, y: 160, côtés: 5, rayon: 80, remplissage: "rgba (0,200,0, 0,5)", contour: "noir"; var hexagon = new Konva.RegularPolygon (x: 350, y: 120, côtés: 6, rayon: 80, remplissage: "rgba (0,0,200, 0,5)", contour: "noir"; var octagon = nouveau Konva.RegularPolygon (x: 450, y: 275, côtés: 8, rayon: 100, remplissage: "rgba (200,200,0, 0,5)", contour: "noir"); layerA.add (triangle, carré, pentagone, hexagone, octogone); stage.add (layerA);
Dans ce tutoriel, nous avons couvert les formes les plus élémentaires que Konva nous permet de dessiner facilement sur la toile. Nous avons également appris différents attributs pouvant être utilisés pour contrôler l’apparence de toutes ces formes. La plupart des attributs sont communs à toutes les formes, mais certains ne sont applicables que sur des formes spécifiques..
.
Accentsconagua