Home > Article > Web Front-end > How to create a triangle with waiting cursor on a moving object using FabricJS?

How to create a triangle with waiting cursor on a moving object using FabricJS?

PHPzforward: 2023-09-10 14:45:141450browse

如何使用 FabricJS 在移动对象上创建带有等待光标的三角形？

In this tutorial, we will use FabricJS to create a triangle with an object waiting for the cursor to move. wait 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 under the hood.

moveCursor Property sets the style of the cursor when the object moves in the canvas.

Syntax

new fabric.Triangle({ moveCursor: String }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization to our triangle. Using this parameter, you can change properties related to the object for which moveCursor is a property, such as color, cursor, stroke width, and many other properties.

Option Key

moveCursor - This property accepts a String which allows us Sets the default cursor value when moving this triangle object on the canvas. This value determines the type of cursor used when moving canvas objects.

Example 1

Default cursor value when the object moves on the canvas

By default, when we When moving around a triangle object in the canvas, the cursor type is Move. Let's see a code example to understand this.

<!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>Default cursor value when object is moved around the canvas</h2>
   <p>You can move around the triangle to see that the default cursor type is "move"</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#eedc82",
         stroke: "#bcb88a",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Example 2

Passing moveCursor property as key to value

In this example, we pass moveCursor key to triangle class value as "wait". This will ensure that the cursor value is waiting while we move around the object in the canvas. The following code example illustrates this.

<!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>Passing the moveCursor property as key with a value</h2>
   <p>You can move around the triangle to see that the cursor type is "wait"</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 75,
         width: 90,
         height: 80,
         fill: "#eedc82",
         stroke: "#bcb88a",
         strokeWidth: 5,
         moveCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

The above is the detailed content of How to create a triangle with waiting cursor on a moving object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

字符串对象 ul

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to get the left boundary of a word in IText using FabricJS?Next article：How to get the left boundary of a word in IText using FabricJS?

See more