Share
Dans le deuxième tutoriel de la série, vous avez appris à dessiner des formes de base telles que des rectangles, des cercles et des polygones réguliers à l'aide de Konva. Le troisième tutoriel explique comment utiliser Konva pour dessiner des formes plus complexes telles que des étoiles et des anneaux, ainsi que des sprites sur la toile..
Dans ce didacticiel, nous allons encore plus loin et apprenons à appliquer différents styles aux formes en modifiant leurs valeurs de remplissage et de contour. Vous apprendrez également à contrôler l'opacité d'une forme et à lui appliquer des ombres. Dans les dernières sections, vous apprendrez à utiliser les modes de fusion pour spécifier le résultat final si des formes différentes se chevauchent..
Nous avons utilisé le remplir et accident vasculaire cérébral propriétés du premier tutoriel de la série. Cependant, nous ne les avons utilisés que pour remplir des formes avec une couleur unie jusqu'à présent. Vous pouvez également remplir une forme avec des dégradés (linéaires et radiaux) ainsi que des images. Il en va de même pour différents traits appliqués à une forme.
Il existe deux manières d'appliquer un remplissage à différentes formes. Vous pouvez soit définir la valeur de remplissage à l’aide des touches remplir lorsqu’une forme est créée pour la première fois dans Konva, ou vous pouvez utiliser le remplir() méthode pour appliquer un remplissage de manière dynamique en réponse à certains événements tels que le survol, le clic sur un bouton, etc..
Lorsque vous remplissez un élément avec une couleur unie, vous pouvez spécifier une valeur pour le paramètre. remplir propriété et cela fonctionnera très bien. Lorsque vous utilisez un dégradé linéaire pour remplir l'intérieur d'une forme, vous devez spécifier des valeurs valides pour de nombreuses autres propriétés, telles que fillLinearGradientStartPoint, fillLinearGradientEndPoint, et fillLinearGradientColorStops. Les deux premières propriétés acceptent des objets qui spécifient les coordonnées x et y des points de début et de fin d'un dégradé. Vous pouvez également spécifier les valeurs x et y séparément à l’aide des touches fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, et fillLinearGradientEndPointY Propriétés.
Les dégradés radiaux ont également le même ensemble de propriétés, mais le mot Linéaire est remplacé par Radial. Deux propriétés supplémentaires liées aux gradients radiaux sont fillRadialGradientStartRadius et fillRadialGradientEndRadius.
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: 25, y: 25, largeur: 200, hauteur: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientGradientColorStops : [0, 'bleu', 1, 'jaune'], contour: "noir"); var rectB = new Konva.Rect (x: 375, y: 25, width: 200, height: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50, fillLinearGradientColorStops: [0, 'vert', 0.1, 'jaune', 0.5, 'rouge', 0.9, 'noir'], contour: "noir"); var rectC = new Konva.Rect (x: 25, y: 200, width: 200, height: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: [0, 'vert', 0.5, 'jaune', 0,75, 'rouge', 0,9, 'noir'], contour: "noir"); var rectD = new Konva.Rect (x: 375, y: 200, width: 200, height: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndpoint: x: 100, y: 75, fillRadialGradientColorStops: [0, 'bleu', 0.5, 'jaune', 0.9, 'vert'], contour: "noir"); layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Lorsque cela n'est pas spécifié, les points de départ et d'arrivée d'un dégradé radial sont supposés être 0,0. C'est pourquoi le dégradé radial dans le troisième rectangle provient du coin supérieur gauche. Rappelez-vous également que les points de départ et d'arrivée sont spécifiés par rapport à la forme elle-même..
Comme pour le remplissage, vous pouvez définir une valeur pour la couleur et la largeur du trait à l’aide des touches accident vasculaire cérébral et largeur du trait propriétés lors de la première instanciation d’une forme. Vous pouvez également définir dynamiquement ces deux valeurs à l’aide des touches accident vasculaire cérébral() et largeur du trait() les méthodes.
Vous pouvez appliquer des ombres à toutes les formes créées à l'aide de Konva à l'aide de quatre propriétés différentes appelées shadowColor, shadowOffset, shadowBlur, et shadowOpacity. le shadowOffset propriété accepte un objet avec X et y composants que sa valeur, mais vous pouvez également utiliser shadowOffsetX et shadowOffsetY spécifier le X et y coordonne séparément. Vous avez également la possibilité d'activer et de désactiver les ombres pour une forme particulière à l'aide du bouton shadowEnabled propriété.
Vous pouvez contrôler l'opacité de la forme elle-même à l'aide de la touche opacité propriété. Veuillez noter qu'un objet entièrement transparent ne projettera aucune ombre. De même, si vous avez défini le remplir couleur d’une forme à transparente, seule l’ombre de sa accident vasculaire cérébral sera rendu sur la toile.
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: 25, y: 25, width: 200, height: 150, cornerRadius: 5, remplissage: "orange", opacité: 0.5, shadowColor: "noir", shadowOffset: x: -10, y: 10, shadowBlur: 10, contour: "noir"); var starA = new Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, remplissage: "transparent", contour: "noir", contour: 5, shadowColor: "rouge" , shadowOffset: x: 5, y: 5, shadowBlur: 0); layerA.add (rectA, starA); stage.add (layerA);
Réglage du shadowBlur propriété à 0 rend l'ombre aussi nette que la forme d'origine elle-même. Si vous définissez cette valeur sur une valeur trop élevée, l'ombre perdra sa forme d'origine. vous ne verrez qu'une tache sombre sur la toile.
Je tiens à souligner que vous pouvez également créer des ombres de texte avec le même ensemble de propriétés une fois que vous avez instancié une Konva.Text () objet.
Jusqu'à présent dans la série, tout chevauchement entre les formes masquait complètement la forme inférieure. La seule façon de garder la forme inférieure visible est de rendre toutes les formes dessus partiellement transparentes.
Parfois, vous voudrez peut-être que le résultat final, après le chevauchement de différentes formes, respecte certaines règles. Par exemple, il est possible de ne montrer que la couleur plus claire ou plus sombre dans les cas où les formes se chevauchent.
Konva vous permet de spécifier certaines valeurs pour déterminer comment les couleurs des formes superposées doivent être mélangées à l’aide des touches globalCompositeOperation propriété. Vous pouvez lire la documentation sur MDN pour en savoir plus sur la propriété et toutes ses valeurs possibles..
Dans l'exemple suivant, j'ai appliqué un mode de fusion différent à chacun des rectangles placés au coin du rectangle central..
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var rectCenter = new Konva.Rect (x: 225, y: 125, width: 150, height: 150, fill: "rgb (255, 100, 0)"); var rectA = new Konva.Rect (x: 125, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = new Konva.Rect (x: 325, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = new Konva.Rect (x: 125, y: 225, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "hue"); var rectD = new Konva.Rect (x: 325, y: 225, largeur: 150, hauteur: 150, remplissage: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
La couleur du rectangle en haut à gauche est rgb (0, 200, 100), et la couleur du rectangle central est rgb (255, 100, 0). Quand le alléger mode de fusion est appliqué, le rgb Les composants des deux couleurs sont comparés individuellement et les valeurs les plus élevées de chaque composant sont utilisées pour obtenir la couleur finale. Dans notre cas, la couleur finale du coin supérieur gauche devient rgb (255, 200, 100).
Quand le assombrir mode de fusion est appliqué, le rgb Les composants des deux couleurs sont comparés individuellement et les valeurs inférieures de chaque composant sont utilisées pour obtenir la couleur finale. Dans notre cas, la couleur finale du coin supérieur droit devient rgb (0, 100, 0).
Quand le teinte Le mode de fusion est appliqué, la luma et la chrominance de la couleur inférieure sont combinées à la teinte de la couleur supérieure. C'est pourquoi la couleur finale reste toujours verte mais devient plus claire. Quand le xor le mode de fusion est appliqué, la couleur finale devient transparente à tous les endroits de chevauchement.
Dans ce tutoriel, nous avons appris à remplir une forme avec des dégradés linéaires ou radiaux au lieu de couleurs unies. Nous avons également appris à appliquer des ombres à différentes formes et à les rendre partiellement transparentes à l'aide du logiciel opacité propriété. La dernière section vous a montré comment utiliser les modes de fusion pour changer la couleur finale après le chevauchement de deux formes.
Si vous avez des questions concernant ce didacticiel, veuillez me le faire savoir dans les commentaires. Le prochain et dernier tutoriel de la série vous montrera comment lier des événements à différentes formes dans Konva..
Accentsconagua