In diesem Tutorial erfahren Sie, wie Sie die zentrierte Drehung eines Rechtecks mithilfe von FabricJS deaktivieren. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Standardmäßig verwenden alle Objekte in FabricJS ihren Mittelpunkt als Drehpunkt. Wir können dieses Verhalten jedoch mithilfe des Attributs centeredRotation ändern.
new fabric.Rect({ centeredRotation: Boolean }: Object)Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck 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 centeredRotation ändern.
centeredRotation – Diese Eigenschaft akzeptiert einen Boolean-Wert, mit dem wir steuern können, ob der Mittelpunkt als Transformationsursprung verwendet werden soll, wenn sich das Objekt dreht. Der Standardwert ist True.
Standardverhalten der Rechteckrotation in FabricJS
< p>Sehen wir uns ein Codebeispiel an, das das Standardverhalten eines Rechteckobjekts beschreibt. Da die Eigenschaft „centeredRotation“ standardmäßig auf „true“ gesetzt ist, verwendet das rechteckige Objekt seinen Mittelpunkt als Drehpunkt.<!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 rotation of Rectangle in FabricJS</h2>
<p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is 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: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Da wir nun das Standardverhalten gesehen haben, werfen wir einen Blick auf ein Codebeispiel, um zu verstehen, was passiert, wenn Sie der „centeredRotation“ einen False-Wert zuweisen Eigentum.
<!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 centeredRotation key with the value as “false”</h2>
<p>Click on the rectangle and rotate it to see the changed center of rotation</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: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
centeredRotation: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Mittendrehung eines Rechtecks 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)
