Die Geschichte hinter Tryshape, ein Schaufenster für die CSS-Clip-Path-Immobilie

Ich liebe alle Arten von Formen, besonders bunte Formen! Die Formen auf der Website sind genauso wichtig wie Hintergrundfarben, Bilder, Banner, Separatoren, Kunstwerke und mehr: Sie helfen uns, den Kontext zu verstehen und uns durch Vorteile zu führen.

Vor ein paar Monaten habe ich eine mathematische Lernanwendung für meine 7-jährige Tochter entwickelt. Neben der grundlegenden Addition und Subtraktion möchte ich auch das Problem mit Formen präsentieren. Zu dieser Zeit wurde ich mit der CSS- clip-path Eigenschaft vertraut, eine zuverlässige Möglichkeit, Formen auf Webseiten zu erstellen. Dann baute ich eine andere Anwendung namens Tryshape mit der Kraft des clip-path .

Ich werde Sie durch die Geschichte hinter Tryshape führen und wie sie dazu beiträgt, Formen zu erstellen, zu verwalten, zu teilen und zu exportieren. Dabei tauchen wir in CSS- clip-path ein und wie es mir geholfen hat, meine Anwendung schnell aufzubauen.

Hier sind einige wichtige Links:

• Tryshape -Website
• GitHub -Code -Bibliothek
• Video Demo
• clip-path -Kapselung NPM-Paket für React

CSS clip-path -Attribute und -formen

Stellen Sie sich vor, Sie haben ein regelmäßiges Stück Papier und einen Bleistift, und Sie möchten eine Form (wie ein Quadrat) darauf zeichnen. was werden Sie tun? Sie werden höchstwahrscheinlich an einem Punkt beginnen, dann eine Linie zu einem anderen Punkt ziehen und dreimal wiederholen, bevor Sie zum Anfangspunkt zurückkehren können. Sie müssen auch sicherstellen, dass Sie parallele und gleiche Länge gegenüberliegender Seiten haben.

Daher umfassen die grundlegenden Formelemente Punkte, Linien, Richtungen, Kurven, Winkel und Längen usw. CSS clip-path ist dabei, viele dieser Eigenschaften zu spezifizieren, um den Bereich von HTML-Elementen zur Anzeige eines bestimmten Bereichs zu erfassen. Die Teile innerhalb des beschnittenen Bereichs werden angezeigt und der Rest versteckt. Es bietet Entwicklern viele Möglichkeiten, mithilfe clip-path -Eigenschaft verschiedene Formen zu erstellen.

Erfahren Sie mehr über das Schneiden und wie es sich von der Maskierung unterscheidet.

clip-path -Wert für die Form der Form

clip-path -Eigenschaft akzeptiert die folgenden Werte, um eine Form zu erstellen:

• circle()
• ellipse()
• inset()
• polygon()
• Clipquelle mit url() -Funktion
• path()

Wir müssen das grundlegende Koordinatensystem ein wenig verstehen, um diese Werte zu verwenden. Wenn Sie das clip-path -Attribut auf ein Element anwenden, um eine Form zu erstellen, müssen wir die X-Achse, die y-Achse und die anfänglichen Koordinaten (0,0) der oberen linken Ecke des Elements berücksichtigen.

Dies ist ein DIV-Element mit der x-Achse, der y-Achse und den anfänglichen Koordinaten (0,0).

Verwenden wir nun circle() um eine Kreisform zu erstellen. Wir können diesen Wert verwenden, um die Position und den Radius des Kreises anzugeben. Um beispielsweise eine kreisförmige Form mit einem Radius von 70px an Koordinatenpositionen (70, 70) zu erstellen, können wir clip-path -Attributwert angeben wie:

 Clip-Pfad: Kreis (70px bei 70px 70px)

Daher befindet sich die Mitte des Kreises in Koordinaten (70, 70) und der Radius beträgt 70px. Jetzt ist nur dieser kreisförmige Bereich beschnitten und auf dem Element angezeigt. Der Rest des Elements ist versteckt, um den Eindruck einer kreisförmigen Form zu erwecken.

Was passiert als nächstes, wenn wir die Position als (0,0) angeben möchten? In diesem Fall befindet sich die Mitte des Kreises in einer (0,0) Position mit einem Radius von 70px. Dies macht nur einen Teil des Kreises im Element sichtbar.

Lassen Sie uns die beiden anderen Grundwerte inset() und polygon() verwenden. Wir verwenden inset , um Rechteckformen zu definieren. Wir können die Lücken angeben, dass vier Kanten möglicherweise einen Bereich aus dem Element tauchen müssen. Zum Beispiel:

 Clip-Pfad: Einschub (30px)

clip-path -Wert über den Bereich steckt den Bereich durch Ausschluss des 30px-Werts vom Rand des Elements. Wir können dies im Bild unten sehen. Wir können auch einen anderen inset für jede Kante angeben.

Als nächstes kommt polygon() -Wert. Wir können einen Satz von Scheitelpunkten verwenden, um eine Polygonform zu erstellen. Bitte beachten Sie dieses Beispiel:

 Clip-Pfad: Polygon (10% 10%, 90% 10%, 90% 90%, 10% 80%)

Hier geben wir einen Satz von Scheitelpunkten an, um einen Bereich zum Anschneiden zu erstellen. Die folgende Abbildung zeigt die Position jedes Scheitelpunkts, um eine Polygonform zu erzeugen. Wir können nach Bedarf so viele Scheitelpunkte angeben.

Schauen wir uns als nächstes ellipse() und url() an. ellipse() -Werte erzeugt eine Form, indem zwei Radiuswerte und eine Position angegeben werden. In der folgenden Abbildung sehen wir eine Ellipse an einer Position mit einem Radius (50%, 50%) mit einer Formbreite von 70px und einer Höhe von 100px.

url() ist eine CSS-Funktion, die den ID-Wert des clip-path -Elements angibt, um eine SVG-Form zu rendern. Bitte beachten Sie das Bild unten. Wir definieren eine SVG -Form mit clipPath und path . Sie können diese Form mit dem ID -Wert des clipPath -Elements als Argument für url() -Funktion rendern.

Zusätzlich können wir path Pfadwert direkt in path() verwenden, um die Form zu zeichnen.

In Ordnung. Ich hoffe, Sie haben bereits die verschiedenen clip-path -Attributwerte verstanden. Schauen wir uns mit diesem Verständnis einige Implementierungen an und probieren Sie es aus. Hier ist ein Beispiel: Verwenden Sie es, um das Hinzufügen zu versuchen und Werte zu ändern, um neue Formen zu erstellen.

Einführung in Tryshape

Jetzt ist es Zeit, über Tryshape und seine Hintergrundgeschichte zu sprechen. TryShape ist eine Open -Source -Anwendung, mit der Sie jede Form Ihrer Wahl erstellen, exportieren, teilen und verwenden können. Sie können Banner, Kreise, Kunstwerke, Polygone erstellen und sie als SVG-, PNG- und JPEG -Dateien exportieren. Sie können auch ein CSS -Code -Snippet erstellen, um in Ihrer Anwendung zu kopieren und zu verwenden.

Tryshape wird mit den folgenden Frameworks und Bibliotheken (und natürlich clip-path ) erstellt:

• CSS clip-path : Wir haben die Funktionalität dieser leistungsstarken CSS-Eigenschaft besprochen.
• Weiter.js: Das coolste React-basierte Framework. Es hilft mir, Seiten, Komponenten, Interaktionen und APIs zu erstellen, um eine Verbindung zur Backend -Datenbank herzustellen.
• HarperDB: Eine flexible Datenbank zum Speichern von Daten und zum Abfragen von SQL- und NoSQL -Interaktionen. Tryshape erstellt seine Schemata und Tische in der HarperDB -Cloud. Die Next.js -API interagiert mit Schemas und Tabellen, um CRUD -Operationen durchzuführen, die von der Benutzeroberfläche erforderlich sind.
• Firebase: Authentifizierungsdienst von Google. TryShape verwendet es, um die soziale Anmeldung mit Google, Github, Twitter und anderen Konten zu aktivieren.
• React-ICons: Ein Speicher für alle Icons für React-Anwendungen
• Date-Fns: Eine moderne Leichtbibliothek für das Datumsformatieren
• Axios: Vereinfachen Sie API -Aufrufe in React -Komponenten
• Gestaltete Komponenten: Eine strukturierte Methode zum Erstellen von CSS-Regeln aus React-Komponenten
• React-Clip-Pfad: Ein hausgemachtes Modul zum Umgang mit clip-path -Eigenschaften in React-Anwendungen
• React-Draggable: macht HTML-Elemente in einer React-Anwendung draggierbar. Mit TryShape wird es verwendet, um die Position der Formscheitelpunkte anzupassen.
• DownloadJS: Trigger JavaScript Download auslösen
• HTML-to-Image: Konvertieren Sie HTML-Elemente in Bilder (einschließlich SVG, JPEG und PNG)
• Vercel: Am besten zum Hosting als Next.js -Anwendungen

Erstellen Sie Formen in Tryshape mit CSS clip-path

Lassen Sie mich den Quellcode hervorheben, mit dem Formen mithilfe der CSS- clip-path Eigenschaft erstellt werden. Der folgende Code -Snippet definiert die Benutzeroberflächenstruktur eines Containerelements (Box), das ein 300pX -Quadrat ist. Das Boxelement hat zwei untergeordnete Elemente, Schatten und Komponenten.

<box height="300px" onclick="{(e)"> props.handlechange (e)} width = "300px">
  {
    props.ShapeTInformation.showshadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

Die Schattenkomponente definiert den von clip-path Clips verborgenen Bereich. Wir erstellen es, um einen leichten Hintergrund anzuzeigen, damit der Endbenutzer diesen Bereich teilweise sehen kann. Die Komponente wird verwendet, um clip-path -Werte zum Anzeigen des Clip-Bereichs zuzuweisen.

Siehe die Definitionen der gestylenkomponenten Definitionen von Kasten, Schatten und Komponenten unten:

 // Erstellen Sie den Code mit Styled-Komponenten für UI-Komponenten mithilfe von CSS-Eigenschaften // Container Div
const box = styled.div`
  Breite: $ {props => props.width || '100px'};
  Höhe: $ {props => props.height || '100px'};
  Rand: 0 Auto;
  Position: Relativ;
`;

// Shadow definiert den versteckten Bereich durch `clip-path` cropping // Wir zeigen einen leichten Hintergrund an, um diesen Bereich teilweise sichtbar zu machen.
const Shadow = styled.div`
  Hintergrundfarbe: $ {props => props.backgroundColor || '#00c4ff'};
  Opazität: 0,25;
  Position: absolut;
  Top: 10px;
  links: 10px;
  Rechts: 10px;
  unten: 10px;
`;

// Holen Sie sich den "clip-path" -Wert (Formel) und setzen Sie ihn auf die tatsächliche Komponente der Eigenschaft "clip-path".
const component = styled.div`
  Clip-Pfad: $ {props => props.formula};
  Position: absolut;
  Top: 10px;
  links: 10px;
  Rechts: 10px;
  unten: 10px;
`;

Sehen Sie sich die vollständige Codebasis in der GitHub -Codebasis an.

Tryshapes zukünftige Entwicklungsrichtung

Tryshape-Handles erstellen und verwalten grundlegende Formen mithilfe von Hintergrund-CSS- clip-path . Es hilft, Formen und CSS -Code -Snippets für die Verwendung in Ihrer Webanwendung zu exportieren. Es hat das Potenzial, wertvollere Merkmale zu entwickeln. Die Hauptfunktion ist die Fähigkeit, Formen mit gekrümmten Kanten zu erstellen.

Um Kurvenformen zu unterstützen, müssen wir die folgenden Werte in Tryshape unterstützen:

• Clipquelle mit url()
• path() .

Mit diesen Werten können wir mit SVG Formen erstellen und dann einen der oben genannten Werte verwenden. Dies ist ein Beispiel für eine url() CSS -Funktion, die SVG -Unterstützung verwendet, um Formen zu erstellen.

<div> Herz</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

Dann gibt es CSS:

 .Herz {
  Clip-Pfad: URL (#Herzpfad);
}

Erstellen wir nun eine Form mit path() -Wert. HTML sollte ein Element wie ein Div haben:

<div> Kurve</div>

In CSS:

 .curve {
  Clip-Pfad: Pfad ("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

Abschluss

Ich hoffe, Sie genießen meine Tryshape -Anwendung und verstehen die dahinter stehende Philosophie, die Strategien, die ich berücksichtige, die zugrunde liegende Technologie und ihr Potenzial für die Zukunft. Bitte versuchen Sie es zu versuchen, den Quellcode zu überprüfen. Natürlich können Sie jederzeit durch Fragen, Feature -Anfragen und Code dazu beitragen.

Vor dem Ende möchte ich Ihnen ein kurzes Video für den Hashhnode -Hackathon zeigen. Tryshape ist der Eintrag und wurde schließlich für die Gewinner ausgewählt. Ich hoffe es hat dir gefallen.

Kontaktieren wir uns. Sie können @ME (@tapasadhikary) auf Twitter kommentieren oder jederzeit folgen.

Das obige ist der detaillierte Inhalt vonDie Geschichte hinter Tryshape, ein Schaufenster für die CSS-Clip-Path-Immobilie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!