Erkundung der CSS -Farb -API: Polygon -Grenze

Das Erstellen komplizierter Formen mit clip-path ist unkompliziert, aber das Hinzufügen von Grenzen stellt eine anhaltende Herausforderung dar. CSS fehlt eine robuste Lösung, die häufig umständliche Problemumgehungen erfordert. Dieser Artikel zeigt eine Lösung unter Verwendung der CSS -Farb -API.

Diese CSS -Farb -API -Explorationsserie wird fortgesetzt:

• Teil 1: Bildfragmentierungseffekt
• Teil 2: Blob Animation
• Teil 3: Polygon -Rand (aktueller Artikel)
• Teil 4: Rundenformen

Dieser Artikel beschreibt Polygongrenzen. Denken Sie daran, dass diese Technik derzeit nur in Browsern auf Chrombasis (Chrome, Edge, Opera) unterstützt wird. Überprüfen Sie Caniuse auf die neuesten Kompatibilitätsinformationen.

Der Code bleibt präzise und anpassungsfähig und erfordert nur geringfügige variable Anpassungen, um die Form zu ändern.

Kernkonzept

Der Polygonrand wird durch Kombinieren clip-path und einer benutzerdefinierten Maske erreicht, die mit der Lack-API erzeugt wird:

1. Beginnen Sie mit einem Standard -Rechteck.
2. Tragen Sie clip-path auf, um es in ein Polygon zu formen.
3. Wenden Sie eine benutzerdefinierte Maske an, um den Polygonrand zu erstellen.

CSS -Struktur

Das CSS für den clip-path -Schritt ist:

 .Kasten {
  -Path: 50% 0,100% 100%, 0 100%;

  Breite: 200px;
  Höhe: 200px;
  Hintergrund: Rot;
  Anzeige: Inline-Block;
  Clip-Pfad: Polygon (var (-Pfad));
}

Der Schlüssel ist die CSS -Variable --path . Sowohl clip-path als auch die Maske verwenden diese Variable für konsistente Parameter.

Der vollständige CSS -Code wird:

 .Kasten {
  -Path: 50% 0,100% 100%, 0 100%;
  --größer: 5px;

  Breite: 200px;
  Höhe: 200px;
  Hintergrund: Rot;
  Anzeige: Inline-Block;
  Clip-Pfad: Polygon (var (-Pfad));
  -Webkit-Maske: Farbe (Polygon-Border);
}

Neben clip-path wird eine benutzerdefinierte Maske angewendet und die --border Randdicke. Das CSS bleibt einfach und generisch und hebt die Benutzerfreundlichkeit der Lackapis hervor.

JavaScript -Implementierung

In Teil 1 dieser Serie finden Sie ein besseres Verständnis der Farb -API -Struktur.

Der JavaScript -Code der paint() -Funktion:

 const points = properties.get ('-path'). toString (). split (',');
const b = parsefloat (Eigenschaften.get ('-Grenze'). Wert);
const w = Größe.width;
const H = Größe.Height;

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

var p = Punkte [0] .Trim (). Split ("");
P = CC (P [0], P [1]);

ctx.beginPath ();
ctx.moveto (p [0], p [1]);
für (var i = 1; i <points.length i p="Punkte" .trim split ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'schwarz';" ctx.stroke><p> Der Code liest die Variable <code>--path</code> , konvertiert sie in ein Punktarray und zeichnet dann ein Polygon mit <code>moveTo</code> und <code>lineTo</code> . Dieser Polygon spiegelt das <code>clip-path</code> -Polygon wider. Der Schlaganfall erzeugt die Grenze; Die Füllung der Form ist transparent.</p><p> Das Ändern des Pfades und der Dicke ermöglicht verschiedene Polygongrenzen. Gradienten und Bilder können durch die Verwendung der CSS <code>background</code> feste Farben ersetzen.</p><p> Um Inhalte zu integrieren, ist ein Pseudoelement erforderlich, um das Ausschneiden zu verhindern. Die Maskeneigenschaft wird in den Pseudoelement verschoben, während <code>clip-path</code> auf dem Hauptelement bleibt.</p><h3> Häufig gestellte Fragen</h3><p> Im Folgenden werden mehrere gängige Fragen zum bereitgestellten Skript behandelt.</p><h4> Was ist die <code>cc()</code> -Funktion?</h4><p> Diese Funktion wandelt Punktkoordinaten (Prozentsatz oder Pixelwerte) in Pixelwerte um, die im Canvas -Element verwendet werden können.</p><pre class="brush:php;toolbar:false"> const cc = function (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);
  }
  return [fx, fy];
}

Warum clip-path verwenden, wenn die Maske bereits Clips Clips?

Die Verwendung von nur die Maske führt zu Problemen mit Schlaganfallausrichtung und verlässlicher Fläche. clip-path löst diese Probleme.

Warum @property mit dem Grenzwert verwenden?

@property registriert die benutzerdefinierte Eigenschaft und definiert ihren Typ (in diesem Fall,<length></length> ), Aktivieren Sie die Browsererkennung und -handhabung als gültiger Typ, nicht nur als Zeichenfolge. Dies ermöglicht verschiedene Längeneinheiten.

Was ist mit der Variablen --path ?

Die Variable --path wird aufgrund von Einschränkungen bei der Registrierung komplexer Typen mit @property als Zeichenfolge behandelt. Die cc() -Funktion übernimmt die Konvertierung von String zu Pixel.

Können wir einen gestrichelten Rand haben?

Ja, mit ctx.setLineDash() . Eine zusätzliche Variable steuert das Dash -Muster.

Warum nicht @property für die Dash -Variable verwenden?

Obwohl es technisch möglich ist, erwies sich das Abrufen der Werte innerhalb paint() als problematisch. Im Moment wird die --dash -Variable als Zeichenfolge behandelt.

Praktische Anwendungen

Mehrere Anwendungsfälle zeigen die Polygon -Grenztechnik:

• Tasten: Erstellen Sie benutzerdefinierte Schaltflächen mit Schwebeffekten.
• Breadcrumbs: Vereinfachen Sie die Navigation der Breadcrumb.
• Karte enthüllen Animation: Randdicke für Schwebeffekte oder Enthüllung von Animationen.
• Callouts & Sprachblasen: Fügen Sie komplexen Formen leicht Grenzen hinzu.
• Animating -Striche: Erstellen Sie verschiedene Dash -Animationen mit setLineDash() und lineDashOffset .

Dieser Artikel bietet einen umfassenden Leitfaden zum Erstellen von Polygongrenzen mithilfe der CSS -Farb -API und bietet Flexibilität und Effizienz des Formstylings.

Das obige ist der detaillierte Inhalt vonErkundung der CSS -Farb -API: Polygon -Grenze. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!