Wie drehe ich ein Dreieck mit FabricJS vertikal um?-js-Tutorial-php.cn

Wie drehe ich ein Dreieck mit FabricJS vertikal um?

王林

Freigeben： 2023-08-23 20:29:13

nach vorne

1107 Leute haben es durchsucht

如何使用 FabricJS 垂直翻转三角形？

In diesem Tutorial lernen wir, wie man mit FabricJS ein Dreieckobjekt vertikal spiegeln kann. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipY können wir das Dreiecksobjekt vertikal spiegeln.

Syntax

new fabric.Triangle({ flipY: Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional)− Dieser Parameter ist ein Objekt< /em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen flipY ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

< /ul>
Optionsschlüssel
flipY – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, das Objekt vertikal zu spiegeln.
Beispiel 1
FlipY als Schlüssel mit dem Wert „false“ übergeben
Sehen wir uns ein Codebeispiel an, das uns die Standardausrichtung von Dreiecksobjekten in FabricJS zeigt. Da wir der Eigenschaft flipY einen False-Wert übergeben haben, wird das Dreiecksobjekt nicht vertikal gespiegelt.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing flipY as key with a 'false' value</h2> <p>You can see that the triangle object has not been flipped vertically.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 75, top: 45, width: 180, height: 109, stroke: "#e3f988", strokeWidth: 5, flipY: false, }); // Create gradient fill triangle.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 0, y2: 100 }, colorStops: [ { offset: 0, color: "#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Übergabe der FlipY-Eigenschaft als Schlüssel mit dem Wert „true“
In diesem Beispiel haben wir ein Dreiecksobjekt mit einer Breite von 180 Pixel und einer Höhe von 109 Pixel mit einer vertikalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft flipY auf das Dreieckobjekt anwenden, wird es vertikal gespiegelt, sodass wir auch das gespiegelte Dreieck sehen.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing the flipY property as key with a 'true' value</h2> <p>You can see that the triangle object has been flipped vertically</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 75, top: 45, width: 180, height: 109, stroke: "#e3f988", strokeWidth: 5, flipY: true, }); // Create gradient fill triangle.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 0, y2: 100 }, colorStops: [ { offset: 0, color:"#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie drehe ich ein Dreieck mit FabricJS vertikal um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!