
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
1 | straighten(): fabric.Object
|
Copier après la connexion
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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>
var canvas = new fabric.Canvas( "canvas" );
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
var imageElement = document.getElementById( "img1" );
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
angle: 45,
});
canvas.add(image);
</script>
</body>
</html>
|
Copier après la connexion
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!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>
var canvas = new fabric.Canvas( "canvas" );
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
var imageElement = document.getElementById( "img1" );
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
angle: 45,
});
canvas.add(image);
image.straighten();
</script>
</body>
</html>
|
Copier après la connexion
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!