How to create a Textbox with crosshair cursor on moving objects using FabricJS?


In this tutorial, we are going to create a Textbox with a crosshair cursor on moving objects using FabricJS. Crosshair is one of the native cursor styles available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., which are reusing the native cursor underhood. The moveCursor property sets the style of the cursor when the object is moved around in the canvas.

Syntax

new fabric.Textbox(text: String, { moveCursor: String }: Object)

Parameters

  • text − This parameter accepts a String which is the text string that we want to display inside our textbox.

  • options (optional) − This parameter is an Object which provides additional customizations to our textbox. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the object of which moveCursor is a property.

Options Keys

  • moveCursor − This property accepts a String which allows us to set the default cursor value when moving this textbox object on the canvas. The value determines the type of the cursor to be used on moving the canvas object.

Example 1

Default cursor value when object is moved around the canvas

By default, when we move around a textbox 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>Move the cursor around the textbox object and observe that the defaultcursor style is "move"</p>
   <canvas id="canvas"gt;</canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Stay hungry. Stay foolish.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "#e1a95f",
         strokeWidth: 2,
         stroke: "#a40000",
         textAlign: "center",
      });

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

Example 2

Passing the moveCursor property as key with a value

In this example, we are passing the moveCursor key to the textbox class with the value as “crosshair”. This will make sure that as we move around our object in the canvas, the cursor value is crosshair. This is illustrated in the code example below −

<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>Move the cursor around the textbox object and observe that now the cursor style has changed to "crosshair"</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 textbox object
      var textbox = new fabric.Textbox("Stay hungry. Stay foolish.", {
         backgroundColor: "#fffff0",
         width: 300,
         left: 110,
         top: 70,
         fill: "#e1a95f",
         strokeWidth: 2,
         stroke: "#a40000",
         textAlign: "center",
         moveCursor: "crosshair",
      });

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

Updated on: 29-Jul-2022

131 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements