Dans cet article, nous apprendrons comment utiliser FabricJS pour activer la sélection d'un objet uniquement lorsqu'il est entièrement contenu dans la zone de sélection. Nous pouvons utiliser la propriété SelectionFullyContained pour y parvenir.
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: 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. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas, dont selectionFullyContained est une propriété. Il accepte une valeur booléenne qui détermine si l'objet doit être sélectionné uniquement s'il est entièrement contenu dans la zone de sélection. La valeur par défaut est Faux.
Passing SelectionFullyContained clé avec la valeur False
Regardons un exemple de code du comportement par défaut dans FabricJS, c'est-à-dire que l'objet est toujours sélectionné bien qu'il ne soit pas entièrement contenu dans la zone de sélection. Dans cet exemple, nous transmettons la valeur de SelectionFullyContained comme False.
<!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>Enabling selection of an object only when it is fully contained in a selection area</h2>
<p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionFullyContained: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Passer la clé selectionFullyContained à la classe avec la valeur True
Regardons un exemple de code dans lequel la valeur de la propriété selectionFullyContained a été définie sur True. Comme nous pouvons le constater, un objet n'est sélectionné que s'il est entièrement contenu dans la zone de sélection.
<!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>Enabling selection of an object only when it is fully contained in a selection area</h2>
<p>Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionFullyContained: true
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange"
});
// Adding it to the canvas
canvas.add(circle);
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!
Comment enregistrer des images dans la zone de commentaires Douyin sur un téléphone mobile
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
La relation entre js et vue
Comment changer le mot de passe dans MySQL
Style de barre de défilement CSS
démarrage m²
geforce 940mx
Méthodes courantes de détection des vulnérabilités des sites Web
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
