Wie sperre ich die Drehung eines Rechtecks mit FabricJS?-js-Tutorial-php.cn

Wie sperre ich die Drehung eines Rechtecks mit FabricJS?

王林

Freigeben： 2023-08-24 19:29:08

nach vorne

1224 Leute haben es durchsucht

Wie sperre ich die Drehung eines Rechtecks mit FabricJS?

In diesem Tutorial lernen wir, wie man die Drehung eines Rechtecks mit FabricJS sperrt. So wie wir die Position, Farbe, Deckkraft und Abmessungen eines rechteckigen Objekts innerhalb der Leinwand festlegen können, können wir auch festlegen, ob es gedreht wird. Dies kann mit dem lockRotation-Attribut erfolgen.

Syntax

new fabric.Rect({ lockRotation : Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck zusätzliche Anpassungen 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, für das lockRotation ein Attribut ist.

Optionsschlüssel

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

Beispiel 1

Standardverhalten von Rechteckobjekten im Canvas

Sehen wir uns ein Codebeispiel an, um das Standardverhalten eines Rechteckobjekts zu verstehen, wenn die lockRotation-Eigenschaft nicht verwendet wird. Standardmäßig können wir ein rechteckiges Objekt 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 Rectangle object in the canvas</h2>
   <p>You can try rotating the rectangle to see the default behaviour</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
      });

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

Nach dem Login kopieren

Beispiel 2

Übergabe von lockRotation als Schlüssel mit dem Wert „True“

In diesem Beispiel sehen wir, wie wir mithilfe der lockRotation-Eigenschaft die Funktionalität eines rechteckigen Objekts daran hindern, sich zu drehen. Wie wir sehen können, wird der Cursor angezeigt, sobald wir versuchen, das rechteckige Objekt zu drehen, was nicht zulässig ist. 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 a True value</h2>
   <p>Try rotating the object and you will see a not-allowed cursor on the rotate handle</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
         lockRotation: true,
      });

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

Nach dem Login kopieren

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