Maison > Article > interface Web > Comment ajouter un tiret à la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?

Comment ajouter un tiret à la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?

PHPzavant: 2023-09-06 18:25:02642parcourir

如何使用 FabricJS 将破折号添加到画布上选择区域的边框？

Dans cet article, nous apprendrons comment ajouter un tiret à la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS. Nous pouvons y parvenir en utilisant la propriété SelectionDashArray. Cela nous permet de définir la bordure de la zone de sélection sur une ligne pointillée.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: 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 nombreux attributs liés au canevas, tels que la couleur, le curseur et la largeur de la bordure, parmi lesquels selectionDashArray est un attribut. Il accepte un tableau qui détermine le modèle de tiret souhaité.

Exemple 1

Passer SelectionDashArray comme clé de la classe strong>

selectionDashArray nous permet de définir la bordure de la zone de sélection sur une ligne pointillée. La façon de définir un modèle de tirets consiste à spécifier la longueur des tirets dans un tableau. Dans l'exemple ci-dessous, nous prenons le tableau [7,6]. Cela signifie qu'il y aura une longue ligne de 7 pixels, suivie d'un espace de 6 pixels, et ainsi de suite.

<!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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object. The border of the selection area would have dashed lines.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [7, 6],
         selectionBorderColor: "red"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Utilisation de selectionDashArray avec selectionLineWidth et selectionBorderColor

les propriétés selectionDashArray peuvent être utilisées de plusieurs manières. Une solution consiste à l'utiliser conjointement avec selectionLineWidth et selectionBorderColor, qui spécifient respectivement la largeur et la couleur de la bordure 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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object and observe the outline of the selection area. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [13, 16],
         selectionLineWidth: 5,
         selectionBorderColor: "green",
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // 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!

对象

Déclaration：

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

Article précédent：Comment trouver la taille originale d’une image à l’aide de FabricJS ?Article suivant：Comment trouver la taille originale d’une image à l’aide de FabricJS ?

Articles Liés

Voir plus