En este artículo, vamos a ver cómo cambiar el subíndice del lienzo de texto usando Fabric.js . El lienzo significa que el texto escrito es móvil, giratorio, de tamaño variable y se puede estirar. Además, el texto en sí no se puede editar como un cuadro de texto.
Enfoque: para que sea posible, vamos a utilizar una biblioteca de JavaScript llamada Fabric.js. Después de importar la biblioteca usando CDN, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá nuestro texto. Después de esto, inicializaremos las instancias de Canvas y Text proporcionadas por Fabric.js y estableceremos el subíndice del texto del lienzo usando la propiedad de subíndice .
Sintaxis:
fabric.Text(text, subscript: Object );
Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- subíndice: Define el Objeto en base al cual se definirá el subíndice.
A continuación se muestra el ejemplo que ilustra el uso de la propiedad de subíndice en Fabric.js :
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://github.com/denim2x/fabric.js/releases/download/v2.0.0-beta.6/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;
width: 400px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Text superscript Property
</b>
</div>
<canvas id="stage"
width="300" height="200"
style="border:1px solid green;">
</canvas>
<script>
var canvas = new fabric.Canvas(stage);
var text = new fabric.Text(
'GeeksforGeeks.',
{ fontSize: 20, fontFamily: 'Verdana' }
);
canvas.add(text);
canvas.centerObject(text);
text.setSelectionStyles('subscript', 5, 8);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA