title: resizable 2d floor plan , ruler on drag images
body: <p>I am searching for interactive 2d floor plan with following feature</p>
  
  <p><a href="https://i.stack.imgur.com/7u8Ot.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7u8Ot.gif" alt="enter image description here"></a></p>
  
  <p>that means user can drag and resize the floor map on the same time .
  only relative link i have found is</p>
  
  <p>Edit : till now i have been able to create svg based diagram and applied anchor 
  to drag image </p>
  
  <p><a href="https://i.stack.imgur.com/pigPg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pigPg.gif" alt="enter image description here"></a></p>
  
  <p>my fiddle </p>
  
  <p><a href="https://jsfiddle.net/sbh24vuq/" rel="nofollow noreferrer">https://jsfiddle.net/sbh24vuq/</a></p>
  
  <pre><code> $(function() {
  
            addBackdrop(50);
  
            var $window = $(window);
            var radius = 40, editColor = 'rgb(79, 128, 255)';
            var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
            var two = new Two({
                type: Two.Types[type],
                fullscreen: true,
                autostart: true
              }).appendTo(document.body);
  
  
           ....
  complete code is on fiddle 
          }
  </code></pre>
  
  <p>but i would like to add ruler in while dragging . </p>