3

how can i show custom cursors in createjs ? I have multiple images/bitmaps rendered on the canvas. I want the cursor to change to a specific image whenever I click on a particular bitmap. ie on clicking image no.1 the cursor will change to an image of a paint brush on clicking image 2 the cursor will change to a bomb and so on.

Janjua
  • 63
  • 1
  • 6

1 Answers1

4

You will have to hide the native cursor, you can do so with:

// this property delegates to the css-style, so it might not work in all (older) browsers
stage.cursor = 'none';

But be aware that some (older) browsers may not allow you to hide the cursor.

After hiding the cursor you then have to create some Bitmap or Shape and place it on the stage and always update its' position to the mouse-position.

You can get the Mouse-Position via: http://www.createjs.com/Docs/EaselJS/classes/Stage.html#property_mouseX

myCursor.x = stage.mouseX;
myCursor.y = stage.mouseY;
// ...and don't forget to update the stage

Hint: Some browsers may allow you directly set an image as the cursor by defining an url in CSS, however this is not very widely supported, but you might try it and see if it suits your needs, if you are interested you can take a look here: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url

olsn
  • 16,644
  • 6
  • 59
  • 65