Wie sperre ich die horizontale Neigung von Ellipse mit FabricJS?-js-Tutorial-php.cn

Wie sperre ich die horizontale Neigung von Ellipse mit FabricJS?

PHPz

Freigeben： 2023-09-14 12:49:02

nach vorne

818 Leute haben es durchsucht

如何使用 FabricJS 锁定 Ellipse 的水平倾斜？

In diesem Tutorial erfahren Sie, wie Sie die horizontale Neigung einer Ellipse mit FabricJS sperren. So wie wir die Position, Farbe, Deckkraft und Größe des elliptischen Objekts auf der Leinwand festlegen können, können wir auch festlegen, ob die horizontale Neigung des Objekts gestoppt werden soll. Dies kann mit dem Attribut lockSkewingX erfolgen.

Syntax

new fabric.Ellipse({ lockSkewingX : Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft lockSkewingX ist.

Optionsschlüssel

lockSkewingX – Diese Eigenschaft akzeptiert einen Boolean-Wert. Wenn wir ihm einen „wahren“ Wert geben, wird die horizontale Neigung des Objekts gesperrt.

Beispiel 1

Standardverhalten von Ellipse Object in Canvas

Lassen Sie uns ein Beispiel durchgehen, um das Standardverhalten des Ellipse-Objekts zu verstehen, wenn die Eigenschaft lockSkewingX nicht verwendet wird. Sie können ein Objekt horizontal und vertikal neigen, indem Sie die Umschalttaste gedrückt halten und horizontal oder vertikal ziehen.

<!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>Locking the horizontal skewing of Ellipse using FabricJS</h2>
      <p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. This is the default behavior.</p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

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

In diesem Beispiel werden wir sehen, wie wir die lockSkewingX-Eigenschaft verwenden können, um die Fähigkeit eines Ellipse-Objekts, sich horizontal zu neigen, zu stoppen. Während wir ein Ellipsenobjekt vertikal neigen können, dürfen wir den gleichen Vorgang horizontal nicht ausführen.

<!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>How to lock the horizontal skewing of Ellipse using FabricJS?</h2>
      <p>Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set <b>lockSkewingX</b> to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
            lockSkewingX: true,
         });
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

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