Exploration de l'API CSS Paint: Formes d'arrondi

La maîtrise des coins arrondis sur des formes complexes avec CSS peut être difficile. L'API CSS Paint offre une solution élégante! Cet article, qui fait partie de notre série "Explorer la série CSS Paint API", montre comment y parvenir.

Exploration de la série API CSS Paint:

• Partie 1: Effet de fragmentation de l'image
• Partie 2: animation blob
• Partie 3: bordure de polygone
• Partie 4: Formes d'arrondi (cet article)

Cette technique, actuellement prise en charge par Chrome et Edge, fournit une approche CSS uniquement CSS, simplifiant la maintenance et la compréhension du code.

Alternatives à l'API de peinture

Alors que d'autres méthodes existent pour l'arrondi des formes complexes, elles impliquent souvent le SVG et présentent des défis pour l'ajustement et la maintenabilité. Ceux-ci incluent:

clip-path: path()

Cette approche basée sur SVG est simple si la forme est prédéfinie, mais la modification de la courbure ou de la taille nécessite des modifications de chemin complexes.

Filtres SVG

L'utilisation des filtres SVG, comme on le voit dans le tutoriel de Lucas Bebber à effet gluant, permet un arrondi d'angle. Cependant, il nécessite toujours une expertise SVG significative pour les ajustements.

Méthode CSS uniquement d'Ana Tudor

La technique innovante CSS uniquement d'Ana Tudor offre une alternative, mais il peut être complexe pour mettre en œuvre et ajuster pour différents scénarios, en particulier avec la transparence ou les images.

La solution API CSS Paint

L'API CSS Paint fournit une solution plus gérable. Cette approche exploite une structure similaire à l'exemple de la bordure du polygone dans un article précédent.

Configuration CSS

Nous commençons par un rectangle simple et définissons la forme à l'aide de la variable --path , similaire à clip-path: polygon() . Clippy peut aider à générer ces chemins.

 .boîte {
  Affichage: bloc en ligne;
  hauteur: 200px;
  Largeur: 200px;
  - Path: 50% 0,100% 100%, 0 100%;
  --Radius: 20px;
  -Webkit-masque: peinture (forme arrondi);
}

La variable --path définit la forme et --radius contrôle la courbure du coin.

Implémentation JavaScript

Le code JavaScript ajoute des points médians aux segments de chemin et utilise la fonction arcTo() pour créer des coins arrondis lisses. La compréhension de l'utilisation par arcTo() des points de contrôle par ARCTO () est cruciale. Le code itère à travers les points, calculant les points médians et appliquant arcTo() pour générer la forme arrondie. Une limite de rayon est mise en œuvre pour empêcher le débordement avec de grandes valeurs de rayon.

(Code JavaScript omis pour la concision, mais décrit en détail dans l'article original)

La dernière étape consiste à remplir ou à caresser la forme pour obtenir l'effet visuel souhaité.

Inconvénients et solutions

Les principaux inconvénients sont la zone en survol (en utilisant un masque affecte l'interaction) et le débordement potentiel avec de grandes valeurs de rayon. Le problème de la zone survolé est résolu en utilisant un deuxième masque sur un pseudo-élément pour la frontière, et le problème de débordement est géré en limitant dynamiquement le rayon en fonction de la géométrie de la forme.

Extension des fonctionnalités

La variable --path est améliorée pour accepter les valeurs de rayon individuelles pour chaque coin, offrant un contrôle plus granulaire.

Exemples

Plusieurs exemples présentent la polyvalence de cette technique: formes CSS, bulles de la parole, cadres, séparateurs de section, menus de navigation, effets gluants et morphing de forme. Ces exemples démontrent la puissance et la flexibilité de l'API de peinture CSS pour créer des conceptions visuellement attrayantes et facilement maintenables.

Conclusion

L'API CSS Paint offre une méthode puissante et efficace pour créer des coins arrondis sur des formes complexes, surmontant les limites des approches CSS et SVG traditionnelles. Sa mise en œuvre simple et sa flexibilité en font un outil précieux pour la conception Web moderne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!