En este artículo vamos a ver cómo crear un polígono de lienzo usando FabricJS. El 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 de relleno inicial y sus coordenadas.
Enfoque: para que 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á nuestro polígono. Después de esto, inicializaremos las instancias de Canvas y Polygon proporcionadas por FabricJS y representaremos la instancia de Polygon en la instancia de Canvas como se muestra en el ejemplo a continuación.
Sintaxis:
fabric.Polygon(points, options);
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- puntos: Especifica las coordenadas de inicio y finalización de todos los puntos del polígono.
- opciones: Especifica las opciones adicionales a aplicar.
Programa: este ejemplo usa FabricJS para crear un polígono de lienzo editable simple.
<!DOCTYPE html>
<html>
<head>
<title>
How to create a canvas polygon using Fabric.js?
</title>
<!-- Loading the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<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: 200, y: 10 },
{ x: 250, y: 50 },
{ x: 250, y: 180},
{ x: 150, y: 180},
{ x: 150, y: 50 }], {
fill: 'green'
});
// Render the polygon in canvas
canvas.add(polygon);
</script>
</body>
</html>
Producción: