CODEWITHSUNDEEP
canvascursorcreatejs
sathishmarappan
sathishmarappan

Reputation: 3

Update cursor in createjs

I'm new to canvas. I'm implementing an application using createjs. I have placed an PNG image on the canvas stage. I want to change the cursor style to 'grap' on mosueover and want the cursor style as 'grapping' while dragging the PNG image. I would like to do this on createjs only.

Thanks in advance.

Upvotes: 0

Views: 678

Answers (2)

Lanny
Lanny

Reputation: 11294

The answer @catalin gave you is mostly correct for setup, but adding the cursor is way easier, since EaselJS supports it natively.

  1. Make sure to enableMouseOver() on the stage. This ensures that EaselJS checks what is under the mouse. This can be expensive, so it can be prudent to turn off mouseEnabled and mouseChildren on anything that doesn't need mouse interaction.

  2. Add a cursor property to anything you want to have a cursor.

That's it!

var stage = new createjs.Stage("canvasId");
stage.enableMouseOver();

var bmp = new createjs.Bitmap("path/to/image.png");
stage.addChild(bmp);
bmp.cursor = "pointer";

Cheers.

Upvotes: 0

Catalin Iancu
Catalin Iancu

Reputation: 722

I am not sure how it already looks (hence why it's good to give as many details as possible), so I will take it step-by-step;

//reference the canvas with:
var canvas = document.getElementById("yourCanvasID");
//create your stage
var stage = new createjs.Stage(canvas);
//enable mouse events for the stage
stage.enableMouseOver();
createjs.Touch.enable(stage);

I am assuming you have the image loaded already and referenced with a variable, but not added to the page yet. Let's say it's called image. You can create a bitmap image from it with:

var bitmap = new createjs.Bitmap(image);

and then add it to the stage

stage.addChild(bitmap);

After that you add the event listeners to the newly created createjs bitmap object with:

bitmap.addEventListener("mouseover", handleMouse);
bitmap.addEventListener("mousedown", handleMouse);
bitmap.addEventListener("pressmove", handleMouse);
bitmap.addEventListener("pressup", handleMouse);

And then you define what will happen inside the handleMouse function:

var isMouseDown = false;
function handleMouse(evt)
{
   switch (evt.type){
      case "mouseover":
         //on rolling over the image
         if (!isMouseDown){
             canvas.style.cursor = "pointer";
         }
         break;
      case "mousedown":
         //when holding the mouse down;
         canvas.style.cursor = "move";
         isMouseDown = true;
         break;
      case "pressmove":
         //move the image
         bitmap.x = stage.mouseX;
         bitmap.y = stage.mouseY;
         break;
      case "pressup":
         //when releasing the mouse click
         isMouseDown = false;
         canvas.style.cursor = "pointer";
   }
}

Now, I am not sure if everything is 100% correct since it comes from the top of my head, but it should do the trick with changing the mouse between "hand" and "move" pointers.

Upvotes: 0

Related Questions