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

Re: Zoom box

Expand Messages
  • JK_AD
    Thanks Helder, however I actually need something a bit more complicated. I d like the original image to appear in one size, while the magnification box would
    Message 1 of 5 , Apr 2, 2008
      Thanks Helder, however I actually need something a bit more
      complicated. I'd like the original image to appear in one size, while
      the magnification box would show the zoomed in version at the same time.

      If you've ever used the Windows Magnifier tool (if you use Windows XP,
      it's under Accessories->Accessibility), that's basically the
      functionality I'm looking for.

      Thanks for the link, though.

      Alexis Deveria



      --- In svg-developers@yahoogroups.com, Helder Magalhães
      <helder.magalhaes@...> wrote:
      >
      > > I'm looking for a way to have a magnification box in the corner of my
      > > SVG object that would simply show a zoomed in version of wherever the
      > > mouse cursor is.
      >
      > By coincidence, just received a solution very close [1] to what you
      > intend. Shouldn't be hard to modify for it to suit your need.
      >
      > Hope this helps,
      >
      > Helder Magalhães
      >
      > [1] https://bugzilla.mozilla.org/show_bug.cgi?id=163068#c40
      >
    • David
      Hi Alexis, would something like this fit ?
      Message 2 of 5 , Apr 2, 2008
        Hi Alexis,

        would something like this fit ?

        <clipPath id="clip">
        <rect x="0" y="0" *width="100" height="100"*/>
        </clipPath>
        <svg clip-path="url(#clip)" >
        <g transform="translate(*50 50*) scale(*3*)">
        <use id="zoom" xlink:href="*#main*" />
        </g>
        </svg>

        <script>
        var zoom = document.getElementById("zoom");
        function moveZoom(evt) {
        var x = -evt.clientX;
        var y = -evt.clientY;
        zoom.setAttribute("transform", "translate("+x+" "+y+")");
        }
        var zoomed = document.getElementById("*main*");
        zoomed.addEventListener("mousemove", moveZoom, false);
        </script>


        <rect width="*100*" height="*100*"> defines the size of the zoom box (
        translate(*50 50*) should change accordingly : it's the center of it).

        scale(*3*) is the zoom factor.

        "main" is the id of the object being magnified.


        (note: this solution probably has some issues if the magnified object reacts
        to some events)

        David


        I'm looking for a way to have a magnification box in the corner of my
        > SVG object that would simply show a zoomed in version of wherever the
        > mouse cursor is.
        >
        > Does anyone know of a way to accomplish this? I will happily elaborate
        > if necessary.
        >


        [Non-text portions of this message have been removed]
      • JK_AD
        Woohoo! Works beautifully. I definitely think this should do the trick. Thank you David, much appreciated! (for anyone wondering, I m thinking of incorporating
        Message 3 of 5 , Apr 2, 2008
          Woohoo! Works beautifully. I definitely think this should do the trick.

          Thank you David, much appreciated!

          (for anyone wondering, I'm thinking of incorporating this
          functionality in my Opera widget:
          http://widgets.opera.com/widget/9231/ )


          --- In svg-developers@yahoogroups.com, David <leunen.d@...> wrote:
          >
          > Hi Alexis,
          >
          > would something like this fit ?
          >
          > <clipPath id="clip">
          > <rect x="0" y="0" *width="100" height="100"*/>
          > </clipPath>
          > <svg clip-path="url(#clip)" >
          > <g transform="translate(*50 50*) scale(*3*)">
          > <use id="zoom" xlink:href="*#main*" />
          > </g>
          > </svg>
          >
          > <script>
          > var zoom = document.getElementById("zoom");
          > function moveZoom(evt) {
          > var x = -evt.clientX;
          > var y = -evt.clientY;
          > zoom.setAttribute("transform", "translate("+x+" "+y+")");
          > }
          > var zoomed = document.getElementById("*main*");
          > zoomed.addEventListener("mousemove", moveZoom, false);
          > </script>
          >
          >
          > <rect width="*100*" height="*100*"> defines the size of the zoom box (
          > translate(*50 50*) should change accordingly : it's the center of it).
          >
          > scale(*3*) is the zoom factor.
          >
          > "main" is the id of the object being magnified.
          >
          >
          > (note: this solution probably has some issues if the magnified
          object reacts
          > to some events)
          >
          > David
          >
          >
          > I'm looking for a way to have a magnification box in the corner of my
          > > SVG object that would simply show a zoomed in version of wherever the
          > > mouse cursor is.
          > >
          > > Does anyone know of a way to accomplish this? I will happily elaborate
          > > if necessary.
          > >
          >
          >
          > [Non-text portions of this message have been removed]
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.