SVG使用滑鼠點選繪製折線效果

螞蟻小編發表於2017-02-01
SVG
分享一段程式碼例項，它通過滑鼠點選實現了繪製折線的功能。

也就是類似於js的dom操作，我們也可以稱之為SVG DOM操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div class="div1">
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  </svg>
</div>
<script>
window.onload = function() {
  var ming = 'http://www.w3.org/2000/svg';
  var oSvg = document.getElementById('svg1');
 
  var oPolyLine = null;
  var pointsNum = '';
 
  function createTag(tagName, tagAttr) {
    let tag = document.createElementNS(ming, tagName);
    for (var attr in tagAttr) {
      tag.setAttribute(attr, tagAttr[attr]);
    }
    return tag;
  }
  var obj = document.querySelectorAll('.div1')[0];
 
 
  obj.appendChild(createTag('svg', {
    'xmlns': ming
  }));
  oSvg.onmousedown = function(ev) {
    if (!oPolyLine) {
      oPolyLine = createTag('polyline', {
        'fill': 'none',
        'stroke': 'red',
        'stroke-width': '2'
      });
      oSvg.appendChild(oPolyLine);
    }
    var x = ev.clientX - obj.offsetLeft;
    var y = ev.clientY - obj.offsetTop;
 
    if (pointsNum == '') {
      pointsNum = x + ',' + y;
    } else {
      pointsNum += ',' + x + ',' + y;
    }
 
    oPolyLine.setAttribute('points', pointsNum);
    var oCircle = createTag('circle', {
      'cx': x,
      'cy': y,
      'r': '5',
      'fill': 'white',
      'stroke': 'red',
      'stroke-width': 3
    });
    oSvg.appendChild(oCircle);
 
    if (ev.button === 2) {
      oSvg.onmousemove = null;
      oSvg.oncontextmenu = function() {
        oSvg.onmousemove = null;
        return false;
      };
    } else {
      oSvg.onmousemove = function(ev) {
        var ev = ev || window.event;
 
        if (oPolyLine) {
          var x = ev.clientX - obj.offsetLeft;
          var y = ev.clientY - obj.offsetTop;
          oPolyLine.setAttribute('points', pointsNum + ',' + x + ',' + y);
        }
 
      };
    }
  }
}
</script>
</body>
</html>

相關文章