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?
