【Svg】------- svg.draw.js 多边形的使用示例代码

钮誉

2023-12-01

1.svg.draw.js 多边形使用实例（在我用的时候感觉不太好用）(https://github.com/svgdotjs/svg.draw.js)

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="Svg.draw.js : Demo-Page">

    <link rel="stylesheet" type="text/css" media="screen" href="demo.css">
    
    <title>Svg.draw.js | Demo-Page</title>
    <style>
        #container{
            opacity: 1;
        }
    </style>

  </head>
  
  <body>
  <div id="container">
    <div class="box">
        <button id="cancel" onclick="cancels()">清除</button>
      <div id="polygonGridOnCtrl">
            <svg id="SvgjsSvg1152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs id="SvgjsDefs1153"></defs><polygon id="SvgjsPolygon1154" points="0,0" stroke="#000000" stroke-width="1" fill="#ff0000"></polygon></svg>
      </div>
    </div>
  </div>
    
    <script src="svg.min.js"></script>
    <script src="svg.draw.min.js"></script>
    <script>

        需要修改代码///
        
        var poly3 = new SVG("SvgjsSvg1152").size('100%', '100%').polygon().draw().attr('stroke-width',3).attr('fill','#f00').attr("stroke","#ffffff");

        poly3.on('drawstart', function(e){
            document.addEventListener('keydown', function(e){
                if(e.keyCode == 13){
                     poly3.draw('done');
                     //poly3.off('drawstart');
                }
            });
           
            
            document.addEventListener('keyup', function(e){
                // poly3.draw('param', 'snapToGrid', 1);
            });
        });
         //双击停止
          poly3.on("drawstop",function(){
           // poly3.cancel();
                //  poly3.draw("cancel");
              
            })

        function  cancels(){
           // poly3.draw("stop");
            poly3.draw("cancel");
         //  poly3.draw("cancel");
         console.log( document.getElementById("SvgjsSvg1152"));
         var div = document.getElementById("SvgjsSvg1152");
                while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
                {
                    div.removeChild(div.firstChild);
                }

           poly3 = new SVG('SvgjsSvg1152').size('100%', '100%').polygon().draw().attr('stroke-width',3).attr('fill','#f00').attr("stroke","#ffffff");
         //  poly3.on('drawstart');
        }

        /end 
        
       
    </script>
  </body>
</html>

【Svg】------- svg.draw.js 多边形的使用示例代码

相关阅读

相关文章

相关问答

相关文档