Wie stelle ich den vertikalen Skalierungsfaktor eines Rechtecks mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich den vertikalen Skalierungsfaktor eines Rechtecks mit FabricJS ein?

王林

Freigeben： 2023-08-25 12:25:09

nach vorne

1338 Leute haben es durchsucht

Wie stelle ich den vertikalen Skalierungsfaktor eines Rechtecks mit FabricJS ein?

In diesem Tutorial lernen wir, wie man den vertikalen Skalierungsfaktor eines Rechtecks einstellt Verwenden Sie FabricJS. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. für Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und diese hinzufügen auf die Leinwand.

So wie wir die Position, Farbe, Deckkraft und Größe des rechteckigen Objekts festlegen können Im Canvas können wir auch die vertikale Skalierung des rechteckigen Objekts festlegen. das kann gemacht werden Durch die Verwendung des Attributs „scaleY“.

Syntax

new fabric.Rect({ scaleY : Number }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mithilfe dieses Parameters können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt mit dem Attribut „scaleY“ beziehen.

Optionsschlüssel

scaleY – Diese Eigenschaft akzeptiert einen numerischen Wert. Der zugewiesene Wert bestimmt den vertikalen Objektskalierungsfaktor. Der Standardwert ist 1.

Beispiel 1

Standarddarstellung, wenn scaleY nicht verwendet wird

Sehen wir uns ein Codebeispiel an, wenn Das Attribut scaleY wird nicht verwendet. Standardmäßig beträgt der vertikale Skalierungsfaktor eines rechteckigen Objekts 1.scaleY bestimmt die Transformation, die die Größe des Objekts entlang der Y-Achse ändert.

<!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>Default appearance when scaleY is not used</h2>
   <p>You can see that there is no scaling along the Y-axis</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe des Attributs „scaleY“ als SchlüsselIn diesem Beispiel übergeben wir das Attribut „scaleY“ als Schlüssel mit dem Wert 2. Das Gibt an, dass der Skalierungsfaktor des rechteckigen Objekts in vertikaler Richtung verdoppelt wird.

<!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 scaleY property as key</h2>
   <p>You can see that the object&rsquo;s height has been doubled</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         scaleY: 2,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich den vertikalen Skalierungsfaktor eines Rechtecks mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!