Fabric.js es una biblioteca de JavaScript que se utiliza para trabajar con lienzo. La imagen del lienzo pertenece a la clase de fabric.js que se utiliza para crear instancias de imágenes. La imagen del lienzo significa que la imagen se puede mover y se puede estirar según los requisitos. En este artículo, usaremos la propiedad lockScalingFlip para bloquear el volteo al escalar una imagen del lienzo.
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 use la propiedad lockScalingFlip para bloquear el volteo al escalar.
- Después de esto renderiza la imagen en el lienzo.
Sintaxis :
fabric.Image(image, {
lockScalingFlip: boolean
});
Parámetros: esta función toma un solo parámetro como se mencionó anteriormente y se describe a continuación:
- lockScalingFlip: Este parámetro toma un valor booleano para bloquear el volteo por escalado.
Ejemplo: este ejemplo usa FabricJS para establecer la propiedad lockScalingFlip de la imagen del lienzo como se muestra en el siguiente ejemplo:
HTML
<!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 lockScalingFlip 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;">
<br>
<script>
// Creating the instance of canvas object
var canvas = new fabric.Canvas("canvas");
// Getting the image
var img = document.getElementById('my-image');
// Creating the image instance
var geeks = new fabric.Image(img, {
lockScalingFlip : true
});
canvas.add(geeks);
canvas.centerObject(geeks);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por dheerchanana08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA