In diesem Tutorial lernen wir, wie man die Drehung eines Dreiecks mit FabricJS sperrt. So wie wir die Position, Farbe, Deckkraft und Größe eines Dreiecksobjekts auf der Leinwand festlegen können, können wir auch festlegen, ob es gedreht wird. Dies kann mit dem Attribut lockRotation erfolgen.
new fabric.Triangle({ lockRotation : Boolean }: Object)Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut lockRotation ändern.
lockRotation – Diese Eigenschaft akzeptiert einen Boolean-Wert. Wenn wir ihm einen „wahren“ Wert geben, wird die Objektdrehung gesperrt.
Standardverhalten von Dreiecksobjekten im Canvas
Sehen wir uns ein Codebeispiel an, um das Standardverhalten von Dreiecksobjekten zu verstehen, wenn das Attribut lockRotation nicht verwendet wird. Standardmäßig können wir Dreiecksobjekte 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 Triangle object in the canvas</h2>
<p>You can select triangle and try rotating it to see the default behavior.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Übergeben von lockRotation als Schlüssel mit dem Wert „true“
In diesem Beispiel werden wir sehen, wie wir die lockRotation-Eigenschaft verwenden können, um die Drehung eines Dreiecksobjekts zu stoppen . Wie wir sehen können, wird der unzulässige Cursor angezeigt, sobald wir versuchen, das Dreiecksobjekt zu drehen. 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 'true' value</h2>
<p>You can see that you are no longer allowed to rotate the triangle.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
lockRotation: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie sperre ich die Drehung eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
