How to add a dash to the border of a selection area on the canvas using FabricJS?-JS Tutorial-php.cn

How to add a dash to the border of a selection area on the canvas using FabricJS?

PHPz

Release： 2023-09-06 18:25:02

forward

624 people have browsed it

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

In this article, we will learn how to add dashes to the border of a selection area on the canvas using FabricJS. We can achieve this by using the SelectionDashArray property. It allows us to set the border of the selection area to a dashed line.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)

Copy after login

Parameters

Element - This parameter is
Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change many attributes related to the canvas, such as color, cursor, and border width, among which selectionDashArray is one attribute. It accepts an array that determines the dash pattern we want.

Example 1

Pass SelectionDashArray as key to class

selectionDashArray allows us to set the border of the selection area to a dotted line . The way to define a dash pattern is to specify the length of the dashes in an array. In the example below, we take the [7,6] array. This means, there will be a 7px long line, followed by a 6px gap, and so on.

<!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>

Copy after login

Example 2

Using selectionDashArray with selectionLineWidth and selectionBorderColor

The selectionDashArray property can be used in a variety of ways. One way is to use it in conjunction with selectionLineWidth and selectionBorderColor, which specify the width and color of the selection border respectively.

<!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>

Copy after login

The above is the detailed content of How to add a dash to the border of a selection area on the canvas using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!