The background: I am trying to build an app where the user is able to perform an action by clicking two Kinetic shapes at the same time, but is also able to drag individual shapes around the canvas freely. I realise that KineticJS does not support multitouch (yet) but before addressing that issue I have encountered another problem.
The problem: The touch screen I am using (a Planar 27" Helium, on Windows 8 in Chrome) seems to struggle to resolve touch events well. This means that 'clicking' (and holding down) a shape in Kinetic fires drag events and not the single click or tap event. I can visibly see the shape jumping around a few pixels underneath my finger while this is happening, which tells me that the touch event is moving location, even though the finger is staying in the same place.
What I would like: A way to adjust the sensitivity of drag events, so that they only fire when the distance from the current shape location reaches a certain number of pixels. Ideally, the click event would fire, followed by dragstart after a certain threshold. I am assuming that stopping the drag event from firing initially will also mean that the shape will stop moving slightly under my finger as I hold down a press.
I have had a snoop around in the KineticJS source, but I can't seem to see where code like this should be implemented.
SOLVED! Please see my solution below.
This issue has been solved with the introduction of the dragDistance attribute in a recent commit in the KineticJS project (https://github.com/ericdrowell/KineticJS/commit/0b93e21e0b9e11165dfed7574dbafa0ae2a144e0, or see https://github.com/ericdrowell/KineticJS/pull/725 for the pull request)
To make use of the feature, simply assign the value (in pixels) that the drag must exceed before being triggered to the dragDistance attribute of a shape or group. touchStart events below this threshold will not trigger dragStart, meaning that the tap event is far more useful in touch scenarios now.
var rect = new Kinetic.Rect({
draggable: true,
dragDistance: 5
});