Dans cet article, nous apprendrons comment désactiver l'interactivité du canevas dans FabricJS. La couche d'interaction au-dessus de chaque objet est l'une des caractéristiques uniques de FabricJS. Une fois le canevas initialisé, nous pouvons sélectionner des objets, les faire glisser ou manipuler des sélections de groupe. Cependant, tout cela peut être annulé en spécifiant la propriété d'interaction sur False.
new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. En utilisant ce paramètre, il est possible de modifier les propriétés liées au canevas telles que la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés, parmi lesquelles Interactive est la propriété par laquelle nous pouvons décider si nous voulons ou non un canevas interactif. La valeur par défaut de cette propriété est True.
Lorsque l'attribut d'interactivité est activé
Lorsque l'interactivité est activée, nous pouvons librement faire glisser des objets, les sélectionner et les manipuler selon nos besoins. Nous pouvons voir dans l'exemple de code ci-dessous -
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Disabling the interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Passer des clés d'interaction à une classe
Voyons un exemple de code pour comprendre comment désactiver l'interactivité pour un canevas. Nous pouvons attribuer une valeur False à la propriété d'interaction, ce qui éliminera le calque d'interaction au-dessus de l'objet dans le canevas.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Disabling the interactivity of canvas</h2>
<p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b>
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: false,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelles sont les méthodes d'appel de la réflexion Java
Comment vérifier les liens morts d'un site Web
Que dois-je faire si des lettres anglaises apparaissent lorsque l'ordinateur est allumé et que l'ordinateur ne peut pas être allumé ?
mise à jour automatique de Windows
Comment acheter du Ripple en Chine
partage de photos.db
Obtenir la méthode du handle de fenêtre
Quel est le code espace en HTML
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
