GraphicsJS Events

• Overview
• Listening
• Unlistening
• Propagation
• Stage

Overview

Any object, stage or layer in GraphicsJS can listen events. The list of events that can be handled for any element is available at: API: events

Listening

To set listening function use listen() or listenOnce() methods. Here is a sample code of listening of "click" event for a layer and a text object on it:

stage = anychart.graphics.create("container");

layer = stage.layer();

var textObject = layer.text(70, 55, "Click on this TEXT");
textObject.style({fontSize: "18px"});

var counter = 0;

// Adds an event listener to a text
textObject.listen("click", function(e) {
    counter++;
    textObject.text("You clicked " + counter + " times. " + "Click again.");
});

// Adds an event listener to a layer
layer.listen("click", function(e) {
    // change text color
    textObject.color(getRandomColor());
});

Try this sample to see how it works:

Notice that click can be "heard" both by the text and the layer, see Propagation section to learn how to avoid it.

Unlistening

To stop listening use unlisten(), unlistenByKey(), and removeAll() methods. The next sample is a modification of the previous one, where layer will catch a "click" event and remove text object listener:

// Adds an event listener to a text
eventKey = textObject.listen("click", function(e) {
    counter++;
    textObject.text("You clicked " + counter + " times. ");
});

// Adds an event listener to a layer
layer.listenOnce("click", function(e) {
    textObject.text(textObject.text() + "No more listening.");
    // unlisten click for the text
    textObject.unlistenByKey(eventKey);
});

Try this sample to see how it works:

Propagation

To work prevent propagation use preventDefault(), stopPropagation(), and stopWrapperPropagation() methods.

The next sample is the modification of the first sample again, now the propgation is stopped and layer doesn't get a "click" event when text is clicked on, however, if you click anywhere else, the event is catched and color of the text changes. Notice that is you resume clicking the text, counter increases but the color remains the same.

// Adds an event listener to a text
textObject.listen("click", function(e) {
    counter++;
    textObject.text("You clicked " + counter + " times. Click again.");
    e.stopPropagation();
});

// Adds an event listener to a layer
layer.listen("click", function(e) {
    // change text color
    textObject.color(getRandomColor());
});

Try the sample and explore it in the Playground:

Stage

Besides all mentioned, there are also events managed by stage. There are four of them:

• STAGE_RESIZE (stageresize) - listen to this event when you need some changes or actions done on a stage while it is being resized
• STAGE_RENDERED (stagerendered) - listen to this event when you need some changes or actions done on a stage when it is rendered, i.e. when all images have been loaded to a stage
• RENDER_START (renderstart) - listen to this event when you need some changes or actions done on a stage when the stage rendering process has started
• RENDER_FINISH (renderfinish) - listen to this event when you need some changes or actions done on a stage when the stage rendering process has finished

In the following sample there is a text element of some width and height. Each time the stage is resized, width and height of this element is recounted

stage.listen("stageresize", function() {
    var w = stage.width()-300;
    textObject.width(w);
    var h = textObject.height();
    if ((h<=100) && (w<600)) textObject.height(600/w);
    if (w>600) textObject.height(100)
});

The following samples demonstrates the time between rendering start and finish. The "renderstart" and "renderfinish" methods are listened to:

stage.listen("renderstart", function() {
    start = (new Date()).getTime();
});

stage.listenOnce("renderfinish", function() {
    finish = (new Date()).getTime();
    var labelBg = stage.rect();
    label = stage.text(130,130);
    label.text((finish - start) + "ms");
    var labelBounds = label.getBounds();
    labelBg
        .setX((labelBounds.left)-20)
        .setY((labelBounds.top)+20)
        .setWidth(labelBounds.width+40)
        .setHeight(labelBounds.height-40)
        .fill("#fff");
    label.zIndex(1000000);
});

Please note that the "renderfinish" event is listened only once as the result of rendering speed is demonstrated when the rendering has finished. So when the result is being drawn, the stage needs to rerender. That is why it is necessary to stop listening to the "renderfinish" event.