Heim >Web-Frontend >js-Tutorial >Wie sperre ich die Drehung eines Dreiecks mit FabricJS?

Wie sperre ich die Drehung eines Dreiecks mit FabricJS?

王林nach vorne: 2023-09-18 13:21:10786Durchsuche

如何使用 FabricJS 锁定三角形的旋转？

In diesem Tutorial lernen wir, wie man die Drehung eines Dreiecks mit FabricJS sperrt. So wie wir die Position, Farbe, Deckkraft und Größe eines Dreiecksobjekts auf der Leinwand festlegen können, können wir auch festlegen, ob es gedreht wird. Dies kann mit dem Attribut lockRotation erfolgen.

Syntax

new fabric.Triangle({ lockRotation : 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 lockRotation ändern.

Option Key

lockRotation – Diese Eigenschaft akzeptiert einen Boolean-Wert. Wenn wir ihm einen „wahren“ Wert geben, wird die Objektdrehung gesperrt.

Beispiel 1

Standardverhalten von Dreiecksobjekten im Canvas

Sehen wir uns ein Codebeispiel an, um das Standardverhalten von Dreiecksobjekten zu verstehen, wenn das Attribut lockRotation nicht verwendet wird. Standardmäßig können wir Dreiecksobjekte gegen den Uhrzeigersinn oder im Uhrzeigersinn drehen.

<!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 behaviour of a Triangle object in the canvas</h2>
   <p>You can select triangle and try rotating it to see the default behavior.</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: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Beispiel 2

Übergeben von lockRotation als Schlüssel mit dem Wert „true“

In diesem Beispiel werden wir sehen, wie wir die lockRotation-Eigenschaft verwenden können, um die Drehung eines Dreiecksobjekts zu stoppen . Wie wir sehen können, wird der unzulässige Cursor angezeigt, sobald wir versuchen, das Dreiecksobjekt zu drehen. Dies bedeutet, dass Rotationsvorgänge nicht mehr zulässig sind.

<!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 lockRotation as key with &#39;true&#39; value</h2>
   <p>You can see that you are no longer allowed to rotate the triangle.</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: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         lockRotation: true,
      });

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

Das obige ist der detaillierte Inhalt vonWie sperre ich die Drehung eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 ul

Stellungnahme：

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

Vorheriger Artikel：Erstellen Sie benutzerdefinierte Module in Node.jsNächster Artikel：Erstellen Sie benutzerdefinierte Module in Node.js

In Verbindung stehende Artikel

Mehr sehen