Propiedad Fabric.js Polygon lockScalingFlip

En este artículo, veremos cómo bloquear el volteo escalando un polígono de lienzo usando FabricJS para que no se pueda invertir tirando del ancho hacia el lado negativo. El polígono de lienzo significa que el polígono es móvil y se puede estirar según los requisitos. Además, el polígono 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.

Para hacerlo 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á el polígono. Después de esto, inicializaremos las instancias de Canvas y el polígono proporcionado por FabricJS y bloquearemos el volteo escalando el polígono usando la propiedad lockScalingFlip y representaremos el polígono en el Canvas como se muestra en el siguiente ejemplo.

Sintaxis: 

fabric.Polygon([ 
    { x: pixel, y: pixel }, 
    { x: pixel, y: pixel }, 
    { x: pixel, y: pixel}, 
    { x: pixel, y: pixel}, 
    { x: pixel, y: pixel }],
    {
         lockScalingFlip: boolean
    });

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

  • lockScalingFlip: Especifica si bloquear o no el flipping escalando.

Nota: Los píxeles de dimensión deben crear un polígono.

Los siguientes ejemplos ilustran la propiedad Fabric.JS Polygon lockScalingFlip en JavaScript:

Ejemplo 1:

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: 600px;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <b> 
        Fabric.js | Polygon lockScalingFlip Property 
    </b> 
    </div> 
    <canvas id="canvas"
            width="600"
            height="200"
            style="border:1px solid #000000;"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas"); 
  
        // Initiate a polygon instance 
        var polygon = new fabric.Polygon([ 
        { x: 295, y: 10 }, 
        { x: 235, y: 198 }, 
        { x: 385, y: 78}, 
        { x: 205, y: 78}, 
        { x: 355, y: 198 }], { 
            fill: 'green',
            lockScalingFlip: true
        }); 
  
        // Render the polygon in canvas 
        canvas.add(polygon); 
    </script> 
</body> 
  
</html>

Producción: 

Ejemplo 2:

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: 600px;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <b> 
        Fabric.js | Polygon lockScalingFlip Property 
    </b> 
    </div> 
    <canvas id="canvas"
            width="600"
            height="200"
            style="border:1px solid #000000;"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas"); 
  
        // Initiate a polygon instance 
        var polygon = new fabric.Polygon([ 
        { x: 295, y: 10 }, 
        { x: 235, y: 198 }, 
        { x: 385, y: 78}, 
        { x: 205, y: 78}, 
        { x: 355, y: 198 }], { 
            fill: 'green',
            lockScalingFlip: false
        }); 
  
        // Render the polygon in canvas 
        canvas.add(polygon); 
    </script> 
</body> 
  
</html>

Producción: 

Publicación traducida automáticamente

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