How to create a canvas with progress cursor using FabricJS?-JS Tutorial-php.cn

How to create a canvas with progress cursor using FabricJS?

王林

Release： 2023-08-24 14:53:08

forward

639 people have browsed it

如何使用 FabricJS 创建带有进度光标的画布？

In this article, we will create a canvas with a progress cursor using FabricJS. The progress cursor indicates that the program is busy in the background but allows the user to interact with the interface. Progress is one of the native cursor styles available and can also be used in FabricJS canvas.

FabricJS provides various types of cursors such as default, full scroll, crosshair, column resize, row resize, etc., which reuse the native cursor behind the scenes. Each cursor looks slightly different depending on the operating system.

Syntax

new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: 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 properties related to the canvas, such as color, cursor, and border width. Among them, defaultCursor is the property where we can set the cursor type.

Example 1

The defaultCursor property accepts a String that determines the name of the cursor to use on the canvas. We set it to Progress to use the Progress cursor. Let’s take a look at the code to create a canvas with a progress cursor in FabricJS.

<!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>Canvas with progress cursor using FabricJS</h2>
   <p>Bring the cursor inside the canvas to see the changed shape of cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "progress"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copy after login

Example 2

In this example we will add a circle to the canvas along with a progress cursor.

<!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>Canvas with progress cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with a progress cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "progress"
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "green"
      });
      // Render the circle in 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 create a canvas with progress cursor using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!