Dans ce tutoriel, nous apprendrons comment désactiver la sélectivité des triangles à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.
Pour modifier un objet, nous devons le sélectionner dans FabricJS. Cependant, nous pouvons désactiver ce comportement en utilisant l'attribut selectable.
new fabric.Triangle{ selectable: Boolean }: Object)Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés de l'objet liées à l'attribut selectable, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.
Sélectionnable - Cette propriété accepte les valeurs booléennes. Lorsqu'une valeur "fausse" lui est attribuée, l'objet ne peut pas être sélectionné pour modification. Sa valeur par défaut est vraie.
Comportement par défaut ou propriété facultative lorsqu'elle est définie sur "true"< /p>
Regardons un exemple de code pour comprendre comment un objet se comporte par défaut lorsque la propriété selectable est définie sur True. Lorsque la propriété selectable est définie sur True, nous pouvons sélectionner un objet, le déplacer sur le canevas et le modifier.
<!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>Default behaviour or when selectable property is set to 'true'</h2>
<p>You can try moving the triangle around the canvas or scaling it to prove that it's selectable</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Passer un attribut facultatif en tant que clé
Dans cet exemple, nous attribuons une valeur False à l'attribut facultatif. Cela signifie que nous ne pouvons plus sélectionner l'objet triangle pour le modifier.
<!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>Passing selectable property as key</h2>
<p>You can see that the triangle is no longer selectable</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
selectable: false,
});
// Add it to the canvas
canvas.add(triangle);
</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 reprendre l'utilisation du gaz après le paiement
Comment définir un tableau
Introduction aux touches de raccourci de capture d'écran dans Win8
Utilisation de l'instruction delete
dernières nouvelles des pièces BTC
Comment résoudre l'erreur de requête http 415
Le taux d'inflation a-t-il un impact sur les monnaies numériques ?
Que dois-je faire si le conteneur Docker ne peut pas accéder au réseau externe ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
