In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den horizontalen und vertikalen Radius einer Ellipse festlegen. 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. Wir können das Ellipsenobjekt anpassen, indem wir seine Position, Farbe, Deckkraft und Größe angeben. Die wichtigsten Eigenschaften sind jedoch rx und ry, mit denen wir die horizontalen und vertikalen Radien der Ellipse angeben können.
new fabric.Ellipse({ rx : Number, ry: Number }: Object)Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter ist es möglich, die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit Objekten mit den Eigenschaften rx und ry zu ändern.
rx – Diese Eigenschaft akzeptiert einen < em>numerischen Wert. Der zugewiesene Wert bestimmt den horizontalen Radius des Ellipsenobjekts.
ry – Diese Eigenschaft akzeptiert einen < em>numerischen Wert. Der zugewiesene Wert bestimmt den vertikalen Radius des Ellipsenobjekts.
rx und ry nicht verwendet werden
Der folgende Code zeigt, wie ein Ellipsenobjekt angezeigt wird, wenn die Eigenschaften rx und ry nicht verwendet werden. In diesem Beispiel können wir sehen, dass wir eine Füllfarbe verwendet haben, um die Ellipse zu erkennen, die unsichtbar ist, weil wir ihr keinen horizontalen und vertikalen Radius zugewiesen haben.
<!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 horizontal and vertical radius of an Ellipse using FabricJS</h2>
<p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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: "red",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Übergeben der Attribute rx und ry als Schlüssel
In diesem Beispiel übergeben wir die Werte 100 und 70 an die Attribute rx bzw. ry. Unser Ellipsenobjekt hat also einen horizontalen Radius von 100 Pixeln und einen vertikalen Radius von 70 Pixeln.
<!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 horizontal and vertical radius of Ellipse using FabricJS?</h2>
<p>Here we have supplied the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. Hence we are getting an ellipse of a definite dimension. </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,
rx: 100,
ry: 70,
fill: "red",
});
// 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 den horizontalen und vertikalen Radius einer Ellipse ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
