Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Viewdir SVG-Draw: Draw SVG shapes and layers on stuff.">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Viewdir SVG-Draw Demo</title>
  
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/viewdir/svg-draw-component/master/dist/svg-draw-component.css" />
  <script src="https://rawgit.com/viewdir/svg-draw-component/master/dist/svg-draw-component.bundle.js"></script>
</head>
<body class="svg-draw-component">
​
    <div id="svgdraw"></div>
​
    <img id="subject" style="display:none;" src="https://viewdir.github.io/svg-draw-component/examples/img/floorplan.png"/>
    <button id="loadSVG">loadSVG</button>
​
    <div class="event-set" style="margin-top:50px;"/>
​
    <script type="text/javascript">
​
        var svgdraw;
​
        $(function() {
​
            svgdraw = new IIIFComponents.SvgDrawComponent({
              element: "#svgdraw",
              subjectType: "image",
              subject: "subject",
              toolbars: {
                  tools: {
                      show: true,
                      buttons: [
                          { name: 'point', fa_icon:'fa-map-pin'},
                          { name: 'line', fa_icon:'fa-pencil'},
                          { name: 'cloud', fa_icon:'fa-cloud'},
                          { name: 'rect', fa_icon:'fa-stop'},
                          { name: 'separator'},
                          { name: 'select', fa_icon:'fa-arrows'}
                      ]
                  },
                  layers: {
                      show: true,
                      presets: [{
                          name: 'Walkable Areas',
                          visible: true,
                          locked: false,
                          active: false
                          // load svg?
                          // export svg?
                          // trash button?
                        },
                        {
                          name: 'Points of Interest',
                          visible: true,
                          locked: false,
                          active: true
                        }
                      ]
                  },
              }
            });
​
            function displayEvents(eventName, args){
                $( ".event-set" ).empty();
                var events = $( '<div class="events"/>' );
                events.append("<h2>" + eventName + "</h2>");
                var pre = $( "<pre/>" );
                pre.text(JSON.stringify(args, undefined, 2));
                events.append(pre);
                $( ".event-set" ).append(events);
                $( ".events" ).addClass( "events-flash" );
            };
​
            svgdraw.on('shapeCompleted', function(args) {
                displayEvents('shapeCompleted',args);
            });
​
            svgdraw.on('shapeUpdated', function(args) {
                displayEvents('shapeUpdated',args);
            });
​
            svgdraw.on('shapeDeleted', function(args) {
                displayEvents('shapeDeleted',args);
            });
​
            svgdraw.on('svgLoaded', function(args) {
                displayEvents('svgLoaded',args);
            });
​
            function loadSVG(){
                svgdraw.importSVG('<svg xmlns="http://www.w3.org/2000/svg"><rect x="506" y="284" width="71" height="103" fill="#ffffff" fill-rule="nonzero" stroke="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" opacity="0.5" style="mix-blend-mode: normal"></rect></svg>');
                return false;
            }
​
            $( "#loadSVG" ).on( "click", loadSVG );
​
        });
​
    </script>
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sdellispro
0viewers