Kinetic JS Multi-Touch Scale Stage

0
votes

I am using Kinetic JS on iPhone and Android.

I copied the example from

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

to enable stage scaling and then I realized that when I zoom the zooming does not occur on the place where I pinch my zoom at, instead it happens at the top corner.

I also need to limit the zoom rate with a max/min zoom level, I believe this would help a lot.. thanks!

Code:

http://pastebin.com/cAgk2UiB

Modded Pinch Layer:

http://pastebin.com/mG1b75KK

2
javascripthtmlcanvaszoomingkineticjs
setScale only resizes the objects/layers, you have to translate the positions yourself dependent on calculated coordinates of where you touch/pinch. - SoluableNonagon
None of the links have a working solution. The Pastebin's have expired also. - Luke Stanley

2 Answers

1
votes

This was taken care of by another developer who made a plugin. Try this out and see if it works for you

https://github.com/eduplus/pinchlayer

0
votes

Here is the updated version of the tutorial: http://jsfiddle.net/9eaBq/

Just replace lines from 69 to 71 by this code:

var scale = {
  x: stage.scale().x * dist / lastDist,
  y: stage.scale().y * dist / lastDist
};
stage.scale(scale);

Working on an iPad (Chrome & Safari) under iOS7.