In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Objektskalierungsfaktor eines Bildes ermitteln. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um den Objektskalierungsfaktor eines Bildes zu erhalten, verwenden wir die Methode getObjectScaling.
getObjectScaling(): Object
getObjectScaling 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>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectScaling method
console.log("The scale factor is", image.getObjectScaling());
</script>
</body>
</html>
<!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>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
scaleX: 2,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectScaling method
console.log("The scale factor is", image.getObjectScaling());
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
