En este artículo, vamos a ver cómo establecer el límite de escala mínimo de un polígono de lienzo usando FabricJS para que el tamaño del polígono no se pueda reducir más allá de ese límite. 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 forma, 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 estableceremos el límite mínimo de escala del polígono usando la propiedad minScaleLimit 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 }],
{
minScaleLimit: number
}
)
Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- minScaleLimit: Es un número que especifica el límite mínimo de escala a utilizar en el polígono.
Nota: Los píxeles de dimensión son imprescindibles para crear un polígono.
El siguiente ejemplo ilustra la propiedad Polygon minScaleLimit en JavaScript:
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: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Polygon minScaleLimit Property
</b>
</div>
<canvas id="canvas" width="600" height="400"
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 }], {
// Specify the amount
// of the minimum scale
minScaleLimit: 1.5
});
// 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