Heim > Artikel > Web-Frontend > Wie sperre ich die horizontale Neigung von Ellipse mit FabricJS?
Wie sperre ich die horizontale Neigung von Ellipse mit FabricJS?
- PHPznach vorne
- 2023-09-14 12:49:02756Durchsuche
In diesem Tutorial erfahren Sie, wie Sie die horizontale Neigung einer Ellipse mit FabricJS sperren. So wie wir die Position, Farbe, Deckkraft und Größe des elliptischen Objekts auf der Leinwand festlegen können, können wir auch festlegen, ob die horizontale Neigung des Objekts gestoppt werden soll. Dies kann mit dem Attribut lockSkewingX erfolgen.
Syntax
new fabric.Ellipse({ lockSkewingX : Boolean }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft lockSkewingX ist.
Optionsschlüssel
lockSkewingX – Diese Eigenschaft akzeptiert einen Boolean强>-Wert. Wenn wir ihm einen „wahren“ Wert geben, wird die horizontale Neigung des Objekts gesperrt.
Beispiel 1
Standardverhalten von Ellipse Object in Canvas
Lassen Sie uns ein Beispiel durchgehen, um das Standardverhalten des Ellipse-Objekts zu verstehen, wenn die Eigenschaft lockSkewingX nicht verwendet wird. Sie können ein Objekt horizontal und vertikal neigen, indem Sie die Umschalttaste gedrückt halten und horizontal oder vertikal ziehen.
<!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>Locking the horizontal skewing of Ellipse using FabricJS</h2>
<p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. 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: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Übergeben von lockSkewingX als Schlüssel mit dem Wert „true“
In diesem Beispiel werden wir sehen, wie wir die lockSkewingX-Eigenschaft verwenden können, um die Fähigkeit eines Ellipse-Objekts, sich horizontal zu neigen, zu stoppen. Während wir ein Ellipsenobjekt vertikal neigen können, dürfen wir den gleichen Vorgang horizontal nicht ausführen.
<!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 lock the horizontal skewing of Ellipse using FabricJS?</h2>
<p>Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set <b>lockSkewingX</b> to True. </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: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
lockSkewingX: true,
});
// 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 sperre ich die horizontale Neigung von Ellipse mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!