Description
The following applies to KinetisJS versions 4.5.1 to 5.0.1 (potentially other versions too, but these are the ones I've tested).
When I use the native Kinetic drag functionality, the framerate is slow enough for the eye to perceive (my guess would be less than 10fps). Shape location lags visibly behind touch position (high latency). This is with a simple app with no more than 15 circles, on an early 2011 macbook pro running Windows 8.1 and connected to a Planar Helium 27" touch screen.
I have experimented with the multitouch drag support provided by the following plugin: https://github.com/atomictag/Kinetic.MultiTouch. The plugin uses the Touchy touch event library and underscore, but otherwise simply extends native Kinetic functionality. Using it in the same scenario described above, the circles move completely smoothly with no perceptible jittering and with super low latency. The library in fact allows as many shapes as I have fingers to be moved simultaneously, all with a dramatically superior framerate.
Can anyone explain why this is?
I see that improved drag and drop (and multitouch) are due in coming releases, but I am keen to understand this issue now. The plugin I mentioned is not compatible with 5.x versions of Kinetic for reasons I don't understand (I'm relatively new to JS development). Ideally, I want to understand what makes the plugin work so smoothly so that I can reimplement it with the current 5.x branch of Kinetic.