CODEWITHSUNDEEP
javascriptdrag-and-dropeaseljs
user1972450
user1972450

Reputation:

Easeljs: show pointer cursor when mouse is on shape's bounds

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)

Upvotes: 4

Views: 9610

Answers (2)

mindarelus
mindarelus

Reputation: 29

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.

Upvotes: 0

Lanny
Lanny

Reputation: 11294

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.

Upvotes: 10

Related Questions