Heim > Artikel > Web-Frontend > Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?
Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?
- WBOYnach vorne
- 2023-08-24 15:05:07908Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Höhe einer Ellipse 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. Mit FabricJS können wir die Größe von Objekten mithilfe der Eigenschaften width und height steuern.
Syntax
new fabric.Ellipse({ height: Number }: 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 height die Eigenschaft ist.
Optionstaste
Height – Diese Eigenschaft akzeptiert Zahlen strong>, sodass wir die Höhe des Objekts angeben können. Der zugewiesene Wert bestimmt die Höhe.
Beispiel 1
heightStandardverhalten der Eigenschaft
Nehmen wir ein Beispiel, um das Standardverhalten der Eigenschaft height zu verstehen.
<!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 height of an Ellipse using FabricJS?</h2>
<p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</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({
left: 100,
top: 100,
fill: "white",
rx: 100,
ry: 60,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Übergabe der Eigenschaft height als Schlüssel
Da die Größe der Ellipse durch ihren horizontalen und vertikalen Radius bestimmt wird, ändert sich ihre Größe nicht.
<!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 height of an Ellipse using FabricJS?</h2>
<p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </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({
top: 100,
left: 100,
fill: "white",
rx: 100,
ry: 60,
height: 90,
stroke: "#c154c1",
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 die Höhe einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!