This example shows the use of the SVG.js library to:
- create simple objects and set the drag-and-drop on them
- grouping all the objects and make both the zoom and moving effects on the entire draw
Last active
October 15, 2017 08:05
-
-
Save cartoda/7c81ac78d1bba1f4ba40 to your computer and use it in GitHub Desktop.
Zoom and drag-and-drop with SVG.js library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Example of use of the SVG.js library" /> | |
| <meta charset="utf-8"> | |
| <title>SVG.js library example</title> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> | |
| <script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js"></script> | |
| <script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js"></script> | |
| <script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js"></script> | |
| <script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.draggable.js"></script> | |
| <script type="text/javascript"> | |
| var MAX_ZOOM_IN = 2.0; | |
| var MAX_ZOOM_OUT = 0.2; | |
| var zoomStep = 0.2; | |
| var actualZoom = 1.0; | |
| var MOVE_STEP = 100; | |
| var draw; | |
| var dataDraw; | |
| var group; | |
| $(function() { | |
| //Get the background image from the server and draw the objects | |
| $.get( "http://wafi.iit.cnr.it/webvis/tmp/tiger.svg", function( data ) { | |
| var xmlDataReceived = (new XMLSerializer()).serializeToString(data); | |
| //Set the viewport size | |
| draw = SVG('map').size('960px', '450px'); | |
| //Set the double click event on the map to zoom on the double clicked point | |
| draw.dblclick(function(eventData) { | |
| group.center(eventData.x, eventData.y); | |
| zoomIn(); | |
| }); | |
| //Draw the background | |
| dataDraw = draw.svg(xmlDataReceived); | |
| //Draw two circles and one rectangle on which to do the drag and drop | |
| var circle1 = draw.circle(100).fill('#ff0').draggable(); | |
| var circle2 = draw.circle(100).fill('#ae2').draggable(); | |
| var rect1 = draw.svg('<rect id="rect1235" x="50" y="50" fill="#F7931E" stroke="#C1272D" stroke-width="5" width="100" height="50"/>'); | |
| var rect1 = rect1.get('rect1235').draggable(); | |
| //Group the background and the created objects to do the tranformations on all | |
| group = draw.group(); | |
| dataDraw.get('viewport').addTo(group); | |
| circle1.addTo(group); | |
| circle2.addTo(group); | |
| rect1.addTo(group); | |
| }, 'xml'); | |
| }); | |
| function zoomIn(){ | |
| if(actualZoom < MAX_ZOOM_IN){ | |
| actualZoom = roundFloat(parseFloat(actualZoom) + parseFloat(zoomStep)); | |
| group.scale(actualZoom, actualZoom); | |
| } | |
| } | |
| function zoomOut(){ | |
| if(actualZoom > MAX_ZOOM_OUT){ | |
| actualZoom = roundFloat(parseFloat(actualZoom) - parseFloat(zoomStep)); | |
| group.scale(actualZoom, actualZoom); | |
| } | |
| } | |
| function moveDrawLeft(){ | |
| group.x(group.x() - MOVE_STEP); | |
| } | |
| function moveDrawRight(){ | |
| group.x(group.x() + MOVE_STEP); | |
| } | |
| function moveDrawTop(){ | |
| group.y(group.y() - MOVE_STEP); | |
| } | |
| function moveDrawBottom(){ | |
| group.y(group.y() + MOVE_STEP); | |
| } | |
| function roundFloat(value){ | |
| return value.toFixed(2); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map" width="960" height="450"></div> | |
| <br/> | |
| <button id="zoomIn" onclick="zoomIn()">Zoom In</button> | |
| <button id="zoomOut" onclick="zoomOut()">Zoom Out</button> | |
| <button id="moveLeft" onclick="moveDrawLeft()">Move left</button> | |
| <button id="moveRight" onclick="moveDrawRight()">Move right</button> | |
| <button id="moveTop" onclick="moveDrawTop()">Move top</button> | |
| <button id="moveBottom" onclick="moveDrawBottom()">Move bottom</button> | |
| </body> | |
| </html> |
Another issue: Apparently, SVG.js does not support touch events "out of the box". The d3.js example works better.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After a zoom in command, the drag and drop behavior is a little off. It seems to be a non-trivial problem with SVG.js itself.