Wie kann man mit FabricJS einen Kreis vertikal umdrehen?-js-Tutorial-php.cn

Wie kann man mit FabricJS einen Kreis vertikal umdrehen?

WBOY

Freigeben： 2023-08-24 12:29:02

nach vorne

998 Leute haben es durchsucht

如何使用 FabricJS 垂直翻转圆？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Kreisobjekt vertikal spiegeln. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipY können wir das kreisförmige Objekt vertikal spiegeln.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Eigenschaft flipY ist.

Option Key

flipY – Diese Eigenschaft akzeptiert einen booleschen Wert. Es ermöglicht uns, Objekte vertikal zu spiegeln.

Beispiel 1

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

Schauen wir uns ein Beispiel an, das uns die Standardausrichtung kreisförmiger Objekte in FabricJS zeigt. Da wir der Eigenschaft flipY einen falschen Wert übergeben haben, wird das kreisförmige Objekt nicht vertikal 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>How to flip a Circle vertically using FabricJS?</h2>
      <p>This is the default orientation of the object. We have set <b>flipY</b> as False, but even if we don&#39;t use it, <b>flipY</b> will be by default set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 50,
            fill: "green",
            radius: 80,
            stroke: "#228b22",
            strokeWidth: 2,
            flipY: false
         });

         // Create gradient fill
         circle.set("fill", new fabric.Gradient({
            type: "linear",
            coords: {
               x1: 0,
               y1: 0,
               x2: 0,
               y2: 50
            },
            colorStops: [{
               offset: 0,
               color: "red"
            }, {
               offset: 1,
               color: "green"
            }, ],
         }));

         // Adding them to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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 kreisförmiges Objekt mit einem Radius von 80 Pixeln und einer vertikalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft flipY auf das Kreisobjekt anwenden, wird es vertikal gespiegelt, sodass wir auch die Farbverlaufsumkehr 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>How to flip a Circle vertically using FabricJS?</h2>
      <p>Here observe that the circle has flipped vertically (see the gradient), as we have set <b>flipY</b> to True.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 50,
            fill: "green",
            radius: 80,
            stroke: "#228b22",
            strokeWidth: 2,
            flipY: true
         });

         // Create gradient fill
         circle.set("fill", new fabric.Gradient({
            type: "linear",
            coords: {
               x1: 0,
               y1: 0,
               x2: 0,
               y2: 50
            },
            colorStops: [{
               offset: 0,
               color: "red"
            }, {
               offset: 1,
               color: "green"
            }, ],
         }));

         // Adding them to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS einen Kreis vertikal umdrehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!