Dans le monde de la programmation, des tâches apparemment simples peuvent se transformer en défis complexes. Récemment, nous avons rencontré un tel défi en essayant de transformer une conception Figma en code. La tâche à accomplir consistait à créer un cadran radial avec un dégradé linéaire - une exigence apparemment simple qui s'est rapidement avérée plus complexe que prévu.  Dans cet article, nous plongerons dans le monde des gradients SVG et explorerons la solution que nous avons conçue pour relever les défis qui se sont posés et nous expliquerons pourquoi, parfois, relever des défis d'ingénierie complexes comme celui-ci peut être très gratifiant.  Lancé une balle courbe  Au début, cela parait simple. Il doit y avoir une bibliothèque que nous pouvons utiliser pour créer le cadran et lui appliquer un dégradé linéaire. À quel point cela pourrait-il être difficile?  Et après une recherche rapide dans des bibliothèques d'investigation telles que   et   , nous avons trouvé des bibliothèques capables de créer des cadrans radiaux ainsi que de générer des dégradés linéaires à l'aide de SVG. Cependant, la véritable complexité est apparue lorsque l'on a tenté de combiner ces deux éléments de manière transparente. L'obstacle résidait dans la nature des gradients linéaires définis dans SVG. Par défaut, les dégradés linéaires font la transition entre les couleurs le long d'une ligne droite. Lorsqu'il est appliqué au trait d'un tracé circulaire, la direction du dégradé reste linéaire, sans tenir compte de la courbe du cercle. High Charts FusionCharts  Par conséquent, si nous devions appliquer un dégradé linéaire à un cadran circulaire complet créé avec une seule courbe, le dégradé suivrait une trajectoire rectiligne plutôt que la trajectoire radiale souhaitée le long du cadran. Cela n'atteindrait pas le dégradé incurvé que nous recherchions - nous étions donc de retour à la planche à dessin.   Décomposer le problème  Au lieu de cela, pour obtenir l'effet d'un dégradé de transition en douceur encerclant le cadran radial, nous avons réalisé que nous devions diviser le cadran en plusieurs sections et appliquer des dégradés distincts à chaque section.  Dans notre exemple, nous avons divisé le cadran en quatre sections ; chacun a attribué son propre gradient linéaire. En sélectionnant soigneusement les couleurs des arrêts de dégradé, nous avons pu créer une apparence de dégradé continu autour du cadran.  Ici, nous commençons à voir comment nous pouvons construire un cadran radial en SVG. L'attribut "d" définit un chemin à tracer. Dans ce cas, il précise la trajectoire du premier quart de notre cadran radial.   Le 'M' signifie "Déplacer vers" et définit le point initial du chemin aux coordonnées (150,10). La commande 'a' crée un arc elliptique. Cette commande d'arc a plusieurs paramètres. Les deux premiers paramètres, '120 120', définissent les rayons x et y de l'ellipse utilisée pour dessiner l'arc. Le '0 0 1' définit la rotation de l'axe x (qui est zéro), le grand drapeau d'arc et le drapeau de balayage. Le '103.9230 60' final définit le point final du chemin, qui complète notre arc. Nous appliquons ensuite le dégradé avec l'attribut trait sur le chemin.  Ce processus est répété pour chaque quart du cadran. Chaque quartier obtient son propre chemin et son propre gradient. Cela donne l'effet d'un dégradé unique et en douceur qui tourne autour du cadran.   Remplissage de dégradé dynamique  Pour remplir dynamiquement le dégradé le long du cadran, nous avons exploité les propriétés stroke-dashoffset et stroke-dasharray du chemin SVG. Cette technique est couramment utilisée lors de la création de cadrans radiaux. Les astuces CSS ont une description détaillée de l'approche :   . l'animation de ligne SVG fonctionne  En définissant le stroke-dasharray égal à la longueur du chemin, nous avons établi un motif de tirets et d'espaces ressemblant à une ligne pointillée encerclant le cercle. La propriété stroke-dashoffset a déterminé le point de départ du motif de tirets, animant efficacement le mouvement du trait. En animant le stroke-dashoffset depuis le début du chemin jusqu'à la longueur du chemin, le tiret a semblé « voyager » autour du cercle.    Embrasser la complexité (parfois)  Bien que les conceptions complexes puissent se traduire par des défis techniques difficiles, elles offrent également aux programmeurs l'occasion de perfectionner leurs compétences en résolution de problèmes. Cela fait partie intégrante de ce qui rend la programmation intéressante, du moins pour moi.  Les complexités auxquelles nous sommes confrontés dans la programmation reflètent souvent la complexité des conceptions à partir desquelles nous travaillons. Notre design Figma, doté d'un cadran radial avec un dégradé linéaire, est un excellent exemple de la façon dont un élément de design visuellement attrayant peut introduire des défis techniques importants.  Il est facile pour les programmeurs d'essayer instinctivement de travailler avec les concepteurs pour trouver un compromis en termes de spécifications de conception. En fait, c'est souvent la bonne approche. Mais parfois, si vous voulez que vos conceptions se démarquent de la foule, vous devrez plutôt dépasser votre zone de confort et trouver des moyens créatifs de résoudre vos problèmes.  Une autre façon de le dire est que si les complexités de conception peuvent se traduire par des défis techniques, elles offrent également aux programmeurs des opportunités de perfectionner leur compétence la plus précieuse, leur capacité à résoudre des problèmes.    Également publié   . ici

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

This story contains new, firsthand information uncovered by the writer.

View our award-winning work and job openings

Take a peek at our other articles (and job openings) right here!

Cet audio est produit dans la langue originale de l'histoire !

Résoudre un défi de programmation courbe avec des dégradés SVG

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps