Wie stelle ich mit FabricJS den Neigungswinkel eines Dreiecks auf der x-Achse ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS den Neigungswinkel eines Dreiecks auf der x-Achse ein?

WBOY

Freigeben： 2023-09-05 22:37:12

nach vorne

818 Leute haben es durchsucht

Wie stelle ich mit FabricJS den Neigungswinkel eines Dreiecks auf der x-Achse ein?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Neigungswinkel auf der x-Achse eines Dreiecks festlegen. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Klasse fabric.Triangle erstellen und diese der Leinwand hinzufügen.

Wir können unser Dreiecksobjekt anpassen, indem wir seine Größe ändern, eine Hintergrundfarbe hinzufügen oder den Neigungswinkel auf der x-Achse ändern. Dies können wir mit dem Attribut skewX erreichen.

Syntax

new fabric.Triangle({ skewX: Number }: Object )

Nach dem Login kopieren

Parameter

Optionen (optionale Option)< ;/strong> − Dieser Parameter ist ein Objekt, das Optionen für zusätzliche Anpassungen unseres Dreiecks bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts ändern, die mit der Eigenschaft skewX zusammenhängen.

Optionstaste

skewX< strong> – Diese Eigenschaft akzeptiert einen Zahlenwert, der den Neigungswinkel des Objekts entlang der x-Achse bestimmt.

Beispiel 1

Wenn das skewX-Attribut nicht angewendet wird

< ;p> Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Dreiecksobjekt aussieht, wenn die skewX-Eigenschaft nicht angewendet wird. In diesem Fall wird unser Dreiecksobjekt in keinem Winkel geneigt.
<!DOCTYPE html> Die chinesische Übersetzung von <html> Die chinesische Übersetzung von <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> Die chinesische Übersetzung von </head> Die chinesische Übersetzung von <body> <h2>Wenn das skewX-Attribut nicht angewendet wird</h2> <p>Standardmäßig können Sie sehen, dass das Dreieck in keinem Winkel geneigt ist</p> <canvas id="canvas"></canvas> Die chinesische Übersetzung von <script> ist: <script> // Eine Canvas-Instanz initialisieren var canvas = new fabric.Canvas("canvas"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Ein Dreiecksobjekt initialisieren var Triangle = neuer Stoff.Triangle({ links: 120, oben: 70, Breite: 90, Höhe: 80, füllen: „#b7410e“， Strich: „#f5deb3“, (Hinweis: Dies ist ein Teil des HTML-Codes, der ein Leerzeichen darstellt.) Strichbreite: 7, }); //Füge es der Leinwand hinzu Canvas.add(dreieck); </script> Die chinesische Übersetzung von </body> ist: </body> </html>
Nach dem Login kopieren
Beispiel 2
Geben Sie skewX ein und weisen Sie ihm einen benutzerdefinierten Wert zu.
In diesem Beispiel sehen wir, wie der Eigenschaft skewX ein numerischer Wert zugewiesen wird. Der übergebene Wert bestimmt den Grad der Neigung entlang der X-Achse.
<!DOCTYPE html> Die chinesische Übersetzung von <html> Die chinesische Übersetzung von <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> Die chinesische Übersetzung von </head> Die chinesische Übersetzung von <body> <h2>Übergabe von skewX als Schlüssel und Zuweisung eines benutzerdefinierten Werts</h2> <p>Sie können sehen, dass das Dreieck um die x-Achse in einem Winkel von 50 Grad geneigt ist.</p> <canvas id="canvas"></canvas> Die chinesische Übersetzung von <script> ist: <script> // Eine Canvas-Instanz initialisieren var canvas = new fabric.Canvas("canvas"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Ein Dreiecksobjekt initialisieren var Triangle = neuer Stoff.Triangle({ links: 120, oben: 70, Breite: 90, Höhe: 80, füllen: „#b7410e“， Strich: „#f5deb3“, (Hinweis: Dies ist ein Teil des HTML-Codes, der ein Leerzeichen darstellt.) Strichbreite: 7, SkewX: 50, }); //Füge es der Leinwand hinzu Canvas.add(dreieck); </script> Die chinesische Übersetzung von </body> ist: </body> Die chinesische Übersetzung von </html>
Nach dem Login kopieren
lautet:
Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS den Neigungswinkel eines Dreiecks auf der x-Achse ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!