Heim > Artikel > Web-Frontend > Wie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?
Wie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?
- PHPznach vorne
- 2023-08-27 23:13:08942Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Objektskalierungsfaktor von Text ermitteln. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Wir können den Objektskalierungsfaktor auch mit der Methode getObjectScaling ermitteln.
Grammatik
getObjectScaling()
Beispiel 1
Verwenden Sie die getObjectscaling-Methode
Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getObjectScaling-Methode zu sehen. In diesem Fall werden in der Konsole die Standardwerte für ScaleX und ScaleY von 1 angezeigt.
<!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>Using the getObjectScaling method</h2>
<p>You can open console from dev tools and see that the logged value is being displayed in the console</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sampletext here", {
width: 300,
fill: "green",
fontWeight: "bold",
});
// Add it to the canvas
canvas.add(text);
// Using getObjectScaling method
console.log("The scale factor is", text.getObjectScaling());
</script>
</body>
</html>
Beispiel 2
Verwenden Sie die getObjectScaling-Methode und übergeben Sie die ScaleX-Eigenschaft
Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode getObjectScaling in Verbindung mit der Eigenschaft scaleX verwendet wird. In diesem Fall scheint der ScaleX-Wert des Textobjekts 2 zu sein, während der ScaleY-Wert unverändert bleibt.
<!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>Using the getObjectScaling method and passing the scaleX property</h2>
<p>You can open console from dev tools and see that the logged value is being displayed in the console </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a text object
var text = new fabric.Text("Add sampletext here", {
width: 300,
fill: "green",
fontWeight: "bold",
scaleX: 2,
});
// Add it to the canvas
canvas.add(text);
// Using getObjectScaling method
console.log("The scale factor is", text.getObjectScaling());
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie erhalte ich den Objektskalierungsfaktor von Text mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!