Pan + Zoom HTML5 canvas grid with pinned first column

4
votes

I'd like to create a HTML5 canvas grid with a pinned first column (MS Excel has a similar option). Up to now I've been able to create the following: http://jsfiddle.net/dobbylan/AbnpE/

I have added Pan + Zoom functionality based on Phrogz's posting here: Zoom Canvas to Mouse Cursor

However I have the following difficulties with panning + zooming and pinned column:

  • I'd like to prevent panning the canvas to the right further than the first column, i.e. the first column can at most be at the left border. (Same applies for the upper border and panning down)
  • When zooming, there is a problem with scaling the first column, that I am unable to fix

Can someone please help me out on this?

1
javascripthtmlcanvaszoomingpanning

1 Answers

4
votes

check this fiddle out:

http://jsfiddle.net/U8BE5/1/

It should give you some ideas about how to handle your boundary conditions (also with scaling).

I'm not sure why you've chosen to use two canvases and not use jQuery, this is probably causing more harm than good.

The pertinent code for boundaries:

if (gX > 0) gX = 0;
if (gX < canvas.width - gW * gScale) gX = canvas.width - gW * gScale;
if (gY > 0) gY = 0;
if (gY < canvas.height - gH * gScale) gY = canvas.height - gH * gScale;

Check out my general approach in the fiddle to see if you might want to switch your strategy a bit.

To be honest I couldn't follow some of your code.