Web-Frontend
js-Tutorial
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?
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< 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>
<!-- 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 id="Wenn-das-skewX-Attribut-nicht-angewendet-wird">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 id="Übergabe-von-skewX-als-Schlüssel-und-Zuweisung-eines-benutzerdefinierten-Werts">Ü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>