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:061138Durchsuche
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!