Tela.js | Propiedad Polygon lockUniScaling

En este artículo, vamos a ver cómo bloquear la escala no uniforme de un polígono de lienzo usando FabricJS para que se mantenga la relación de aspecto del objeto. 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 la escala no uniforme del polígono del lienzo usando la propiedad lockUniScaling y renderizaremos 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 }],
    {
                lockUniScaling: Boolean
    }
)

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

• lockUniScaling: Es un valor booleano que especifica si bloquear o no el escalado no uniforme.

Nota: Los píxeles de dimensión son imprescindibles para crear un polígono.

El siguiente ejemplo ilustra la propiedad Polygon lockUniScaling en JavaScript:

Ejemplo:

Producción: