Adjusting offset on a dragged Kinetic.Path element

Question

I am having to develop a draggable and zoomable world map, and being on a closed system, cannot rely on things like Google maps.

This is not going to be a full "map" application which is going to show more detail when zoomed, but basically show the world with various pins for lat/longs, and when zoomed, zoom on the area of the map that is currently centered in Stage.

I have been able to create a map using the Kinetic.Path method, and also able to create a slider to set the scale factor of that Path element. I have also set the draggable state of that element to true.

But when scaling, it always scales to the top left of the Path, so basically coords (0,0). I have used the setOffset() to move that Paths offset to the center of the Path (.5 the width, .5 the height). This had the side affect of putting 3/4 of the image outside the stage, so I adjusted the XY of the Path to .5 of the width and .5 of the height, which centered it again.

So I now have a Path that's centered in the stage, and when zoomed, zooms to the center of the Path. Beautiful. However, when I drag it and then zoom again, it continues to zoom based on the center of the Path. I need the zoom point (which I assume is controlled with setOffset()) to stay centered relative to the stage's center. That way, when they drag the Path and keep zooming, it will zoom to the center of what's in view.

I've tried various math (which is not my strong point) to try to adjust the offset after drag, but I can't seem to get it to work correctly. Can anyone explain the pattern to me?

Answer 1

I'm doing something very similar and, after looking around a bit, decided to adapt an existing library call kineticjs-viewport (I can't find the demo page since google change their &$*# search algorithm but there's a demo in the repository). It basically handles scaling, panning and zooming for you. There are two issues that I've found with it, namely:

1) When zooming, it zooms in on a point in the top-left corner and not center screen.

2) It's not compatible with the latest version of kinetic-js so, if you want to use the latest version of kinetic, you'll need to go in and change a bit of the code. It works fine with version v3.8.1 of kinetic-js though. Also, it's not hard to make it compatible so, if you decide to use it and need a hand, send me a pm.