Propiedad de escala centrada en la línea Fabric.js

FabricJS Además, la línea se puede personalizar en lo que respecta al color del trazo inicial, la altura, el ancho, el color de relleno o el ancho del trazo.

Sintaxis:

fabric.line({
    centeredScaling : Boolean
});

Enfoque: para que esto sea posible, vamos a utilizar una biblioteca de JavaScript llamada FabricJS . Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá la línea. Después de esto, inicializaremos las instancias de Canvas y la línea proporcionada por FabricJS y usaremos la propiedad centeredScaling , y representaremos la línea en Canvas como se indica a continuación.

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

  • centeredScaling: Especifica. Contiene un valor booleano.

Ejemplo 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
   </script> 
</head> 
  
<body> 
   <h1>fabric.js | line centeredScaling property</h1>
  
   <canvas id="canvas" width="600" height="200"
      style="border:1px solid #000000;"> 
   </canvas> 
     
   <script> 
      var canvas = new fabric.Canvas("canvas");
   
      var line = new fabric.Line([150, 10, 220, 150], { 
         stroke: 'green',
         centeredScaling : true
      }); 
   
      canvas.add(line); 
   </script> 
</body> 
  
</html> 

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
   </script> 
</head> 
  
<body> 
   <h1>fabric.js | line centeredScaling property</h1>
  
   <canvas id="canvas" width="600" height="200"
      style="border:1px solid #000000;"> 
   </canvas> 
     
   <script> 
      var canvas = new fabric.Canvas("canvas"); 
  
      var line = new fabric.Line([150, 10, 220, 150], { 
         stroke: 'green',
         centeredScaling : false
      }); 
   
      canvas.add(line); 
   </script> 
</body> 
  
</html> 

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 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 *