Heim > Artikel > Web-Frontend > Wie deaktiviere ich die Mittendrehung der Ellipse mit FabricJS?
Wie deaktiviere ich die Mittendrehung der Ellipse mit FabricJS?
- WBOYnach vorne
- 2023-08-28 09:13:111085Durchsuche
In diesem Tutorial erfahren Sie, wie Sie die zentrierte Drehung einer Ellipse mit FabricJS deaktivieren. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-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.
Syntax
new fabric.Ellipse({ centeredRotation: Boolean }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredRotation ändern.
Optionstaste
centeredRotation – Diese Eigenschaft akzeptiert einen Booleschen em>-Wert, mit dem wir steuern können, ob das Objekt seinen Mittelpunkt als Transformationsursprung verwendet, wenn es durch das Steuerelement gedreht wird. Der Standardwert ist True.
Beispiel 1
Standardverhalten der Ellipsenrotation in FabricJS strong>
Sehen wir uns ein Beispiel an, das das Standardverhalten eines Ellipsenobjekts beschreibt. Da die Eigenschaft centeredRotation standardmäßig auf „true“ gesetzt ist, verwendet das Ellipsenobjekt 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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
<p>Select the object and rotate it. The ellipse will by default rotate around its center. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Übergabe des Schlüssels „centeredRotation“ mit dem Wert „false“
Da wir nun das Standardverhalten gesehen haben, werfen wir einen Blick auf den Code, um zu verstehen, was passiert, wenn der Eigenschaft „centeredRotation“ der Wert „ zugewiesen wird“ FALSCH" . Hier verwendet die Ellipse nicht mehr den Mittelpunkt der Ellipse als Rotationsursprung, sondern eine ihrer Seiten. <!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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
<p>Select the object and try to rotate it. The ellipse will not rotate around its center because we have set <b>centeredRotation</b> to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredRotation: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Mittendrehung der Ellipse mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!