I'm implementing the ability to zoom-in and pan around my canvas. I'm doing this by having two canvases, one for the drawing and one displaying the viewport. I'm having trouble finding the limit for the clipping region.
Anyway this all works, i'm just setting the scale to some value higher than 1 when zoom-in is called, this has the desired effect.
I'm panning the canvas in the same way you would animate a sprite-sheet, the viewport canvas just acts as the clipping region on-top of the drawing canvas.
I'm stuck with what numbers to set for the boundaries to stop the canvas going too far right and down however.
Here how i'm implementing the pan just for some clarity:
//This only gets called when the canvas is zoomed in.
viewPort.drawImage(canvas,translationX,translationY,viewPort.width,viewPort.height
,0,0,viewPort.width,viewPort.height);
TranslationX starts off at 0 and after every key-press of the right arrow I increment that by some value, I know this should not be some arbitrary number, but for now I've just set it to 4.
Anyway this all works, but it goes off the edge of the canvas, and i'm having trouble working out what the condition should be to stop panning right, here's what I have so far:
if(canvas.width + translationX <= bCanvas.width)
translationX += 4; //Pan right...
Obviously this doesn't work, it pans about 1/5 of the viewport off the canvas edge. I'm now just hacking about with it, just throwing arbitrary numbers into the condition, so thought this would be a good time to ask for some guidance.
Thanks in advance
Edit:
Ok so i've made an image to illustrate the problem incase my explanation was unclear.
The green box represents the image I am panning, the 'canvas' named in the above snippets.
The yellow box represents the clipping region, the 'viewPort' in the above snippet.
The grey area is just represents the rest of the webpage.
So to clarify, i'm confused as to what value to put into the condition to stop the clipping region going off of the canvas.
Thanks again
