Heim > Artikel > Web-Frontend > Wie sperre ich die Drehung eines Rechtecks mit FabricJS?
Wie sperre ich die Drehung eines Rechtecks mit FabricJS?
- 王林nach vorne
- 2023-08-24 19:29:081192Durchsuche
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)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>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>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!