Search code examples
javascriptraphael

Scroll Raphael zoomed-in paper


In this jsFiddle I have a Raphael paper with two rects. I zoomed in the paper 200% by applying setViewBox.

The width of the rects (they have the same size) is 50px, and with the setViewBox function they are extended to 100px, that works fine. My issue is that the paper dimensions should increase 200% as well (i.e. the paper height and width) and since the div containing the paper is smaller than the paper, I should be able to scroll.

I need to achieve the following:

(1) All the inner elements in the Raphael paper should increase their size 200%.

(2) The paper dimensions should also increase 200% to 400px.

(3) Since the dimensions of the zoomed paper (400px) are larger than its containing div (200px), the div should be scrollable.

Any ideas how to make this work? Doesn't have to be with setViewBox.


Solution

  • Are you trying to achieve something like this? It uses Paper.setSize to set the desired canvas size, then fits the graphics to the new canvas with Paper.setViewBox