iOS Scrolling / Pinch Zooming issue with KineticJS

Question

as the title describes; I can't seem to get iOS to Scroll / Pinch Zoom when using KineticJS with the canvas tag; I've seen in another question that the evt.preventDefault would stop that. I've commented it out (just for testing) and still seem to have the same problem. And my canvas isn't the whole page? So surely it would only disable pinch zoom / scrolling on that particular place?

I know it is something to do with KineticJS, because if I stop it loading then pinch zoom/scrolling works.

Many thanks!

Answer 1

There are plugins for kineticjs you can download to help you with this, or you can create an object inside the canvas which allows scrolling/zooming.

 shape = new kinetic.shape({config});

then attach the event you want captured

 shape.on('touchmove', function{
     // define what you want the effect to be
 });

Your other option is to go through the kineticjs code an locate the code responsible for capturing touch events and disabling/overwriting it

Answer 2

This tutorial has a pinch zoom alternative for kinetic js. And i have added some scroll functions to it in the comments section

http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/