En este artículo, vamos a ver cómo configurar el ángulo de una imagen de lienzo usando FabricJS. El lienzo significa que la imagen es móvil y se puede estirar según los requisitos. Además, la imagen se puede personalizar en lo que respecta al ángulo, el ancho del trazo, el relleno, etc.
Para que esto sea posible, vamos a utilizar una biblioteca de JavaScript llamada FabricJS. Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá nuestra imagen. Además, crearemos un elemento img que contenga la imagen que se agregará dentro del lienzo y configuraremos el atributo de estilo para mostrar: ninguno; porque no queremos que la imagen sea visible fuera del lienzo. Después de esto, inicializaremos las instancias de Canvas e Image proporcionadas por FabricJS y renderizaremos la imagen en el lienzo y estableceremos el ángulo de la imagen del lienzo usando la propiedad de ángulo como se muestra en el ejemplo a continuación.
Sintaxis:
fabric.Image({
image,
angle: number
});
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- image: Especifica el objeto de la imagen.
- ángulo: Especifica el ángulo de la imagen en grados.
Ejemplo: este ejemplo usa FabricJS para establecer el ángulo de la imagen del lienzo.
<!DOCTYPE html>
<html>
<head>
<title>
Fabric.js | Image angle Property
</title>
<!-- FabricJS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Image angle Property
</b>
</div>
<div style="text-align: center;">
<canvas id="canvas" width="600" height="400"
style="border:1px solid #000000;">
</canvas>
</div>
<!-- Add the image to be used in the canvas and hide it here
because only need it inside the canvas -->
<img style="display: none;" src="https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
id="my-image" alt="">
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Get the image element
var image = document.getElementById('my-image');
// Initiate a Fabric instance
var fabricImage = new fabric.Image(image, {
angle: 30
});
// Add the image to canvas
canvas.add(fabricImage);
</script>
</body>
</html>
Producción: