Using Hammerjs events within the Kineticjs Canvas

Question

I am trying to use Hammer.js events within the Kinetic.js canvas and can't seem to get it working. I have tried both of the following:

var background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: image.getWidth(),
        height: image.getHeight(),
        id: "background",
        fill: 'rgba(159, 255, 200, 0.0)',
    });
    pointLayer.add(background);
    pointLayer.draw();

background.hammer().on('tap', function (e) {
        console.log("Background tapped");
});

OR

Hammer(background).on('tap', function (e) {
        console.log("Background tapped");
});

When using the first method, I get an error "has no method 'hammer'". The other I get no messages. Is it possible to use Hammer.js within the Kinetic.js canvas?

First one is syntax for jQuery, that's why it doesn't work, it should be $(background).hammer().on('tap' ...'); But for the question itself: you should listen the events on the "stage" or the canvas element and then distinct where it's coming from. Because I'm quite unfamiliar with Kinetic.js, I can't advice any further. — Samuli Hakoniemi, Nov 11 '13 at 20:42

lavrton · Accepted Answer · 2014-02-21T01:27:55.180

2

It is posibble. But you can not listen kineticjs objects with hammer. You can listen documet elemets. For example canvas of layer or whole stage element.

var transformer = Hammer(stage.getContainer())  //kineticjs stage
transformer.on("transformstart", function(){
   // your code
});

Update:

Currently you can use KineticJS nodes and HammerJS events. (little patch need) First look at demo listed here: https://github.com/lavrton/KineticJS-HammerJS-test

edited Feb 21 '14 at 01:27

answered Nov 12 '13 at 01:34

lavrton

18,973
4
30
63

Thanks, it works now! I just have to figure out how to translate the touch coordinates on the stage. – zsoflin Nov 12 '13 at 18:44

Using Hammerjs events within the Kineticjs Canvas

1 Answers1