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

Love The Way You Lie 2022-10-02 05:53 144阅读 0赞

> 1.svg.draw.js  多边形使用实例 （在我用的时候感觉不太好用）([https://github.com/svgdotjs/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>
> 
>

[https_github.com_svgdotjs_svg.draw.js]: https://github.com/svgdotjs/svg.draw.js