Heim > Web-Frontend > js-Tutorial > Wie drehe ich ein Dreieck mit FabricJS horizontal um?

Wie drehe ich ein Dreieck mit FabricJS horizontal um?

WBOY
Freigeben: 2023-09-14 18:09:06
nach vorne
1505 Leute haben es durchsucht

如何使用 FabricJS 水平翻转三角形?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Dreieckobjekt horizontal spiegeln. 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 flipX können wir das Dreieckobjekt horizontal spiegeln.

Syntax

new fabric.Triangle({ flipX: 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 wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen flipX ein Attribut ist.

  • < /ul>

    Optionstaste

    • flipX − Diese Eigenschaft akzeptiert einen booleschen -Wert, der es uns ermöglicht, das Objekt horizontal zu spiegeln.

    Beispiel 1

    Übergabe von flipX als Schlüssel mit dem Wert „false“

    Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung von Dreiecksobjekten in FabricJS zeigt. Da wir der Eigenschaft flipX einen False-Wert übergeben haben, wird das Dreiecksobjekt nicht horizontal gespiegelt.

    <!DOCTYPE html>
    <html>
    <head>
       <!-- Adding the Fabric JS Library-->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    </head>
    <body>
       <h2>Passing flipX as key with a &#39;False&#39; value</h2>
       <p>You can see that the triangle object has not been flipped horizontally</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,
             flipX: false,
          });
    
          // Create gradient fill
          triangle.set(
             "fill",
             new fabric.Gradient({
                type: "linear",
                coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
                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 des Attributs flipX 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 horizontalen lineare Farbverlaufsfüllung. Wenn wir die Eigenschaft flipX auf das Dreiecksobjekt anwenden, wird es horizontal gespiegelt, sodass wir auch den gespiegelten Farbverlauf sehen.

    <!DOCTYPE html>
    <html>
    <head>
       <!-- Adding the Fabric JS Library-->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    </head>
    <body>
       <h2>Passing the flipX property as key with a &#39;True&#39; value</h2>
       <p>You can see that the triangle has been flipped horizontally</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,
             flipX: true,
          });
          // Create gradient fill
          triangle.set( "fill", new fabric.Gradient({
             type: "linear", coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
             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 horizontal um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage