Fabric.js es una biblioteca de JavaScript que se utiliza para trabajar con lienzo. El lienzo Itext es una de las clases de Fabric.js que se utiliza para crear instancias de Itext. El Itext en Fabric.js es móvil y se puede estirar según los requisitos. En este artículo, usaremos la propiedad hoverCursor para diseñar el cursor en un Itext 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á el Itext. Después de esto, inicialice una instancia de la clase Canvas e Itext proporcionada por Fabric.js, use la propiedad hoverCursor para diseñar el cursor y represente el Itext en el lienzo.
Sintaxis :
fabric.Itext(Itext, {
hoverCursor : string
});
Parámetros : esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- hoverCursor: Especifica el estilo del cursor.
Ejemplo : este ejemplo usa Fabric.js para establecer la propiedad hoverCursor del lienzo Itext como se muestra en el siguiente ejemplo:
HTML
<html>
<head>
<!-- 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: 400px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Itext hoverCursor Property
</b>
</div>
<div style="text-align: center;">
<canvas id="canvas" width="400" height="200"
style="border:1px solid green;">
</canvas>
</div>
<script>
var canvas =
new fabric.Canvas("canvas");
var geek =
new fabric.IText('GeeksforGeeks', {
hoverCursor : 'pointer'
});
console.log(geek.willDrawShadow())
canvas.add(geek);
canvas.centerObject(geek);
</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