zoukankan      html  css  js  c++  java
  • SVG PATH 生成器

    参考网站: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-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>
  • 相关阅读:
    搞定 Linux Shell 文本处理工具,看完这篇还不够~
    ARM 版的Clang的使用
    GDB入门学习之gef插件的使用
    mac使用apktool
    python实现md5
    fridahookjava
    js hook array对象的push方法
    app逆向java转python代码
    python合并两个有序数组
    MySQL update 语句加锁分析
  • 原文地址:https://www.cnblogs.com/zjfree/p/7890851.html
Copyright © 2011-2022 走看看