En este artículo, veremos cómo habilitar o deshabilitar la selección de objetos en un lienzo en Fabric.js usando la propiedad de selección . El lienzo en Fabric.js se usa como un envoltorio sobre el objeto de lienzo nativo provisto por HTML . Proporciona acceso de alto nivel al lienzo subyacente, lo que le permite tener un modelo de objeto, permitir el análisis de archivos SVG y permitir que se interactúe con el lienzo de una manera intuitiva.
Enfoque: para que sea posible, vamos a utilizar una biblioteca de JavaScript llamada Fabric.js . Después de importar la biblioteca, crearemos el bloque de lienzo en la etiqueta del cuerpo. Después de esto, inicializaremos una instancia del objeto de lienzo proporcionado por Fabric.js y estableceremos el modo de selección necesario para el lienzo usando la propiedad de selección .
Sintaxis:
fabric.Canvas(canvasElement, {
selection: Boolean
});
Parámetros: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.
- selección: Es un booleano que especifica si la selección de objetos debe estar habilitada o no en el lienzo.
Ejemplo: El siguiente ejemplo ilustra el uso de la propiedad de selección Canvas de Fabric.js en JavaScript.
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>
<div style="text-align: center;
width: 500px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Canvas selection Property
</b>
</div>
<b>Selection Disabled</b>
<canvas id="canvas" width="500" height="250"
style="border:1px solid #000000">
</canvas>
<b>Selection Enabled</b>
<canvas id="canvas2" width="500" height="250"
style="border:1px solid #000000">
</canvas>
<script>
let circle = new fabric.Circle({
radius: 30,
});
let circle2 = new fabric.Circle({
radius: 30,
});
// Initiate a Canvas instance
let canvas = new fabric.Canvas("canvas", {
// Disable selection
// in this Canvas
selection: false
});
// Initiate a Canvas instance
let canvas2 = new fabric.Canvas("canvas2", {
// Enable selection
// in this Canvas
selection: true
});
canvas.add(circle);
canvas.centerObject(circle);
canvas2.add(circle2);
canvas2.centerObject(circle2);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA