Share
Dans le deuxième tutoriel de cette série, vous avez appris à dessiner des formes de base avec Konva. Vous pouvez combiner les formes de base d'une manière ou d'une autre pour créer des étoiles, des anneaux, des flèches, des horloges ou une hutte. Konva vous permet également de créer des formes complexes courantes en utilisant des fonctions intégrées fournies par la bibliothèque..
Dans ce tutoriel, vous apprendrez à créer des étoiles et des anneaux dans Konva. Après cela, nous verrons comment écrire du texte avec Konva et comment l’écrire le long d’un chemin spécifique. Vous apprendrez également à dessiner des images et des images-objets sur une toile à l'aide de Konva..
Comparée à beaucoup d'autres formes complexes que vous pouvez dessiner sur la toile, la forme en étoile est l'une des plus courantes. Avec le bon ensemble de valeurs, vous pouvez également transformer des étoiles pointues en formes simples ressemblant à des badges. Konva vous permet de dessiner des étoiles en utilisant le Konva.Star () objet.
Vous pouvez spécifier le nombre de pointes qu'une étoile devrait avoir à l'aide du bouton numPoints propriété. Vous pouvez contrôler la taille de ces pointes à l’aide de la touche innerRadius et outerRadius Propriétés. Une grande différence dans la valeur de ces propriétés rendra les étoiles plus hérissées. Définir le rayon extérieur sur le rayon intérieur crée un polygone régulier dont le nombre de côtés est le double de la valeur de numPoints. Varier les valeurs de numPoints, innerRadius, et outerRadius peut donner des formes intéressantes.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var starA = new Konva.Star (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, trait: "noir", remplissage: "rgba (200,0,200, 1)",) ; var starB = nouveau Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, trait: "noir", remplissage: "rgba (0, 0, 200, 1)", ); var starC = nouveau Konva.Star (x: 475, y: 175, numPoints: 20, innerRadius: 90, outerRadius: 100, trait: "orange", remplissage: "jaune",); var starD = nouveau Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, trait: "noir", remplissage: "vert clair",); var starE = new Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, trait: "noir", remplissage: "blanc",); var starF = nouveau Konva.Star (x: 300, y: 275, numPoints: 40, innerRadius: 5, outerRadius: 80, trait: "noir", remplissage: "noir",); couche A.add (étoileA, étoileB, étoileC, étoileD, étoileE, étoileF); stage.add (layerA);
Comme d'habitude, vous pouvez faire pivoter et redimensionner les formes d'étoiles que vous créez à l'aide du rotation, échelle, scaleX, et échelleY Propriétés. De même, vous pouvez contrôler l’opacité d’une étoile à l’aide de la touche opacité propriété et afficher ou masquer à l'aide de la visible propriété.
Les anneaux à Konva se composent d’un cercle plein plus grand et d’un cercle creux plus petit posé dessus. Le rayon du cercle intérieur est spécifié en utilisant le innerRadius propriété, et le rayon du cercle extérieur est spécifié en utilisant le outerRadius propriété. le X et y les propriétés contrôlent la position du centre de l'étoile.
Vous pouvez redimensionner et faire pivoter les anneaux que vous créez à l'aide du scaleX, échelleY, échelle, et rotation Propriétés. Cependant, gardez à l'esprit que la rotation ne semble pas avoir d'effet si vous n'avez pas mis l'anneau à l'échelle avec des magnitudes différentes dans les directions x et y..
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var ringA = nouveau Konva.Ring (x: 125, y: 100, innerRadius: 10, outerRadius: 50, trait: "noir", remplissage: "rgba (200,0,200, 1)",); var ringB = nouveau Konva.Ring (x: 200, y: 100, innerRadius: 10, outerRadius: 50, trait: "noir", remplissage: "rgba (0, 0, 200, 0.5)",); var ringC = nouveau Konva.Ring (x: 475, y: 175, innerRadius: 90, outerRadius: 100, trait: "orange", remplissage: "jaune",); var ringD = nouveau Konva.Ring (x: 325, y: 100, innerRadius: 20, outerRadius: 40, scaleY: 2, scaleX: 0.3, rotation: 45, trait: "noir", remplissage: "vert clair", ) var starA = nouveau Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, trait: "noir", remplissage: "noir",); var ringE = nouveau Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, trait: "noir", remplissage: "rouge",); var starB = nouveau Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, trait: "noir", remplissage: "blanc",); var starC = nouveau Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, trait: "noir", remplissage: "orange",); var ringF = nouveau Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, trait: "noir", remplissage: "blanc",); coucheA.add (anneauA, anneauB, anneauC, anneauD, étoileA, anneauE, étoileB, étoileC, anneauF); stage.add (layerA);
Dans l'exemple suivant, j'ai superposé plusieurs formes d'étoiles et de anneaux pour créer un joli motif. Les trois étoiles et les deux anneaux du motif sont concentriques. Gardez à l'esprit que chaque fois que vous essayez de créer quelque chose comme ceci, dessinez toujours d'abord la plus grande forme. Si j'avais ajouté starA plus tard à la couche, il aurait couvert tous les anneaux plus petits et les étoiles, les cachant des spectateurs.
Vous pouvez écrire du texte sur une toile à l’aide des touches Konva.Text () objet. Lors de la création d'un objet texte, vous pouvez spécifier la valeur de la famille de police, de la taille de la police, du style de police et de la variante de police à l'aide de la commande famille de polices, taille de police, le style de police, et fontVariant Propriétés. La famille de polices par défaut est Arial et la taille de police par défaut est 12. Vous pouvez définir la le style de police propriété à normal, gras ou italique. De même, fontVariant peut être réglé sur normal ou smallcaps.
Le texte que vous souhaitez écrire peut être spécifié à l'aide de la touche texte propriété. S'il n'y a pas assez d'espace entre les lignes d'un commentaire multiligne, vous pouvez l'augmenter à l'aide de la touche hauteur de la ligne propriété.
Le point en haut à gauche à partir duquel Konva doit commencer à écrire le texte est spécifié à l'aide de la touche X et y Propriétés. Vous pouvez limiter la largeur du texte à l'aide de la propriété width. Tout texte que vous écrivez sera laissé aligné par défaut. Vous pouvez l’aligner à droite ou au centre à l’aide des touches aligner propriété.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var textA = new Konva.Text (y: 25, width: canvasWidth, aligner: 'center', texte: "CITATION DU JOUR", fontSize: 50, fontFamily: "Lato"); var textB = new Konva.Text (x: canvasWidth / 10, y: 175, width: canvasWidth * 8/10, aligner: 'center', lineHeight: 1.4, text: "Vous devez danser comme si personne ne vous regardait, \ n Amour comme si tu ne serais jamais blessé, \ n Chante comme si personne ne l’écoutait, \ n Et vis comme le paradis sur terre. ", fontSize: 25, fontFamily:" Lato "); var rectA = new Konva.Rect (x: canvasWidth / 10 - 10, y: 140, largeur: canvasWidth * 8/10 + 20, hauteur: 240, trait: "noir", remplissage: "brun"); var rectB = new Konva.Rect (x: canvasWidth / 10, y: 150, largeur: canvasWidth * 8/10, hauteur: 220, trait: "noir", remplissage: "bleu clair"); var starA = new Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoints: 10, trait: "noir", remplissage: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (layerA);
Dans l'exemple ci-dessus, notez que j'ai ajouté textB à la couche après avoir ajouté tous les autres éléments. De cette façon, nous pouvons nous assurer que le devis reste au-dessus de toutes les autres formes.
Le texte que vous écrivez sur la toile ne doit pas nécessairement suivre des lignes droites. Vous pouvez également indiquer un chemin au texte à suivre à l’aide de la touche Les données propriété. Le chemin d'accès est fourni sous la forme d'une chaîne de données SVG et peut inclure des commandes permettant de suivre des lignes, des courbes et des arcs..
Une chose importante à retenir est que le texte que vous souhaitez écrire sur un chemin spécifique doit être créé à l'aide de la commande Konva.TextPath () objet. Voici un exemple qui indique le chemin à suivre pour le texte sous la forme d’une courbe de Bézier cubique..
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var textA = new Konva.TextPath (y: 25, aligner: 'center', données: 'M100,300 C150,100 200,50 500 60', texte: "CE TEXTE VAIS SUR UN CHEMIN", fontTaille: 35, fontFamily: "Lato", remplissez: "orange"); var textB = new Konva.TextPath (y: 28, aligner: 'center', données: 'M100,320 C200,200 400,400 500 80', texte: "CE TEXTE VAIS SUR UN AUTRE CHEMIN", fontTaille: 25, fontFamily: "Lato", remplissez: "vert"); layerA.add (textA, textB); stage.add (layerA);
Vous devriez maintenant pouvoir créer une variété de formes en utilisant les méthodes dont nous avons parlé dans ce tutoriel et dans le précédent, mais il est parfois plus logique d’utiliser directement une image lorsque vous essayez de dessiner un graphique sur la toile. Konva vous permet de dessiner des images en utilisant le Konva.Image () objet.
La position du coin supérieur gauche d’une image est déterminée par la valeur de la X et y Propriétés. De même, sa largeur et sa hauteur sont spécifiées à l’aide des touches largeur et la taille Propriétés. Les valeurs du largeur et la taille les propriétés ne doivent pas nécessairement être égales aux dimensions réelles de l'image. Vous pouvez également redimensionner ou faire pivoter l’image à l’aide des touches rotation, échelle, scaleX, et échelleY Propriétés.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var theImage = new Image (); theImage.src = "chemin / vers / le / image.jpg"; theImage.onload = function () champ var = nouveau Konva.Image (x: 35, y: 115, image: theImage, width: 500, height: 250, rotation: -10, course: "noir", strokeWidth: 15); layerA.add (champ); stage.add (layerA); ;
Il est à noter que dans le code ci-dessus, j’ai instancié le Konva.Image () objet après que l'image a déjà été chargée. Essayer d’instancier le Konva.Image () Un objet avant le chargement de l’image provoquera une erreur. L'image du champ a été prise de Pixabay.
Konva vous permet également de restituer des sprites sur la toile à l’aide de la Konva.Sprite () objet. La seule différence est que cette fois, vous devez utiliser le animation et des animations clés en plus de la clé d'image que nous avons utilisée précédemment lors du rendu de l'image.
le animation key accepte une chaîne spécifiant le identifiant de l'animation à jouer. le des animations key accepte un objet qui stocke la carte d'animation pour le sprite en tant que valeur. Vous pouvez contrôler la vitesse à laquelle une animation de sprite doit être lue à l'aide du bouton frameRate propriété.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var theSprite = new Image (); theSprite.src = "chemin / vers / hero_spritesheet.png"; var animations = standing: [0, 0, 80, 94], marche: [0, 94, 80, 94, 80, 94, 80, 94, 160, 94, 80, 94, 240, 94, 80, 94 , 320, 94, 80, 94, 400, 94, 80, 94], sautant: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = function () var heroA = new Konva.Sprite (x: 50, y: 50, image: theSprite, animation: 'standing', animations: animations, frameRate: 6, frameIndex: 0); var heroB = new Konva.Sprite (x: 50, y: 150, image: theSprite, animation: 'walking', animations: animations, frameRate: 6, frameIndex: 0); var heroC = new Konva.Sprite (x: 50, y: 250, image: theSprite, animation: 'walking', animations: animations, frameRate: 60, frameIndex: 0); var heroD = new Konva.Sprite (x: 275, y: 150, scale: 2, image: theSprite, animation: 'jump', animations: animations, frameRate: 2, frameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (layerA); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
La largeur et la hauteur de notre sprite de héros sont respectivement 80px et 94px. J'ai utilisé ces valeurs pour indiquer à Konva la position d'un sprite à afficher lors de la lecture d'une séquence d'animation spécifique. Chaque séquence d'animation a reçu une identifiant pour identifier ce que fait le héros. Ce identifiant est utilisé plus tard pour indiquer à Konva quelle animation doit être lue. Comme dans l'exemple précédent, j'ai instancié le héros après le chargement de l'image afin d'éviter les erreurs..
La feuille de sprite de héros que nous utilisons dans la démo a été créée par tokka. J'ai également utilisé la même image dans le didacticiel Crafty Au-delà des bases: Sprites pour créer une animation de sprite. Les tutoriels de cette série vous montrent comment créer un jeu 2D simple avec Crafty..
Pour revenir à Konva, l'exemple suivant montre une animation de héros en train de marcher et de sauter. Le héros au bas a un plus haut frameRate valeur, ce qui donne l'impression que le héros tourne à des vitesses surhumaines.
Après avoir terminé les deuxième et troisième tutoriels, vous devriez maintenant être en mesure de créer vous-même beaucoup de formes, de motifs et de dessins à l'aide de Konva. La dernière section vous a également montré comment dessiner des images et des sprites sur votre toile. Cela devrait couvrir tous vos besoins en matière de dessin..
Si vous avez des questions concernant ce didacticiel, je serai ravi de vous aider. Le prochain tutoriel vous apprendra à remplir vos formes avec des dégradés et à appliquer des ombres sur tout ce que vous dessinez sur la toile..
Accentsconagua