Home > Article > Web Front-end > How to straighten an image with animation using FabricJS?
How to straighten an image with animation using FabricJS?
- WBOYforward
- 2023-09-13 21:41:06894browse
In this tutorial we will learn how to use animation to straighten an image FabricJS. We can create an Image object by creating an instance of fabric.Image. since It is one of the basic elements of FabricJS and we can also customize it easily through the application Angle, opacity and other properties. To straighten the image with animation we use fxStraighten method.
grammar
fxStraighten(callbacks: Object): fabric.Object
parameter
callbacks - This parameter is an object with a callback function that can be used Change certain properties related to animation.
Use StraighteningMethod
Example
Let's look at a code example to see how an Image object is displayed when using the straighten method Used instead of fxstraighten. This will help us realize the difference between them. straighten The method just straighten rotates the object from the current angle to 0, 90,180, 270, etc. depending on which one is closer. However, fxstraighten applies to Same way, but with animation.
<!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 there is no animation but the image has been straightened
</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: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
UsefxstraightenMethod
Example
In this example, we used the fxstraighten method to straighten the image object and displays a simple animation. The image object has a 45 degree angle, Straighten by rotating back to 0 degrees. Apart from that, the onChange function is It is called at every step of the animation, and the onComplete function is only called at The animation is complete, which is why our image object ends up being scaled Move horizontally 1.5 times and left by a value of 130.
<!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 fxStraighten method</h2>
<p>
You can see that the image gets straightened while also displaying an animation
</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: 10,
left: 110,
skewX: 15,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using fxStraighten method
image.fxStraighten({
onChange() {
canvas.renderAll();
},
onComplete() {
image.set("left", 130);
image.set("scaleX", 1.5);
canvas.renderAll();
},
});
</script>
</body>
</html>
The above is the detailed content of How to straighten an image with animation using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!