In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Position einer Ellipse von links festlegen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu. Wir können das Ellipsenobjekt manipulieren, indem wir seine Position, Deckkraft, Kontur und Größe ändern. Die Position von links kann mit dem Attribut left geändert werden.
new fabric.Ellipse( { left: Number }: Object)Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften zu ändern, die dem Objekt zugeordnet sind, dessen linke Eigenschaft die Eigenschaft ist.
left – Diese Eigenschaft akzeptiert eine Zahl, die die linke Position des Objekts festlegt. Dieser Wert bestimmt, wie weit links das Objekt platziert wird.
Standardposition des Ellipsenobjekts
Lassen Sie uns ein Beispiel durchgehen, um die Standardposition des Ellipsenobjekts auf der Leinwand zu verstehen, wenn seine Position nicht geändert wird.
<!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>Setting the position of an Ellipse from left using FabricJS</h2>
<p>This is the default position, as we have not used the <b>left</b> property. </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({
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>Übergabe des Attributs left als Schlüssel
In diesem Beispiel weisen wir dem Attribut left einen benutzerdefinierten Wert zu. Da es Zahlen akzeptiert, müssen Sie ihm einen numerischen Wert zuweisen, der seine Position von links darstellt.
<!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 set the position of Ellipse from left using FabricJS?</h2>
<p>Notice that the circle is placed 135px away from the left, since we have used the <b>left</b> property with a custom value.</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: 135,
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>Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Position einer Ellipse von links ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So lassen Sie PPT-Bilder einzeln erscheinen
So verwenden Sie die Fit-Funktion in Python
Was sind die vier wichtigsten IO-Modelle in Java?
Die Rolle des Formatfactory-Tools
Zu welchem Unternehmen gehört das Android-System?
Excel-Duplikatfilter-Farbmarkierung
Einführung in häufig verwendete Top-Level-Domain-Namen
Verwendung von while
