博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

SVG PATH 生成器

Posted on 2017-11-24 15:31  PHP-张工  阅读(3711)  评论(0)  编辑  收藏  举报

参考网站：http://dayu.pw/svgcontrol/

主要功能：手动可视化生成 SVG图片PATH路径。

效果如下：

代码如下：

  1 <!DOCTYPE html>
  2 <!-- 参考：http://dayu.pw/svgcontrol/ -->
  3 <html>
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6 <title>SVG PATH路径生成</title>
  7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  8 <style>
  9   body{
 10     background: #ccc;
 11     font-family: 'Microsoft YaHei';
 12     color: #345;
 13   }
 14   .svg-inner{
 15     width: 900px;
 16     height: 600px;
 17     margin: 0 auto;
 18     background: #fff;
 19   }
 20   #svgMain{
 21     -webkit-user-select: none;  
 22     -moz-user-select: none;  
 23     -ms-user-select: none;  
 24     box-shadow:0px 3px 13px #333333;
 25   }
 26   #svgMain circle{
 27     cursor: pointer;
 28     fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3
 29   }
 30   #svgMain polyline{
 31     fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1
 32   }
 33   h1, h4{
 34     text-align:center;
 35     margin:10px;
 36   }
 37 </style>
 38 
 39 <h1>贝塞尔曲线控制</h1>
 40 <h4>M200 250 C141.5 130 421.5 146 500 250</h4>
 41 <div style="text-align:center; margin-bottom:10px;">
 42 <label><input type="checkbox" id="chkZ" />闭合</label>
 43 &nbsp;
 44 <select id="selType">
 45 <option value="M">M 移动</option>
 46 <option value="L" selected>L 画线到</option>
 47 <option value="H">H 水平绘制</option>
 48 <option value="V">V 竖直绘制</option>
 49 <option value="C">C 三次贝塞尔</option>
 50 <option value="S">S 三次贝塞尔对称</option>
 51 <option value="Q">Q 二次贝塞尔</option>
 52 <option value="T">T 二次贝塞尔连续</option>
 53 </select>
 54 &nbsp; *双击可添加控制点
 55 </div>
 56 <div class="svg-inner">
 57     <svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1">
 58         <polyline points=""></polyline>
 59         <path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-width:3"></path>
 60         <circle data-type="M" cx="200" cy="250" r="5"></circle>
 61         <circle data-type="C" cx="141.5" cy="130" r="5"></circle>    
 62         <circle data-type="C" cx="421.5" cy="146" r="5"></circle>
 63         <circle data-type="C" cx="500" cy="250" r="5"></circle>
 64     </svg>
 65 </div>
 66 
 67 <script>
 68 $(function(){
 69     $('#svgMain').dblclick(function(e){
 70         var cx = e.pageX-$(this).parent().offset().left;
 71         var cy = e.pageY-$(this).parent().offset().top;
 72 
 73         var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
 74         circle.setAttribute("cx", cx);
 75         circle.setAttribute("cy", cy);
 76         circle.setAttribute("r", 5);
 77         circle.setAttribute("data-type", $('#selType').val());
 78         $(this).append(circle);
 79         setPoints($(circle));
 80         setPolyline();
 81         setPath();
 82     });
 83     
 84     $('#svgMain circle').each(function(){
 85         setPoints($(this));
 86     });
 87     
 88     $('#chkZ').change(function(){
 89         setPolyline();
 90         setPath();
 91     });
 92     
 93     setPolyline();
 94     setPath();
 95 });
 96 
 97 function setPoints(obj)
 98 {
 99     var mouseDown=false;
100     obj.mousedown(function(){
101         mouseDown=true;
102     });
103     obj.parent().mouseup(function(){
104         mouseDown=false;
105     });
106     obj.parent().mousemove(function(e){
107         e.preventDefault();
108         if(mouseDown)
109         {
110             obj.attr('cx',e.pageX-obj.parent().offset().left);
111             obj.attr('cy',e.pageY-obj.parent().offset().top);
112             setPolyline();
113             setPath();
114         }
115     });
116 }
117 
118 function setPolyline()
119 {
120     var points = '';
121     $('#svgMain circle').each(function(){
122         
123         points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' ';
124     });
125     
126     $('#svgMain polyline').attr('points', points);
127 }
128    
129 function setPath()
130 {
131     var d = '';
132     var lastType = '';
133     $('#svgMain circle').each(function(){
134         var cx = $(this).attr('cx');
135         var cy = $(this).attr('cy');
136         var t = $(this).data('type');
137         if (lastType != t || t == 'M'){
138             d += t;
139         }
140         
141         if (t == 'H') {
142             d += cx + ' ';
143         } else if (t == 'V') {
144             d += cy + ' ';
145         } else {
146             d += cx + ' ' + cy + ' ';
147         }
148         
149         lastType = t;
150     });
151     
152     if ($('#chkZ')[0].checked)
153     {
154         d += ' Z';
155     }
156     
157     $('h4').html(d);
158     $('#svgMain path').attr('d', d);
159 }
160 </script>
161 
162 </body></html>