简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie stelle ich mit FabricJS den Neigungswinkel eines Dreiecks auf der x-Achse ein?

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

WBOY
WBOYnach vorne
2023-09-05 22:37:12821Durchsuche

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 )

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 – 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>
<!-- Fabric JS-Bibliothek hinzufügen -->
<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>

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>
<!-- Fabric JS-Bibliothek hinzufügen -->
<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>
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!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie konvertiere ich ein 2D-Array in eine CSV-Zeichenfolge in JavaScript?Nächster Artikel：Wie konvertiere ich ein 2D-Array in eine CSV-Zeichenfolge in JavaScript?

In Verbindung stehende Artikel

Mehr sehen