Fabric.js Text borderDashArray Propiedad

En este artículo, vamos a ver cómo cambiar el borderDashArray 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 patrón de guiones del borde del texto del lienzo usando la propiedad borderDashArray .

Sintaxis:

fabric.Text(text,
   borderDashArray: Array
); 

Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • borderDashArray: este parámetro define el patrón de guiones del borde.

A continuación se muestra el ejemplo que ilustra el uso de la propiedad borderDashArray en Fabric.js :

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
<head>
<!-- Loading the FabricJS library -->
  <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 | Text borderDashArray Property
    </b>
  </div>
  <div style="text-align: center;">
    <canvas id="canvas"
            width="400" height="200"
      style="border:1px solid green;">
    </canvas>
  </div>
  <script>
    // Create a new instance of Canvas
    var canvas = new fabric.Canvas("canvas");
 
    // Create a new Text instance
    var geek = new fabric.Text('GeeksforGeeks', {
        borderDashArray: [5]
    });
 
    // Render the text on Canvas
    canvas.add(geek);
    canvas.centerObject(geek);
  </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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *