3

Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.

I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.

However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)

I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.

Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)

Not-Working Demo

Community
  • 1
  • 1
Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • By the way, lots of people don't have mouse wheels, or a mouse, me included. –  Nov 25 '11 at 11:59

1 Answers1

3

This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.

To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.

Updated JSFiddle

RSG
  • 7,013
  • 6
  • 36
  • 51
  • Thanks RSG - I updated the demo with something a bit more complicated, more apt to an actual situation. If you have any advice, the same issue is still there for that one. :) – Rion Williams Aug 17 '11 at 17:46
  • You need to move the declaration for mousex/mousey outside of the function- it's still updating it on zoom out. This doesn't completely fix the logic for the translation positioning- I think the offset needs to be a function of the current translation and zoom level to ensure it always appears in bounds. I'll fiddle more at lunch. Very nice routine for the skyline. – RSG Aug 17 '11 at 18:10
  • It appears to be breaking after the 2nd zoom - it's almost like you would have to store the previous points in a array and push and pop off with zoom ins/outs. – Rion Williams Aug 17 '11 at 18:25
  • I thought about that, it could get weird if you zoomed all the way in, partially out, in on a new point, and then all the way out. It would jump when it got to the point in the array where the user changed direction. – RSG Aug 17 '11 at 18:32
  • That's true - it's a bit of a strange problem. I almost wish I could make those buildings always drawn in the same area, as I am trying to add a "panning" function into it as well, which shouldn't complicate things (I hope) http://stackoverflow.com/questions/7096921/html5-panning-based-on-mouse-movement – Rion Williams Aug 17 '11 at 18:37