CODEWITHSUNDEEP
javascripthtmlhtml5-canvasfabricjs
Surendhar
Surendhar

Reputation: 327

Fabric JS Custom cursor style

I need to change the cursor types as "Handwriting" on hover shapes...

var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}

I tried this but not working

Upvotes: 11

Views: 25987

Answers (6)

Taib Islam Dipu
Taib Islam Dipu

Reputation: 481

For Fabric JS 5.3.0

canvas.defaultCursor = 'grab';

Upvotes: 0

invernomuto
invernomuto

Reputation: 10211

You can change the hoverCursor directly to the single shape, or globally to the entire canvas. Take a look to the snippet below.

var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';

var rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
var rect2 = new fabric.Rect({
  left: 180,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();

var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
  // pointer for the selected shape
  hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();
p{font-family:'arial'}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>

<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>

Upvotes: 15

Navi
Navi

Reputation: 179

Here's a simple way to customize the cursor and create a hand grab effect when moving an object.

this.canvas = new fabric.Canvas('canvas', {
      defaultCursor:'default',
      hoverCursor: 'grab',
      moveCursor:'grabbing',
      selection: true,
      backgroundColor: '#ffffff',
    });

Here you find the list of all cursors

https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=alias

Upvotes: 3

Winlin
Winlin

Reputation: 1424

For fabric 4.6, besides the default cursors, also be able to set custom cursor with png:

const canvas = new fabric.Canvas('c');

const cursorUrl = 'https://ossrs.net/wiki/images/figma-cursor.png';
canvas.defaultCursor = `url(" ${cursorUrl} "), auto`;
canvas.hoverCursor = `url(" ${cursorUrl} "), auto`; 
canvas.moveCursor = `url(" ${cursorUrl} "), auto`;

CodePen

Upvotes: 4

awehring
awehring

Reputation: 31

To change the cursor of a fabric.js object, you can set the hoverCursor or moveCursor to your own image. E.g:

object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});

Upvotes: 0

Observer
Observer

Reputation: 3706

Surendhar,

To change cursor over the shape you need to defined as:

canvas.hoverCursor = 'cursor type'

This is a list of cursors

If you need custom cursor you have to create div element on top the fabric canvas with custom cursor. When you have event 'mouseover' the shape just specified canvas.hoverCursor = 'none', and show custom one.

You can check this fiddle it is simple example of custom cursor. You have to revisit this code in order to work without refreshing of custom cursor. It is all about mouse-over events of custom cursor. You have to disable mouse-over event of each div element of custom cursor.

Upvotes: 8

Related Questions