js 运用svg绑定鼠标事件实现的黏皮糖效果-CFANZ编程社区

js 运用svg绑定鼠标事件实现的黏皮糖效果
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/5.css"/>
  </head>
  <body>
    <div id="print"></div>
    <div id="content">
      <label for="long">长度：</label><input type="text" id="long"/>
      <hr />
      <button class="draw">画线</button>
      <hr />
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/se.js"></script>
    <script type="text/javascript">
    //动态创建svg标签，添加属性，同时添加入body
      var svgns = "http://www.w3.org/2000/svg";   
      $.svg = function $svg(tagName) {   
          return $(document.createElementNS(svgns, tagName));   
      };  
      var svg = $.svg('svg')
          svg.css("height",'600').css("width",'600').appendTo('#print') ;         
          var input = $('input')
          var data = [] //数据：多边形自身节点


      //所有线
      var lines = []

          //画线
          $('.draw').on('click',function(){
        //起点,终点,切割线
            var begin= []
            var last= []
        svg.on('mousedown',function(e){
                var line=$.svg('line')
                line.css('stroke','black').css('stroke-width','10').appendTo(svg)
            //绑定鼠标移动事件，给line标签添加属性
              svg.on('mousemove',function(en){
                //添加起点
                line.attr("x1",e.offsetX).attr("y1",e.offsetY) 
                begin = [e.offsetX,e.offsetY]

                //添加终点
                line.attr("x2",en.offsetX).attr("y2",en.offsetY); 
                last = [en.offsetX,en.offsetY]

                //横坐标的平方
                var row = Math.pow(en.offsetX - e.offsetX,2)
                //纵坐标
                var col = Math.pow(en.offsetY - e.offsetY,2)
//                  console.log(row,col)
                input.val(Math.sqrt(row+col));
              })
            })
        var nodes= []
        var dataNew = []
            svg.on('mouseup',function(e){

              $(document).unbind('mousemove')

        })
          })

    </script>
  </body>
</html>
0 条评论