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

Wie stelle ich den horizontalen Skalierungsfaktor eines Kreises mit FabricJS ein?

王林

Freigeben： 2023-08-24 09:41:12

nach vorne

1238 Leute haben es durchsucht

如何使用 FabricJS 设置圆的水平比例因子？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den horizontalen Skalierungsfaktor eines Kreises festlegen. 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. So wie wir die Position, Farbe, Deckkraft und Größe eines kreisförmigen Objekts innerhalb der Leinwand festlegen können, können wir auch die horizontale Skalierung des kreisförmigen Objekts festlegen. Dies kann mit dem Attribut scaleX erfolgen.

Syntax

new fabric.Circle({ scaleX : Number }: 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 sich auf das Objekt beziehen, dessen Eigenschaft scaleX ist.

Optionsschlüssel

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

Beispiel 1

Standarddarstellung, wenn scaleX nicht verwendet wird

Sehen wir uns den Code an, der das Erscheinungsbild eines kreisförmigen Objekts anzeigt, wenn das Attribut scaleX nicht verwendet wird. Standardmäßig haben kreisförmige Objekte einen horizontalen Skalierungsfaktor von 1. ScaleX bestimmt die Transformation, die die Größe des Objekts entlang der X-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>Setting the horizontal scale factor of circle using FabricJS</h2>
      <p>This is the default horizontal scale factor. We have not used the <b>scaleX</b> property, but by default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe des Attributs scaleX als Schlüssel

In diesem Beispiel übergeben wir das Attribut scaleX als Schlüssel mit dem Wert 2. Dies bedeutet, dass der Skalierungsfaktor eines kreisförmigen Objekts in horizontaler 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>Setting the horizontal scale factor of circle using FabricJS</h2>
      <p>Notice the horizontal scale factor of the object. Here we have set <b>scaleX</b> at 2, so the object appears stretched in the horizontal direction. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            scaleX: 2,
            fill: "#85bb65"
         });
         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 stelle ich den horizontalen Skalierungsfaktor eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!