Understanding the on function

In EaselJS, you can get access to all mouse events, such as click, mouse up, and so on. A MouseEvent instance is passed as the only parameter for all mouse event callbacks. It includes the stageX and stageY properties, which indicate the cursor's position relative to the stage coordinates.

In the following example, pressed will be logged on to the console when the mouse is clicked over the circle; thereafter, mouse moves will be logged whenever the mouse moves until the mouse is released.

circle.on("mousedown", function(mousedownEvent) {
    console.log("pressed");
    circle.on("pressmove", function(moveEvent) { 
        console.log("mouse moved: "+moveEvent.stageX+","+moveEvent.stageY); 
    });
});

As you can see, we can simply bind a mouse event to our DisplayObject object and then read or alter the properties on each event callback. The following screenshot displays the output of the previous example along with the details of mouse events:

Understanding the on function

In the next section, we will put all these things together and create a simple drag-and-drop interaction.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.98.208