Heim > Artikel > Web-Frontend > Wie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?
Wie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?
- WBOYnach vorne
- 2023-09-01 10:57:071350Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den vertikalen Skalierungsfaktor eines Kreises festlegen. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. So wie wir die Position, Farbe, Deckkraft und Größe eines kreisförmigen Objekts innerhalb der Leinwand festlegen können, können wir auch die vertikale Skalierung des kreisförmigen Objekts festlegen. Dies kann mit dem Attribut scaleY erfolgen.
Syntax
new fabric.Circle({ scaleY : Number }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Kreis zusätzliche Anpassungen ermöglicht. Mithilfe dieses Parameters können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften im Zusammenhang mit dem Objekt mit dem Attribut „scaleY“ ändern.
Optionsschlüssel
scaleY – Diese Eigenschaft akzeptiert einen numerischen Wert. Der zugewiesene Wert bestimmt den vertikalen Objektskalierungsfaktor. Der Standardwert ist 1.
Beispiel 1
Standarddarstellung, wenn ScaleY nicht verwendet wird
Sehen wir uns ein Beispiel an, das das Erscheinungsbild eines kreisförmigen Objekts zeigt, wenn das Attribut scaleY nicht verwendet wird. Standardmäßig haben kreisförmige Objekte einen vertikalen Skalierungsfaktor von 1. scaleY Bestimmt die Transformation, die die Größe des Objekts entlang der Y-Achse ändert.
<!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 vertical scale factor of a Circle using FabricJS</h2>
<p>Notice the vertical scale factor of the circle. Here we have not used the <b>scaleY</b> property, but by default, it is set to 1. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
padding: 7,
radius: 50,
fill: "#85bb65"
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Übergabe der scaleY-Eigenschaft als Schlüssel
In diesem Beispiel übergeben wir diescaleY-Eigenschaft als Schlüssel mit dem Wert 2. Dies bedeutet, dass der Skalierungsfaktor kreisförmiger Objekte in vertikaler Richtung verdoppelt 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 vertical scale factor of a Circle using FabricJS</h2>
<p>Notice the vertical scale factor of the circle. Here we have set <b>scaleY</b> at 2, so the object appears elongated on the Y-axis. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
padding: 7,
radius: 50,
fill: "#85bb65",
scaleY: 2
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!