Fabric.js es una biblioteca de JavaScript que se utiliza para trabajar con lienzo. La imagen del 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 moveCursor se usa para establecer el estilo del cursor mientras se mueve en una imagen de lienzo.
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 de imagen y lienzo proporcionada por Fabric.js y use la propiedad moveCursor para establecer el estilo del cursor mientras se mueve. Después de esto, renderice la imagen en el lienzo.
Sintaxis :
fabric.Image(image, {
moveCursor : string
});
Parámetros : esta función toma un solo parámetro como se mencionó anteriormente y se describe a continuación.
- moveCursor : este parámetro toma un valor de string para especificar el estilo del cursor mientras se mueve.
Ejemplo : este ejemplo usa Fabric.js para establecer la propiedad moveCursor 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 moveCursor 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, {
moveCursor : 'pointer'
});
canvas.add(geeks);
canvas.centerObject(geeks);
</script>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por dheerchanana08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA