Comment ajouter un tiret à la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?-js tutoriel-php.cn

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

PHPz

Libérer： 2023-09-06 18:25:02

avant

604 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

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

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>

Copier après la connexion

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>

Copier après la connexion

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!