En este artículo, vamos a crear un rectángulo de lienzo con FabricJS. El rectángulo de lienzo significa que el rectángulo es móvil y se puede estirar según los requisitos. Además, el rectángulo 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.
Enfoque: para que esto 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á el rectángulo. Después de esto, inicializaremos las instancias de Canvas y Rect proporcionadas por FabricJS y representaremos la instancia de Rect en la instancia de Canvas como se muestra en el ejemplo a continuación.
Sintaxis:
fabric.Rect({
width: number,
height: number,
fill: string,
stroke: string,
strokeWidth: int
});
Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación:
- ancho: Especifica el ancho del rectángulo.
- altura: Especifica la altura del rectángulo.
- relleno: Especifica el color de relleno.
- trazo: Especifica el color del trazo.
- strokeWidth: Especifica el ancho del trazo.
Ejemplo: este ejemplo usa FabricJS para crear un rectángulo de lienzo editable simple.
<!DOCTYPE html>
<html>
<head>
<title>
How to create a rectangle
canvas using Fabric.js ?
</title>
<!-- Adding 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 Rect instance
var rectangle = new fabric.Rect({
width: 200,
height: 100,
fill: '',
stroke: 'green',
strokeWidth: 3
});
// Render the Rect in canvas
canvas.add(rectangle);
</script>
</body>
</html>
Producción: