您的位置:首頁> 實例代碼> SVG實例

SVG使用鼠標點擊繪制折線效果

2017-2-1 13:15| 作者: 螞蟻小編| 查看: 12409| 評論: 0|來自: 螞蟻部落

分享一段代碼實例,它通過鼠標點擊實現了繪制折線的功能。

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

代碼實例如下:

[HTML] 純文本查看 復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.kolabortv.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>

鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
亚洲骑兵 - 东方AV在线,我想看美女下面的毛,大香蕉一本道久在线 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>