简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to add a dash to the border of a selection area on the canvas using FabricJS?

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

PHPz
PHPzforward
2023-09-06 18:25:02601browse

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

Parameters

  • Element - This parameter is em> The element itself can be derived using document.getElementById() or The id of the element itself. The FabricJS canvas will be initialized on this element.

  • 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 strong>

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>

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>

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!

对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to find the original size of an image using FabricJS?Next article：How to find the original size of an image using FabricJS?

Related articles

See more