En este artículo, veremos cómo establecer el color del borde de una imagen de lienzo usando FabricJS. El lienzo significa que la imagen es móvil y se puede estirar según los requisitos. Además, la imagen se puede personalizar en lo que respecta al ángulo, el ancho del trazo, el relleno, etc.
Para que esto sea posible, utilizaremos 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 imagen. Además, crearemos un elemento img que contenga la imagen que se agregará dentro del lienzo y configuraremos el atributo de estilo para mostrar: ninguno;porque no queremos que la imagen sea visible fuera del lienzo. Después de esto, inicializaremos las instancias de Canvas e Image proporcionadas por FabricJS y renderizaremos la imagen en el lienzo y estableceremos el color del borde de la imagen del lienzo usando la propiedad borderColor como se muestra en el ejemplo a continuación.
Sintaxis:
fabric.Image({
image,
borderColor: string
});
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- image: Especifica el objeto de la imagen.
- borderColor: Especifica el color del borde de la imagen.
Ejemplo: este ejemplo usa FabricJS para establecer el color del borde de la imagen del lienzo. Tenga en cuenta que debe hacer clic en el objeto de la imagen para ver el color del borde.
html
<!DOCTYPE html>
<html>
<head>
<title>
Fabric.js | Image borderColor Property
</title>
<!-- FabricJS CDN -->
<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 | Image borderColor Property
</b>
</div>
<div style="text-align: center;">
<canvas id="canvas" width="600" height="400"
style="border:1px solid #000000;">
</canvas>
</div>
<!-- Add the image to be used in the canvas and hide it here
because only need it inside the canvas -->
<img style="display: none;" src="https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
id="my-image" alt="">
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Get the image element
var image = document.getElementById('my-image');
// Initiate a Fabric instance
var fabricImage = new fabric.Image(image, {
borderColor: 'red'
});
// Add the image to canvas
canvas.add(fabricImage);
</script>
</body>
</html>
Producción:
