CODEWITHSUNDEEP
fabricjs
Le-roy Staines
Le-roy Staines

Reputation: 2057

How to override FabricJS mouse cursor

When using FabricJS, how can you temporarily change the mouse cursor even if you're hovering a shape that has its own curser defined?

Upvotes: 1

Views: 2754

Answers (2)

Le-roy Staines
Le-roy Staines

Reputation: 2057

Override setCursor

You can override the fabric.js canvas function setCursor and implement your own logic for detecting what the mouse cursor should really be.

fabric.Canvas.prototype.setCursor = function (value) {
    if (something) value = 'pointer'; // Add your own logic here to override
    this.upperCanvasEl.style.cursor = value;
};

Place the code above in your own javascript file, so that you can upgrade fabric.js later without losing your modifications. Make sure you load this file after you load fabric.js. Modify the if statement to match your own logic that determines whether a different cursor should be used.

Upvotes: 3

David Burke
David Burke

Reputation: 31

Fabric.defaultCursor = "move";  // "crosshair"

defaultCursor is used to set "Default cursor value used for the entire canvas"

var canvas = new fabric.Canvas('canvasID');
canvas.defaultCursor = 'crosshair';

For more details see the docs: http://fabricjs.com/docs/fabric.Canvas.html#defaultCursor

Upvotes: 3

Related Questions