您的位置:钱柜娱乐777官网登入> 实例代码>SVG实例

SVG使用鼠标点击绘制折线效果

2017-2-1 13:15| 发布者: 蚂蚁小编| 查看: 275| 评论: 0|来自: 钱柜手机网页版

分享一段代码实例,它通过鼠标点击实现了绘制折线的功能。

也就是类似于js的dom操作,我们也可以称之为SVG DOM操作。

代码实例如下:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部