Search code examples
jqueryhtmlkineticjsmulti-touchhammer.js

How to bind HammerJS events to KineticJS shapes?

I'm trying to combine HammerJS with KineticJS. I found some examples and tipps online, but it doesn't work for me.

I create a lot of image objects in a loop and draw them at the end of the loop on the layer. Every image has an unique ID. And every image should react on different multitouch inputs such as a long hold on the picture, pinch and shrink to enlarge etc.

I know that I can only listen to document elements and not to kineticjs objects with hammer. But I don't know how I can achieve the images.

I create a demo: http://jsfiddle.net/HF3dL/1/

If the user makes a doubletap on a circle, an alert should be shown. I know, that with this piece of code, I don't achieve a circle shape...

var transformer = Hammer(stage.getContainer())  
transformer.on('doubletap', function (e) {
    alert("test");   
});

I found the error and updated the fiddle. The method has to be in the loop.

for(var n = 0; n < 10; n++) {
var circle = new Kinetic.Circle({
    x: Math.random() * stage.getWidth(),
    y: Math.random() * stage.getHeight(),
    radius: Math.random() * 50 + 25,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 3,
    draggable: true,
    id: 'img'+n
});
var transformer = Hammer(circle);  //kineticjs stage
transformer.on('doubletap', function (e) {
    alert("test"); 
});

layer.add(circle);

}

http://jsfiddle.net/HF3dL/3/

Solution

  • Integration with HammerJS will be in future version v5.0.2 of KineticJS. Also you may look into this: https://github.com/lavrton/KineticJS-HammerJS-test. You can get kinetic.js file from this repo until release will be published.