Maison >interface Web >js tutoriel >Comment définir la largeur de la bordure de la zone de sélection sur le canevas à l'aide de FabricJS ?

Comment définir la largeur de la bordure de la zone de sélection sur le canevas à l'aide de FabricJS ?

WBOYavant: 2023-09-03 14:53:111461parcourir

如何使用 FabricJS 设置画布上选择区域边框的宽度？

Dans cet article, nous apprendrons comment définir la largeur de la bordure de la zone de sélection sur le canevas à l'aide de FabricJS. La zone de sélection représente la zone sélectionnée avec la souris et tous les objets situés sous cette zone seront sélectionnés. FabricJS nous permet d'ajuster la largeur de la bordure de la zone de sélection à l'aide de la propriété selectionLineWidth.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionLineWidth: Number }: Object)

Parameters

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 de nombreuses propriétés liées au canevas, telles que la couleur, le curseur et la largeur de la bordure, parmi lesquelles selectionLineWidth est une propriété. Il accepte un nombre qui détermine la largeur de la ligne utilisée dans la bordure de sélection. La valeur par défaut est 1.

Exemple 1

Passez la clé de sélectionLineWidth à la classe

Regardons un exemple de code sur la façon de définir la largeur de la bordure de la zone de sélection dans le canevas à l'aide de FabricJS. Le paramètre SelectionLineWidth accepte un nombre comme valeur. Plus le nombre défini est grand, plus la bordure de la zone de canevas sera large.

<!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>Setting the width of the selection area border in canvas using FabricJs</h2>
   <p>Select an area around the object to see the width of the selection area border.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionLineWidth: 23,
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

例 Exemple 2

combine SELECTIONLINEWIDTH et SelectionColor et SelectionBorderColor Lor们 attribut, ils nous permettent de définir la couleur de la zone sélectionnée séparément et d'ajuster la couleur de la bordure de la zone sélectionnée. Voyons à quoi ressemble le code :

<!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>Setting the width of selection area border in canvas using Fabric</h2>
   <p>Select an area around the object to see the selection color and selection border color.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionLineWidth: 3,
         selectionColor: "rgba(42,82,190,0.3)",
         selectionBorderColor: "black",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Créer un système de gestion de contenu : nodePressArticle suivant：Créer un système de gestion de contenu : nodePress

Articles Liés

Voir plus