Fabric.js es una biblioteca de javascript que se utiliza para trabajar con lienzo. Image es una de las clases de fabric.js que se utiliza para crear instancias de imágenes. La propiedad cornerColor de la imagen se usa para cambiar el color de las esquinas de control de la imagen.
Enfoque: primero importe la biblioteca fabric.js. Después de importar la biblioteca, cree un bloque de lienzo en la etiqueta del cuerpo que contendrá la imagen. Después de esto, inicialice una instancia de Canvas y la clase de imagen proporcionada por Fabric.JS y configure el color de esquina de los controladores de la imagen usando la propiedad cornerColor del objeto de imagen.
Sintaxis:
fabric.Image(image, {
cornerColor:string
});
Parámetros: La función anterior toma dos parámetros como se mencionó anteriormente y se describe a continuación:
- image: Este parámetro toma la imagen.
- cornerColor: Esto establece el color de la esquina de control de la imagen.
Ejemplo 1: este ejemplo utiliza FabricJS para establecer el color de la esquina de control de la imagen del lienzo, como se muestra en el siguiente ejemplo.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>Fabric.js | Image cornerColor Property </b>
<canvas id="canvas" width="400" height="300"
style="border:2px solid #000000">
</canvas>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="100" height="100" id="my-image"
style="display: none;">
<script>
// Create the instance of canvas object
var canvas = new fabric.Canvas("canvas");
var img= document.getElementById('my-image');
var imgInstance = new fabric.Image(img, {
cornerColor:"red"
});
canvas.add(imgInstance);
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>Fabric.js | Image cornerColor Property </b>
<canvas id="canvas" width="300" height="250"
style="border:2px solid #000000">
</canvas>
<img src =
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
width="100" height="100" id="my-image"
style="display:none">
<br>
<button onclick="func()">Clickme</button>
<script>
// Create the instance of canvas object
var canvas = new fabric.Canvas("canvas");
var img= document.getElementById('my-image');
var imgInstance = new fabric.Image(img, {
});
canvas.add(imgInstance);
func=()=>{
var imgInstance = new fabric.Image(img, {
cornerColor:"green"
});
canvas.clear();
canvas.add(imgInstance);
}
</script>
</body>
</html>
Producción:
