Fabric.js es una biblioteca de JavaScript que se utiliza para trabajar con lienzo. El lienzo pertenece a la clase de Fabric.js que se utiliza para crear instancias de imágenes. La imagen del lienzo significa que la imagen es móvil y se puede estirar según los requisitos. En este artículo, usaremos la propiedad imageSmoothing en una imagen de lienzo que se ha usado para definir si la imagen debe usarse o no.
Enfoque : primero importe la biblioteca fabric.js . Después de importar la biblioteca, cree un bloque de lienzo en la etiqueta del cuerpo que contendrá la imagen. Después de esto, inicialice una instancia de la clase canvas e image proporcionada por Fabric.js y use la propiedad imageSmoothing . Después de esto, renderice la imagen en el lienzo.
Sintaxis :
fabric.Image(image, {
imageSmoothing: boolean
});
Parámetros: Esta función toma un solo parámetro como se mencionó anteriormente y se describe a continuación.
- imageSmoothing: este parámetro toma un valor booleano cuando es verdadero, lo que significa que el lienzo usará la imagen suave.
Ejemplo : este ejemplo usa FabricJS para establecer la propiedad imageSmoothing de la imagen del lienzo como se muestra en el siguiente ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Image imageSmoothing Property
</b>
<canvas id="canvas" width="400" height="300"
style="border:2px solid #000000">
</canvas>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="100" height="100" id="my-image"
style="display: none;">
<br>
<script>
// Creating the instance of canvas object
var canvas = new fabric.Canvas("canvas");
// Getting the image
var img = document.getElementById('my-image');
// Creating the image instance
var geeks = new fabric.Image(img, {
imageSmoothing : true
});
canvas.add(geeks);
canvas.centerObject(geeks);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por dheerchanana08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA