SVG学习——8.鼠标点击连点成线

75 阅读 0 评论 50 点赞

我是靠谱客的博主可爱蛋挞，最近开发中收集的这篇文章主要介绍SVG学习——8.鼠标点击连点成线，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如图
在这里插入图片描述
感言：蛮好玩的，就是记不住学不会！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>啦啦啦</title>
<style>
#div1 { width:400px; height:400px; background:white; }
body { background:black; }
</style>
<script>
window.onload=function(){

  var svgNS='http://www.w3.org/2000/svg';
  var oParent=document.getElementById('div1');
  var oSvg=document.getElementById('svg1');

  var oPolyLine=null;
  var pointsNum='';

  function createTag(tag,objAttr){
    var oTag=document.createElementNS(svgNS,tag);
    for(var attr in objAttr){
      oTag.setAttribute(attr,objAttr[attr]);
    }
    return oTag;
  }

//鼠标点击连线
  oSvg.onmousedown=function(ev){
    var ev=ev || window.event;
    if(!oPolyLine){
      oPolyLine=createTag('polyline',{'fill':'none','stroke':'red','stroke-width':'2' });
      oSvg.appendChild(oPolyLine);
    }
    var x=ev.clientX-oParent.offsetLeft;
    var y=ev.clientY-oParent.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);
  };

//鼠标动的时候 有线跟随 
  oSvg.onmousemove=function(ev){
    var ev=ev||window.event;
    if( oPolyLine ){
      var x=ev.clientX-oParent.offsetLeft;
      var y=ev.clientY-oParent.offsetTop;
      oPolyLine.setAttribute('points',pointsNum+','+x+','+y);
    }
  };

//右键取消
  oSvg.oncontextmenu=function(){
    oSvg.onmousemove=null;
    return false;
  };

};

</script>
</head>
<body>
<div id="div1">
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" >

  </svg>
</div>
</body>
</html>