創建可通過從角落拖動來調整大小的svg元素

Question

我正在創建一個網站，其中包含一組允許用戶繪製不同類型圖表的人員。我現在正在開發工作分解樹（WBT）圖表，並且遇到了svg元素的問題。

我希望能夠允許用戶通過從角上拖動形狀來調整畫布上的元素。

我在網上搜索了幾個小時尋找合適的解決方案，但似乎無法找到任何東西。

任何人都可以幫我嗎？

感謝

Answer 1

確定這裏就是我想出的代碼，它不是最好的，但它會幫助你瞭解我們如何能做到「調整」

的jsfiddle在這裏http://jsfiddle.net/sv66bxee/

我的HTML代碼： -

<div style="border: 2px solid;width: 800px;"> 
     <svg id="mycanvas" width="800px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
     <rect id="myrect" fill="black" x="100" y="70" width="100" height="100" /> 

     <rect id="resize" fill="red" x="190" y="160" width="20" height="20" /> 
     </svg> 
    </div> 

和一些JavaScript： -

document.addEventListener('mousedown', mousedown, false); 

     var mousedown_points; 
     function mousedown(e) { 

      var target = e.target; 
      if (target.id === 'resize') { 
       mousedown_points = { 
        x: e.clientX, 
        y: e.clientY 
       } 
       document.addEventListener('mouseup', mouseup, false); 
       document.addEventListener('mousemove', mousemove, false); 
      } 
     } 

     function mousemove(e) { 
      var current_points = { 
       x: e.clientX, 
       y: e.clientY 
      } 

      var rect= document.getElementById('myrect'); 
      var w=parseFloat(rect.getAttribute('width')); 
      var h=parseFloat(rect.getAttribute('height')); 

      var dx=current_points.x-mousedown_points.x; 
      var dy=current_points.y-mousedown_points.y; 

      w+=dx; 
      h+=dy; 

      rect.setAttribute('width',w); 
      rect.setAttribute('height',h); 

      mousedown_points=current_points; 

      updateResizeIcon(dx,dy); 
     } 

     function updateResizeIcon(dx,dy){ 
      var resize= document.getElementById('resize'); 
      var x=parseFloat(resize.getAttribute('x')); 
      var y=parseFloat(resize.getAttribute('y')); 

      x+=dx; 
      y+=dy; 

      resize.setAttribute('x',x); 
      resize.setAttribute('y',y); 
     } 


     function mouseup(e) { 
      document.removeEventListener('mouseup', mouseup, false); 
      document.removeEventListener('mousemove', mousemove, false); 
     }