Loading ...
Sorry, an error occurred while loading the content.
 

viewbox question

Expand Messages
  • gonzo4819
    I have an svg map that displays a particular background. It, of course, has its own particular viewbox setting. I also have some other smaller objects that are
    Message 1 of 3 , Jul 29, 2009
      I have an svg map that displays a particular background. It, of course, has its own particular viewbox setting. I also have some other smaller objects that are tagged in separate <svg></svg> pairs which have their own viewbox settings. This way I am able to scale both the background (which scales both the background and all of the smaller object on it) and the smaller graphic objects independently. That is, I can adjust the viewbox of a smaller object and it will change size wrt to the background, and I can change the overall scale of the background which adjusts everything.

      I also can drag the graphic objects all around the background. All of this seems to be working fine.

      However, when I am at the normal 1:1 settings for my viewboxes of both the background and the draggable objects, the dragging works fine. But when I adjust the background viewbox setting to reduce the whole page (background and draggable objects), the mouse does not track the object correctly when I drag it. That is, I can drag the smaller object across the page, but the mouse advances faster than the object until the mouse is no longer on the object. By the time I have dragged the mouse across the whole page, the mouse is inches away from the draggable object. Even when the mouse is no longer on the object, it still moves with the mouse (provided of course I keep the mouse button down and am actually dragging).

      So my question is do I have to adjust the mouse is some way when I zoom in and out of my svg image? How do I adjust the mouse coordinates when I have change the scaling or zooming by adjusting the viewbox settings?

      Does my question make sense???

      -Andres
    • Francis Hemsher
      Hi Andres, Below are a facimile of two functions I use for various drag/drop needs at differing svg image sizes, scales, and viewboxes. The computVb() is
      Message 2 of 3 , Jul 30, 2009
        Hi Andres,
        Below are a facimile of two functions I use for various drag/drop needs at differing svg image sizes, scales, and viewboxes. The computVb() is called to set the public vars when scale and/or translate changes or the values need init.
        The second, dragMe(evt) is associated with translating the dragged element.

        This may help in your application.
        Regards,
        Francis

        function computeVB()
        {
        var viewBox=mySVG.getAttribute("viewBox")
        var vbSplit=viewBox.split(" ")
        VbOffsetX=parseFloat(vbSplit[0])
        VbOffsetY=parseFloat(vbSplit[1])
        var vbWidth=parseFloat(vbSplit[2])
        var vbHeight=parseFloat(vbSplit[3])
        var rePx=/px/
        var svgPixWidth=svgSpan.style.width
        var svgPixHeight=svgSpan.style.height
        svgPixWidth=svgPixWidth.replace(rePx,"")
        svgPixHeight=svgPixHeight.replace(rePx,"")
        VbRatioX=vbWidth/svgPixWidth;
        VbRatioY=vbHeight/svgPixHeight;
        SCALE= mySVG.currentScale;
        TX= mySVG.currentTranslate.x;
        TY= mySVG.currentTranslate.y;

        }


        function dragMe(evt)
        {
        var myX=((evt.getClientX()-TX)/SCALE)*VbRatioX+VbOffsetX
        var myY=((evt.getClientY()-TY)/SCALE)*VbRatioY+VbOffsetY
        }


        --- In svg-developers@yahoogroups.com, "gonzo4819" <andres@...> wrote:
        >
        > I have an svg map that displays a particular background. It, of course, has its own particular viewbox setting. I also have some other smaller objects that are tagged in separate <svg></svg> pairs which have their own viewbox settings. This way I am able to scale both the background (which scales both the background and all of the smaller object on it) and the smaller graphic objects independently. That is, I can adjust the viewbox of a smaller object and it will change size wrt to the background, and I can change the overall scale of the background which adjusts everything.
        >
        > I also can drag the graphic objects all around the background. All of this seems to be working fine.
        >
        > However, when I am at the normal 1:1 settings for my viewboxes of both the background and the draggable objects, the dragging works fine. But when I adjust the background viewbox setting to reduce the whole page (background and draggable objects), the mouse does not track the object correctly when I drag it. That is, I can drag the smaller object across the page, but the mouse advances faster than the object until the mouse is no longer on the object. By the time I have dragged the mouse across the whole page, the mouse is inches away from the draggable object. Even when the mouse is no longer on the object, it still moves with the mouse (provided of course I keep the mouse button down and am actually dragging).
        >
        > So my question is do I have to adjust the mouse is some way when I zoom in and out of my svg image? How do I adjust the mouse coordinates when I have change the scaling or zooming by adjusting the viewbox settings?
        >
        > Does my question make sense???
        >
        > -Andres
        >
      • Andres Gonzalez
        Francis, Thanks for your response. I will try this out. -Andres
        Message 3 of 3 , Aug 5, 2009
          Francis,

          Thanks for your response. I will try this out.

          -Andres


          Francis Hemsher wrote:
          >
          >
          > Hi Andres,
          > Below are a facimile of two functions I use for various drag/drop
          > needs at differing svg image sizes, scales, and viewboxes. The
          > computVb() is called to set the public vars when scale and/or
          > translate changes or the values need init.
          > The second, dragMe(evt) is associated with translating the dragged
          > element.
          >
          > This may help in your application.
          > Regards,
          > Francis
          >
          > function computeVB()
          > {
          > var viewBox=mySVG.getAttribute("viewBox")
          > var vbSplit=viewBox.split(" ")
          > VbOffsetX=parseFloat(vbSplit[0])
          > VbOffsetY=parseFloat(vbSplit[1])
          > var vbWidth=parseFloat(vbSplit[2])
          > var vbHeight=parseFloat(vbSplit[3])
          > var rePx=/px/
          > var svgPixWidth=svgSpan.style.width
          > var svgPixHeight=svgSpan.style.height
          > svgPixWidth=svgPixWidth.replace(rePx,"")
          > svgPixHeight=svgPixHeight.replace(rePx,"")
          > VbRatioX=vbWidth/svgPixWidth;
          > VbRatioY=vbHeight/svgPixHeight;
          > SCALE= mySVG.currentScale;
          > TX= mySVG.currentTranslate.x;
          > TY= mySVG.currentTranslate.y;
          >
          > }
          >
          > function dragMe(evt)
          > {
          > var myX=((evt.getClientX()-TX)/SCALE)*VbRatioX+VbOffsetX
          > var myY=((evt.getClientY()-TY)/SCALE)*VbRatioY+VbOffsetY
          > }
          >
          > --- In svg-developers@yahoogroups.com
          > <mailto:svg-developers%40yahoogroups.com>, "gonzo4819" <andres@...> wrote:
          > >
          > > I have an svg map that displays a particular background. It, of
          > course, has its own particular viewbox setting. I also have some other
          > smaller objects that are tagged in separate <svg></svg> pairs which
          > have their own viewbox settings. This way I am able to scale both the
          > background (which scales both the background and all of the smaller
          > object on it) and the smaller graphic objects independently. That is,
          > I can adjust the viewbox of a smaller object and it will change size
          > wrt to the background, and I can change the overall scale of the
          > background which adjusts everything.
          > >
          > > I also can drag the graphic objects all around the background. All
          > of this seems to be working fine.
          > >
          > > However, when I am at the normal 1:1 settings for my viewboxes of
          > both the background and the draggable objects, the dragging works
          > fine. But when I adjust the background viewbox setting to reduce the
          > whole page (background and draggable objects), the mouse does not
          > track the object correctly when I drag it. That is, I can drag the
          > smaller object across the page, but the mouse advances faster than the
          > object until the mouse is no longer on the object. By the time I have
          > dragged the mouse across the whole page, the mouse is inches away from
          > the draggable object. Even when the mouse is no longer on the object,
          > it still moves with the mouse (provided of course I keep the mouse
          > button down and am actually dragging).
          > >
          > > So my question is do I have to adjust the mouse is some way when I
          > zoom in and out of my svg image? How do I adjust the mouse coordinates
          > when I have change the scaling or zooming by adjusting the viewbox
          > settings?
          > >
          > > Does my question make sense???
          > >
          > > -Andres
          > >
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.