Exploration de l'API CSS Paint: Border Polygon

La création de formes complexes avec clip-path est simple, mais l'ajout de frontières présente un défi persistant. CSS n'a pas de solution robuste, nécessitant souvent des solutions de contournement lourdes. Cet article montre une solution utilisant l'API CSS Paint.

Cette série d'exploration API CSS Paint continue:

• Partie 1: Effet de fragmentation de l'image
• Partie 2: animation blob
• Partie 3: Border Polygon (article actuel)
• Partie 4: Formes d'arrondi

Cet article détaille la création de bordures de polygone. N'oubliez pas que cette technique n'est actuellement prise en charge que dans les navigateurs à base de chrome (Chrome, Edge, Opera). Vérifiez Caniuse pour les dernières informations de compatibilité.

Le code reste concis et adaptable, ne nécessitant que des ajustements variables mineurs pour modifier la forme.

Concept de base

La bordure de polygone est obtenue en combinant clip-path et un masque personnalisé généré avec l'API de peinture:

1. Commencez par un rectangle standard.
2. Appliquez clip-path pour le façonner en polygone.
3. Appliquez un masque personnalisé pour créer la bordure polygone.

Structure CSS

Le CSS pour l'étape clip-path est:

 .boîte {
  - Path: 50% 0,100% 100%, 0 100%;

  Largeur: 200px;
  hauteur: 200px;
  Contexte: rouge;
  Affichage: bloc en ligne;
  Clip Path: Polygon (var (- chemin));
}

La clé est la variable CSS --path . clip-path et le masque utilisent cette variable pour les paramètres cohérents.

Le code CSS complet devient:

 .boîte {
  - Path: 50% 0,100% 100%, 0 100%;
  - Border: 5px;

  Largeur: 200px;
  hauteur: 200px;
  Contexte: rouge;
  Affichage: bloc en ligne;
  Clip Path: Polygon (var (- chemin));
  -Webkit-masque: peinture (polygone-frontière);
}

Outre clip-path , un masque personnalisé est appliqué et --border Contrôle la frontière de l'épaisseur de la bordure. Le CSS reste simple et générique, mettant en évidence la facilité d'utilisation de l'API de peinture.

Implémentation JavaScript

Reportez-vous à la partie 1 de cette série pour une meilleure compréhension de la structure de l'API de peinture.

Le code javascript de la fonction paint() :

 const point = properties.get ('- path'). toString (). Split (',');
const b = parsefloat (properties.get ('- border'). valeur);
const w = size.width;
const h = size.height;

const cc = fonction (x, y) {
  // ...
}

var p = points [0] .trim (). Split ("");
p = cc (p [0], p [1]);

ctx.beginPath ();
ctx.moveto (p [0], p [1]);
pour (var i = 1; i <point.length i p="points" .trim split ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'noir';" ctx.stroke><p> Le code lit la variable <code>--path</code> , le convertit en un tableau de points, puis dessine un polygone à l'aide de <code>moveTo</code> et <code>lineTo</code> . Ce polygone reflète le polygone <code>clip-path</code> . L'AVC crée la frontière; Le remplissage de la forme est transparent.</p><p> La modification du chemin et de l'épaisseur permet de diverses bordures de polygone. Les gradients et les images peuvent remplacer les couleurs solides en raison de l'utilisation de la propriété <code>background</code> CSS.</p><p> Pour incorporer le contenu, un pseudo-élément est nécessaire pour éviter la coupure. La propriété Mask est déplacée vers l'élément pseudo-élément, tandis que <code>clip-path</code> reste sur l'élément principal.</p><h3> Questions fréquemment posées</h3><p> Plusieurs questions courantes concernant le script fourni sont abordées ci-dessous.</p><h4> Quelle est la fonction <code>cc()</code> ?</h4><p> Cette fonction convertit les coordonnées ponctuelles (pourcentage ou valeurs de pixel) en valeurs de pixels utilisables dans l'élément Canvas.</p><pre class="brush:php;toolbar:false"> const cc = fonction (x, y) {
  var fx = 0, fy = 0;
  if (x.indexof ('%')> -1) {
    fx = (parsefloat (x) / 100) * w;
  } else if (x.indexof ('px')> -1) {
    fx = parsefloat (x);
  }
  if (y.indexof ('%')> -1) {
     fy = (parsefloat (y) / 100) * h;
  } else if (y.indexof ('px')> -1) {
    fy = parsefloat (y);
  }
  retour [fx, fy];
}

Pourquoi utiliser clip-path si le masque clipse déjà?

L'utilisation uniquement du masque entraîne des problèmes avec l'alignement des AVC et la zone de survol. clip-path résout ces problèmes.

Pourquoi utiliser @property avec la valeur de la bordure?

@property enregistre la propriété personnalisée, définissant son type (dans ce cas,<length></length> ), activant la reconnaissance et la gestion du navigateur en tant que type valide, pas seulement une chaîne. Cela permet différentes unités de longueur.

Qu'en est-il de la variable --path ?

La variable --path est gérée en tant que chaîne en raison des limites de l'enregistrement des types de complexes avec @property . La fonction cc() gère la conversion de chaîne-pixel.

Pouvons-nous avoir une bordure en pointillés?

Oui, en utilisant ctx.setLineDash() . Une variable supplémentaire contrôle le modèle de tableau de bord.

Pourquoi ne pas utiliser @property pour la variable Dash?

Bien que techniquement possible, la récupération des valeurs au sein de paint() s'est avérée problématique. Pour l'instant, la variable --dash est traitée comme une chaîne.

Applications pratiques

Plusieurs cas d'utilisation présentent la technique de la bordure du polygone:

• Boutons: Créez des boutons de forme personnalisés avec des effets de survol.
• Croix du pain: simplifiez la navigation au fil du fil.
• CARDE REVERT ANIMATION: Animer l'épaisseur de la bordure pour les effets de survol ou révéler des animations.
• Calouts et bulles de la parole: ajoutez facilement les bordures à des formes complexes.
• Animation de tirets: Créez diverses animations de tableau de bord à l'aide de setLineDash() et lineDashOffset .

Cet article fournit un guide complet pour créer des bordures de polygone à l'aide de l'API CSS Paint, offrant une flexibilité et une efficacité dans le style de forme.

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!