Fabric.js | Rect moveCursor Property

The moveCursor is a property in Fabric.js that represents the CSS cursor property for the mousemove events on an object. This property allows you to define a custom cursor style when the mouse is moved over a Rect object in Fabric.js.

Syntax

rect.moveCursor = '<cursor-style>';

Example

var canvas = new fabric.Canvas('canvas');

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red'
});

rect.moveCursor = 'grab';

canvas.add(rect);

In the above example, we create a Rect object and set its moveCursor property to 'grab'. This will make the cursor appear as the "grab" style when the mouse is moved over the rectangle on the canvas.

Cursor Styles

Fabric.js supports various cursor styles that can be used with the moveCursor property. Here are some commonly used cursor styles:

• auto: The default cursor style, usually an arrow.
• default: An alias for 'auto'.
• pointer: A hand with a pointing finger, used for clickable elements.
• crosshair: A crosshair shape, usually used for select or drawing operations.
• move: A four-directional arrow, used to indicate movement.
• text: A vertical I-beam cursor, used for text input fields.
• help: A question mark, used to indicate help or assistance.

You can also use custom cursor styles by providing valid CSS cursor property values. For example, 'url(path/to/cursor.png), auto' will use a custom cursor image with the "auto" fallback.

It's important to note that the moveCursor property only affects the mousemove events on a Rect object. Other mouse events like mousedown, mouseup, or mouseover use different properties (selectableCursor, hoverCursor, etc.).

Overall, the moveCursor property in Fabric.js allows you to customize the cursor style when the mouse hovers over a Rect object, providing better user experience and visual feedback.