Heim > Artikel > Web-Frontend > Wie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?

Wie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?

WBOYnach vorne: 2023-09-15 15:33:081132Durchsuche

如何使用 FabricJS 禁用三角形的中心缩放？

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Skalierung eines Dreiecks mit FabricJS deaktivieren. 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.

Wenn Sie ein Objekt über ein Steuerelement skalieren, weisen Sie der Eigenschaft „centeredScaling“ einen wahren Wert zu, und der Ursprung der Transformation ist sein Mittelpunkt.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredScaling ändern.

Optionsschlüssel

centeredScaling – Diese Eigenschaft akzeptiert einen booleschen-Wert und ermöglicht uns zu steuern, ob das Objekt seinen Mittelpunkt als Transformationsursprung verwenden soll.

Beispiel 1

Übergeben Sie centeredScaling als Schlüssel und weisen Sie ihm einen „wahren“ Wert zu

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich ein Dreiecksobjekt verhält, wenn die Eigenschaft „centeredScaling“ aktiviert ist. Wenn wir ein Objekt vergrößern, ist der Ursprung der Transformation der Mittelpunkt des Dreiecks.

<!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 centeredScaling as key and assigning it a "true" value</h2>
   <p>Try scaling the triangle to see that it is using its center as the center of transformation.</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
         centeredScaling: true,
      });

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

Beispiel 2

Deaktivieren des Attributs „centeredScaling“

Wir können das Attribut centeredScaling deaktivieren, indem wir ihm einen False-Wert zuweisen. Dadurch wird der Mittelpunkt des Dreiecks nicht mehr als Mittelpunkt der Transformation verwendet. Hier ist ein Codebeispiel zur Demonstration von

<!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>Disabling the centeredScaling property</h2>
   <p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#5f9ea0",
      centeredScaling: false,
      });

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

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Mittenskalierung von Dreiecken mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 ul fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Seitensprache mit JavaScript?Nächster Artikel：Wie ändere ich die Seitensprache mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen