En este artículo, vamos a ver cómo crear una línea de lienzo usando FabricJS. La línea de lienzo significa que la línea es móvil y se puede estirar según sus requisitos. Además, la línea se puede personalizar en lo que respecta al color del trazo inicial y sus coordenadas de inicio y fin.
Enfoque: 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 línea. Después de esto, inicializaremos las instancias de Canvas y Line proporcionadas por FabricJS y representaremos la instancia de Line en la instancia de Canvas como se muestra en el siguiente ejemplo.
Sintaxis:
fabric.Line(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 iniciales y finales de la línea que están en la secuencia como coordenada x inicial, coordenada y inicial, coordenada x final y coordenada y final.
- opciones: Especifica las opciones adicionales a aplicar.
Ejemplo: podemos usar FabricJS para crear una línea de lienzo editable simple.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to create canvas
line 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 line instance
var line = new fabric.Line([50, 10, 200, 150], {
stroke: 'green'
});
// Render the rectangle in canvas
canvas.add(line);
</script>
</body>
</html>
