locked
svg pan mouse

    Question

  • Hi, i've copy this code from Microsoft site: http://msdn.microsoft.com/it-it/library/ie/gg589508(v=vs.85).aspx#JavaScript_zoom

    <script>  
        /*  Constants: */
        var leftArrow   = 37; // The numeric code for the left arrow key.
        var upArrow     = 38;
        var rightArrow = 39;
        var downArrow   = 40;
        var panRate     = 10; // Number of pixels to pan per key press.   
        var zoomRate    = 1.1; // Must be greater than 1. Increase this value for faster zooming (i.e., less granularity).

        /* Globals: */
        var theSvgElement;
             
        function processKeyPress(evt)
        {
          var viewBox = theSvgElement.getAttribute('viewBox'); // Grab the object representing the SVG element's viewBox attribute.
          var viewBoxValues = viewBox.split(' ');    // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).

          viewBoxValues[0] = parseFloat(viewBoxValues[0]);  // Convert string "numeric" values to actual numeric values.
          viewBoxValues[1] = parseFloat(viewBoxValues[1]);
         
          switch (evt.keyCode)
          {
            case leftArrow:
              viewBoxValues[0] += panRate; // Increase the x-coordinate value of the viewBox attribute to pan right.
              break;
            case rightArrow:
              viewBoxValues[0] -= panRate; // Decrease the x-coordinate value of the viewBox attribute to pan left.
              break;
            case upArrow:
              viewBoxValues[1] += panRate; // Increase the y-coordinate value of the viewBox attribute to pan down.
              break;
            case downArrow:
              viewBoxValues[1] -= panRate; // Decrease the y-coordinate value of the viewBox attribute to pan up.     
              break;                        
          } // switch
         
          theSvgElement.setAttribute('viewBox', viewBoxValues.join(' ')); // Convert the viewBoxValues array into a string with a white space character between the given values.
        }     
       
        function zoom(zoomType)
        {
          var viewBox = theSvgElement.getAttribute('viewBox'); // Grab the object representing the SVG element's viewBox attribute.
          var viewBoxValues = viewBox.split(' ');    // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).

          viewBoxValues[2] = parseFloat(viewBoxValues[2]);  // Convert string "numeric" values to actual numeric values.
          viewBoxValues[3] = parseFloat(viewBoxValues[3]);
         
          if (zoomType == 'zoomIn')
          {
            viewBoxValues[2] /= zoomRate; // Decrease the width and height attributes of the viewBox attribute to zoom in.
            viewBoxValues[3] /= zoomRate; 
          }
          else if (zoomType == 'zoomOut')
          {
            viewBoxValues[2] *= zoomRate; // Increase the width and height attributes of the viewBox attribute to zoom out.
            viewBoxValues[3] *= zoomRate; 
          }
          else
            alert("function zoom(zoomType) given invalid zoomType parameter.");
         
          theSvgElement.setAttribute('viewBox', viewBoxValues.join(' ')); // Convert the viewBoxValues array into a string with a white space character between the given values.     
        }
       
        function zoomViaMouseWheel(mouseWheelEvent)
        {     
          if (mouseWheelEvent.wheelDelta > 0)
            zoom('zoomIn');
          else
            zoom('zoomOut');
           
          /* When the mouse is over the webpage, don't let the mouse wheel scroll the entire webpage: */
          mouseWheelEvent.cancelBubble = true; 
          return false;       
        }       

        function initialize()
        {       
          /* Add event listeners: */
          window.addEventListener('keydown', processKeyPress, true);  // OK to let the keydown event bubble.
          window.addEventListener('mousewheel', zoomViaMouseWheel, false); // This is required in case the user rotates the mouse wheel outside of the object element's "window".
                    
          var theSvgDocument = document.getElementById('objectElement').getSVGDocument(); // Not all browsers current support the getSVGDocument() method (as described in the W3C SVG spec).
          theSvgElement = theSvgDocument.documentElement;            // Sets a global variable. Best to only access the SVG element after the page has fully loaded.
         
          theSvgElement.addEventListener('keydown', processKeyPress, true);   // This is required in case the user presses an arrow key inside of the object element's "window".
          theSvgElement.addEventListener('mousewheel', zoomViaMouseWheel, false); // This is required in case the user rotates the mouse wheel inside of the object element's "window".
         
          /* If desired, one can set the initial size and position of the embedded SVG graphic here: */
          theSvgElement.setAttribute('viewBox', 595 + " " + 100 + " " + 0.7*3816 + " " + 0.7*612); // The original width and height of this particular SVG graphic is 3816 and 612, respectively.
        }   
      </script> 





    It works correctly, but i'd like use pan from mouse (in this example uses keyboard Arrow) : when i move mouse i'd like to move also svg.

    Thansk !



    • Edited by pol86 Monday, February 17, 2014 10:10 AM
    Monday, February 17, 2014 10:09 AM

Answers

  • Yes, Drag and Drop event might be better than mouse down and mouse up. http://www.w3schools.com/html/html5_draganddrop.asp

    • The ondragstart event is fired when the user starts to drag the selection.
    • The ondrag event is fired periodically during the drag operation.
    • The ondragend event is fired when the user has finished the drag operation (released the mouse button or pressed ESC).

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, February 18, 2014 9:54 AM
    Moderator

All replies

  • Hi pol86,

    How do you want to pan from mouse? In the example the keyboard Arrow has been used and therefore you could press left key to make your svg pan left. But if you are trying to catch the mouse action, how could you decided your svg pan vertically or horizontally?

    I think track mouse position should be the solution, take a look at : Quickstart: Pointers, mouse position could be calculated by getCurrentPoint and getIntermediatePoints methods or currentPoint and intermediatePoints properties.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, February 18, 2014 7:46 AM
    Moderator
  • thaks for you reply, i explain better my request :

    i'd like use mouse to drag my svg (with left\right key is ok, but is uneasy)

    Tuesday, February 18, 2014 8:00 AM
  • Hi Pol86,

    Take a look at a previous post:http://social.msdn.microsoft.com/Forums/windowsapps/en-US/3d34d024-58a8-47e5-a91c-3a4e39990a91/examples-of-a-draggable-svg-component?forum=winappswithhtml5

    You can't play around with SVG via script if it's not part of an HTML document. The good news, however, is when you embed an <svg> element inside your HTML, you can assign it IDs and use JavaScript to manipulate it.

    I wrote some code for mousedown and mouseup, it can move the svg, I think you could modify the logic part to fit your requirement :

            var x;
            var y;
    
            function mousedown(evt)
            {
                x = evt.screenX;
                y = evt.screenY;
            }
    
            function mouseup(evt)
            {
                var viewBox = theSvgElement.getAttribute('viewBox');	// Grab the object representing the SVG element's viewBox attribute.
                var viewBoxValues = viewBox.split(' ');				// Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).
    
                /* The array is filled with strings, convert the first two viewBox values to floats: */
                viewBoxValues[0] = parseFloat(viewBoxValues[0]);	// Represent the x-coordinate on the viewBox attribute.
                viewBoxValues[1] = parseFloat(viewBoxValues[1]);	// Represent the y coordinate on the viewBox attribute.
    
                viewBoxValues[0] = x - evt.screenX;
                viewBoxValues[1] = y - evt.screenY;
    
    
                theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
            }

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, February 18, 2014 9:14 AM
    Moderator
  • your code works ok, but when i click down and move mouse my svg don't move  (svg moves only when "mouseUp")
    Tuesday, February 18, 2014 9:43 AM
  • Yes, Drag and Drop event might be better than mouse down and mouse up. http://www.w3schools.com/html/html5_draganddrop.asp

    • The ondragstart event is fired when the user starts to drag the selection.
    • The ondrag event is fired periodically during the drag operation.
    • The ondragend event is fired when the user has finished the drag operation (released the mouse button or pressed ESC).

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, February 18, 2014 9:54 AM
    Moderator