Maison > Article > interface Web > Comment redresser un objet Image à l'aide de FabricJS ?
Comment redresser un objet Image à l'aide de FabricJS ?
- WBOYavant
- 2023-09-14 16:53:021400parcourir
Dans ce tutoriel, nous apprendrons comment redresserdes objets image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit d'un Éléments de base de FabricJS, nous pouvons également le personnaliser facilement via l'application Propriétés telles que l'angle, l'opacité, etc. Pour redresser les objets image que nous utilisons LissageMéthode.
Grammaire
straighten(): fabric.Object
Passez la valeur à la propriété d'angle sans utiliser redresser Méthode
Exemple
Regardons un exemple de code pour voir à quoi ressemble notre objet Image lorsque redresse La méthode n’est pas utilisée. La méthode redresser redresser fonctionne en faisant pivoter un objet à partir de sa position L'angle actuel est de 0, 90, 180 ou 270, etc., selon l'angle le plus proche. angle La propriété définit l'angle de rotation de l'objet en degrés. Nous précisons ici L'angle est de 45. Mais comme nous n'avons pas appliqué l'attribut redresser, l'angle de rotation Il restera 45 degrés.
<!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>
Passing the angle property a value without using the straighten method
</h2>
<p>You can see that the Image object has an angle of 45 degrees</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<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,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Utilisation de la méthode redresser
Exemple
Regardons un exemple de code pour voir à quoi ressemble un objet Image lorsque redresse Méthode utilisée conjointement avec la propriété angle. Bien que nous ayons fixé l'angle Tourné à 45 degrés, notre objet image sera redressé en le faisant revenir à 0 degré car nous avons utilisé la méthode de redressement.
<!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 straighten method</h2>
<p>
You can see that the angle of rotation is 0 degree for the image object
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<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,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!