En este artículo, veremos cómo crear una polilínea similar a un lienzo usando Fabric.js. El lienzo significa que la polilínea es móvil y se puede estirar según los requisitos. Además, la polilínea se puede personalizar en lo que respecta al color de relleno inicial, el color del trazo y sus coordenadas.
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á nuestra polilínea. Después de esto, inicializaremos las instancias de Canvas y Polyline proporcionadas por FabricJS y representaremos la instancia de Polyline en la instancia de Canvas como se muestra en el siguiente ejemplo.
Sintaxis:
fabric.Polyline(points, options);
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- puntos: Contiene las coordenadas inicial y final de todos los puntos de la polilínea.
- options: Contiene las opciones adicionales a aplicar.
El siguiente ejemplo implementa el enfoque anterior:
Ejemplo: este ejemplo usa FabricJS para crear un lienzo de polilínea editable simple.
<!DOCTYPE html>
<html>
<head>
<title>
How to create a polyline canvas 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>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<b>
A canvas-type polyline with JavaScript
</b>
<br>
<br>
<canvas id="canvas"
width="600"
height="200"
style="border: 2px solid black;">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a polyline instance
var polyline = new fabric.Polyline([{
x: 200,
y: 10
}, {
x: 250,
y: 50
}, {
x: 250,
y: 180
}, {
x: 150,
y: 180
}, {
x: 150,
y: 50
}, {
x: 200,
y: 10
}], {
fill: 'white',
stroke: 'green'
});
// Render the polyline in canvas
canvas.add(polyline);
</script>
</body>
</html>
Producción: