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

Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?

WBOY
Freigeben: 2023-09-16 09:41:06
nach vorne
1215 Leute haben es durchsucht

Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?

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)
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ü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>
Nach dem Login kopieren

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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage