zooming using setviewbox

[kavita deshpande]

Hi,
I am using the setViewBox() function in Raphael 2. The width and
height is multiplied by a value like (1.2, 1.3 ...). This changes the
magnification/ zooming properly but the x and y which I have given as
0,0 makes the paper display its contents after some offset. If i
modify the x and y to some positive value after the rendering( using
firebug!!) then the top left of the paper moves back and above to its
right position. I want to know how will the value be calculated. I
have no idea about how the x,y affect the viewbox. If anybody can give
me any pointers for this it will be a real help.

I have tried giving the difference between the width/ height divided
by 2. Also I must mention that I am not rendering an image but various
raphael shapes e.g. rects, paths text etc. in my paper.

Looking forward to some help!
Kavita

[AS]

I am not quiet sure if I understand you correctly

the setViewBox() function does as its name suggests
setViewBox(x,y,width,eight,false)

it shows only a part of your raphael element stretched to your papers
width/height
imagine you were looking through a window. that window only presents a
part of your svg
setViewBox(x,y,width,eight,false)
x,y - starting location from your origninal raphael svg element. (top
left corner of the window)
width, height - dimensions of the window.



On 8 Feb., 06:01, kavita deshpande <kavitapravindeshpa...@gmail.com>
wrote:

[charles thomas]

K

Here are some worked examples but there are no images in these.

Simple

http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=paper.setviewbox

Elaborate

http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=zooming

---

From: kavita deshpande <kavitaprav...@gmail.com>
To: Raphaël <raph...@googlegroups.com>
Sent: Wednesday, February 8, 2012 12:01:25 AM
Subject: zooming using setviewbox

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[kavita deshpande]

Hi,

Thanks for your help
I know the usage of setViewBox for panning as you've said. I move the
x further and i get to see the paper from that point rather than the
actual paper start. Got that.

But my problem is when I try to use it for zooming. In that case I
give x and y as 0, and give smaller width for more bigger picture and
bigger width for a shrunken view. This is also happening fine. The
main issue is that when the width is lesser it is centralized so the
top moves below and left towards right. As though the window shrinks
from all sides equally.

Due to this i need to compensate so that the viewbox always starts
from the same position. I realise that I need to compensate by giving
some nonzero value x and y to the setViewBox function.

I will go through the posted examples

Thanks
all help is welcome!

KAvita

On Feb 8, 8:17 pm, charles thomas <charles...@yahoo.com> wrote:
> K
>
> Here are some worked examples but there are no images in these.
> Simple
>

> http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=paper.s...
> Elaboratehttp://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=zooming
>
> ________________________________
>  From: kavita deshpande <kavitapravindeshpa...@gmail.com>

> To: Raphaël <raph...@googlegroups.com>
> Sent: Wednesday, February 8, 2012 12:01:25 AM
> Subject: zooming using setviewbox
>
> Hi,
> I am using the setViewBox() function in Raphael 2. The width and
> height is multiplied by a value like (1.2, 1.3 ...). This changes the
> magnification/ zooming properly but the x and y which I have given as
> 0,0 makes the paper display its contents after some offset. If i
> modify the x and y to some positive value after the rendering( using
> firebug!!) then the top left of the paper moves back and above to its
> right position. I want to know how will the value be calculated. I
> have no idea about how the x,y affect the viewbox. If anybody can give
> me any pointers for this it will be a real help.
>
> I have tried giving the difference between the width/ height divided
> by 2. Also I must mention that I am not rendering an image but various
> raphael shapes e.g. rects, paths text etc. in my paper.
>
> Looking forward to some help!
> Kavita
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[Jerome]

I have implemented it here: http://cosmicscale.appspot.com

If you want to zoom in at (0,0):

var zoom = 1.2;
paper.setViewBox(-(paperWidth*0.5/zoom), -(paperHeight*0.5/zoom),
paperWidth/zoom, paperHeight/zoom));

If zoom = 1, the view box is simply centered at (0,0). If zoom becomes
higher, the view box is inversely smaller and stretched across the
paper.

If you want to zoom in at other coordinates, you will need to offset x
and y, something like:

paper.setViewBox(xZoom - (paperWidth*0.5/zoom), yZoom -
(paperHeight*0.5/zoom), paperWidth/zoom, paperHeight/zoom));

Best regards,
Jerome