Tela.js | Triángulo centradoPropiedad de escala

En este artículo, vamos a ver cómo habilitar el escalado centrado del lienzo Triangle usando FabricJS . El triángulo de lona significa que el triángulo es móvil y se puede estirar según los requisitos. Además, el triángulo 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 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á el triángulo. Después de esto, inicializaremos instancias de Canvas y el triángulo proporcionado por FabricJS y habilitaremos la escala centrada del triángulo del lienzo usando la propiedad centeredscaling y representaremos el triángulo en el Canvas como se indica a continuación.

Sintaxis:  

fabric.Triangle({
    width: number,
    height: number,
    centeredscaling: boolean
});

Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:  

  • ancho: Especifica el ancho del triángulo.
  • altura: Especifica la altura del triángulo.
  • centeredScaling: este parámetro define si habilitar o deshabilitar el escalado centrado.

Ejemplo: este ejemplo usa FabricJS para habilitar la escala centrada del triángulo similar a un lienzo como se indica a continuación. Intente escalar el objeto después de habilitar el escalado centrado, se escalará desde todos los lados cuando lo escale.  

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Fabric.js | Triangle centeredScaling Property
    </title>
     
    <!-- Adding 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 | Triangle centeredScaling 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 triangle instance
        var triangle = new fabric.Triangle({
                        width: 150,
                        height: 100,
                        fill: '',
                        stroke: 'green',
                        strokeWidth: 3,
                        cornerColor: 'blue',
                        centeredScaling: true
        });
 
        // Render the triangle in canvas
        canvas.add(triangle);
        canvas.centerObject(triangle);
    </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 *