4

I am trying to achieve something similar to the code below. When user is on the edge of a rectangle, the cursor points a pointer, otherwise cursor is an arrow.

     shape.graphics.beginStroke("#000").beginFill("#daa").drawRect(50, 150, 250, 250);
     shape.on("mousemove", function(evt) {
          if (isOnEdges(evt)) {
              evt.target.cursor = "pointer";
          } else {
              evt.target.cursor = "arrow";
          }
     });

Problems with the above code is:

  1. Shape doesn't have a mousemove handler
  2. how do i calculate if mouse is on the edge of a shape (isOnEdges function)

2 Answers2

10

You can simply set the cursor on the shape, and ensure that you enableMouseOver on the stage:

var shape = new Shape();
shape.graphics.beginStroke("#000").beginFill("#daa").drawRect(50, 150, 250, 250);
shape.cursor = "pointer";

stage.enableMouseOver();

EaselJS will automatically determine when you are over the shape's bounds.

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • The cursor is pointer when, user is on the EDGE of the shape. In your case it's always pointer. i am trying to resize the shape and want a resize cursor when on the edge of the shape. –  Jan 15 '14 at 14:03
0

I have a similar problem:

container.on("pressmove", function (evt) {
    this.x = evt.stageX + this.offset.x;
    this.y = evt.stageY + this.offset.y;
    if (this.allowDrop(board)) {
        this.cursor = "pointer";
    }
    else {
        this.cursor = "no-drop";
    }
});

This code doesn't change my cursor in runtime.. I update the stage with a ticker.. so this is not the problem.

mindarelus
  • 29
  • 3
  • This is not _recommended_ or a best practice, but you can use a private API to force the stage to re-test for mouse-over: `stage._testMouseOver(true);`. – Lanny Mar 23 '16 at 15:13