Heim > Artikel > Web-Frontend > Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?

Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?

WBOYnach vorne: 2023-09-16 09:41:061202Durchsuche

In diesem Tutorial lernen wir, wie man die vertikale Bewegung einer Linie mit FabricJS sperrt. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine fabric.Line-Instanz erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Wir können auch angeben, ob sich das Linienobjekt nur auf der X-Achse bewegen soll. Dies kann mit dem Attribut lockMovementY erfolgen.

Grammatik

new fabric.Line(points: Array, { lockMovementY: Boolean }: Object)

Parameter

Punkte – Dieser Parameter akzeptiert ein Array von Punkten, das die Werte (x1, y1) und (x2, y2) bestimmt, bei denen es sich um die x-Achsen- und y-Achsen-Koordinaten von Anfang und Ende handelt Punkte der Linie bzw.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Eigenschaft lockMovementY ist.

Wahltaste

lockMovementY – Diese Eigenschaft akzeptiert einen booleschen Wert. Wenn wir ihm einen „wahren“ Wert zuweisen, kann sich das Objekt nicht mehr vertikal bewegen.

Standardverhalten von Linienobjekten im Canvas

Beispiel

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie man ein Linienobjekt auf der X- oder Y-Achse frei bewegen kann, wenn der Eigenschaft lockMovementY kein „wahrer“ Wert zugewiesen ist.

<!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 Line object in the canvas</h2>
   <p>
      Drag the line object across the x-axis and y-axis to see that movement is allowed in both directions
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

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

Übergeben Sie lockMovementY als Schlüssel mit „wahrem“ Wert

Beispiel

In diesem Beispiel sehen wir, wie man die vertikale Bewegung eines Linienobjekts sperrt. Indem wir der Eigenschaft lockMovementY den Wert „wahr“ zuweisen, stoppen wir im Wesentlichen die vertikale Bewegung.

<!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 lockMovementY as key with ‘true’ value</h2>
   <p>
      Drag the line object across the x-axis and y-axis to see that movement is no longer allowed in the vertical direction
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         lockMovementY: true,
      });

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

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

Array 对象 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 kann man mit FabricJS ein Polygonobjekt auf Neigungsereignisse reagieren lassen?Nächster Artikel：Wie kann man mit FabricJS ein Polygonobjekt auf Neigungsereignisse reagieren lassen?

In Verbindung stehende Artikel

Mehr sehen