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

Re: Zoom box

Expand Messages
  • Helder Magalhães
    ... 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
    Message 1 of 5 , Apr 2 7:19 AM
    View Source
    • 0 Attachment
      > 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
    • 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 2 of 5 , Apr 2 8:19 AM
      View Source
      • 0 Attachment
        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 3 of 5 , Apr 2 9:47 AM
        View Source
        • 0 Attachment
          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 4 of 5 , Apr 2 10:41 AM
          View Source
          • 0 Attachment
            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.