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

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

效果如下:

代码如下:

 <!DOCTYPE html>
<!-- 参考:http://dayu.pw/svgcontrol/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SVG PATH路径生成</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
body{
background: #ccc;
font-family: 'Microsoft YaHei';
color: #345;
}
.svg-inner{
width: 900px;
height: 600px;
margin: 0 auto;
background: #fff;
}
#svgMain{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
box-shadow:0px 3px 13px #333333;
}
#svgMain circle{
cursor: pointer;
fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3
}
#svgMain polyline{
fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1
}
h1, h4{
text-align:center;
margin:10px;
}
</style> <h1>贝塞尔曲线控制</h1>
<h4>M200 250 C141.5 130 421.5 146 500 250</h4>
<div style="text-align:center; margin-bottom:10px;">
<label><input type="checkbox" id="chkZ" />闭合</label>
&nbsp;
<select id="selType">
<option value="M">M 移动</option>
<option value="L" selected>L 画线到</option>
<option value="H">H 水平绘制</option>
<option value="V">V 竖直绘制</option>
<option value="C">C 三次贝塞尔</option>
<option value="S">S 三次贝塞尔对称</option>
<option value="Q">Q 二次贝塞尔</option>
<option value="T">T 二次贝塞尔连续</option>
</select>
&nbsp; *双击可添加控制点
</div>
<div class="svg-inner">
<svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points=""></polyline>
<path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-width:3"></path>
<circle data-type="M" cx="200" cy="250" r="5"></circle>
<circle data-type="C" cx="141.5" cy="130" r="5"></circle>
<circle data-type="C" cx="421.5" cy="146" r="5"></circle>
<circle data-type="C" cx="500" cy="250" r="5"></circle>
</svg>
</div> <script>
$(function(){
$('#svgMain').dblclick(function(e){
var cx = e.pageX-$(this).parent().offset().left;
var cy = e.pageY-$(this).parent().offset().top; var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
circle.setAttribute("cx", cx);
circle.setAttribute("cy", cy);
circle.setAttribute("r", 5);
circle.setAttribute("data-type", $('#selType').val());
$(this).append(circle);
setPoints($(circle));
setPolyline();
setPath();
}); $('#svgMain circle').each(function(){
setPoints($(this));
}); $('#chkZ').change(function(){
setPolyline();
setPath();
}); setPolyline();
setPath();
}); function setPoints(obj)
{
var mouseDown=false;
obj.mousedown(function(){
mouseDown=true;
});
obj.parent().mouseup(function(){
mouseDown=false;
});
obj.parent().mousemove(function(e){
e.preventDefault();
if(mouseDown)
{
obj.attr('cx',e.pageX-obj.parent().offset().left);
obj.attr('cy',e.pageY-obj.parent().offset().top);
setPolyline();
setPath();
}
});
} function setPolyline()
{
var points = '';
$('#svgMain circle').each(function(){ points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' ';
}); $('#svgMain polyline').attr('points', points);
} function setPath()
{
var d = '';
var lastType = '';
$('#svgMain circle').each(function(){
var cx = $(this).attr('cx');
var cy = $(this).attr('cy');
var t = $(this).data('type');
if (lastType != t || t == 'M'){
d += t;
} if (t == 'H') {
d += cx + ' ';
} else if (t == 'V') {
d += cy + ' ';
} else {
d += cx + ' ' + cy + ' ';
} lastType = t;
}); if ($('#chkZ')[0].checked)
{
d += ' Z';
} $('h4').html(d);
$('#svgMain path').attr('d', d);
}
</script> </body></html>

SVG PATH 生成器的更多相关文章

  1. 使用SVG Path绘图

    最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计. 项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现.客户提出希望用不同的底纹表示不同的流水线,经过一番调查 ...

  2. SVG path

    在网页上画一图形,比如星星或波浪线,开始是想着图形软件画一个的,后来发现SVG这绘图程序的语言,感觉甚是可以,就发了些时间学了一下,在此做一简单分享和记录. 菜鸟上是这么介绍的(SVG 是使用 XML ...

  3. svg path 动画效果

    http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8% ...

  4. svg path 解析

    <pre><svg width="100%" height="100%" version="1.1" xmlns=&quo ...

  5. SVG path d Attribute

    Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...

  6. SVG Path高级教程

    课程分为四个方面: 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径,Path字符串是由命令及其参数组组成的字符 ...

  7. Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

    在项目中涉及到svg: 使用path划线实现图表功能. 记录在实现的过程中发现的问题:path在小像素的情况下画出的线条宽度不一样.这是为什么呢? 以下是我做的猜想: 可以看图 在宽度给的很足的时候没 ...

  8. svg path中的贝塞尔曲线

    首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...

  9. svg path详解

    svg的<path>标签具有强大的功能,主要包括以下命令 M(move to) 参数:x,y L(line to) 参数:x,y H 参数:x V 参数:y C S Q T Z 参考:

随机推荐

  1. Bootstrap-datepicker3官方文档中文翻译---I18N/国际化(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    I18N/国际化 这个插件支持月份和星期名以及weekStart选项的国际化.默认是英语(“en”); 其他有效的译本语言在 js/locales/ 目录中, 只需在插件后包含您想要的地区. 想要添加 ...

  2. Linux安装Discuz

    安装lamp环境 安装参考 安装Discuz 1.进入官网 2.进入Discuz! 程序发布 3.选择最新版本 4.进入git地址 5.克隆下载 5. 确认Apache中的DocumentRoot配置 ...

  3. vue 结合 FileReader() 实现上传图片预览功能

    项目中 身份证上传需求: <div class="ID_pic_wrap"> <ul> <li> <img src="../.. ...

  4. 解决Windows服务无法访问网络映射盘的问题

    下载工具psexec 下载地址:https://docs.microsoft.com/zh-cn/sysinternals/downloads/psexec 百度地址:https://pan.baid ...

  5. 啊 B树

    关于B树的阶 B树的阶(英语对应order)定义是不统一的: Unfortunately, the literature on B-trees is not uniform in its termin ...

  6. Servlet校验密码之Mariadb篇

    Servlet校验密码之Mariadb篇 先放图-- 数据库: 效果图: 整体来说与上一篇差距不大,这次主要是采用数据库来进行校验,我使用的是Mariadb,安装与配置不用我说 主要有一点,导入连接器 ...

  7. js常用代码

    获取URL ?后的查询参数 function query(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...

  8. Amazon新一代云端关系数据库Aurora

    在2017年5月芝加哥举办的世界顶级数据库会议SIGMOD/PODS上,作为全球最大的公有云服务提供商,Amazon首次系统的总结了新一代云端关系数据库Aurora的设计实现.Aurora是Amazo ...

  9. pycharm的list中copy的应用

    #拷贝的意思 li = [11,22,33,44] v = li.copy() print(v) #输出结果 [11,22,33,44] #浅拷贝

  10. JDK解压版制作

    今天上  甲骨文 的官网,想下载一个 解压版的 jdk 1.8 结果发现: 没有解压版,只有exe版本.于是就搜索制作方法. 具体就是,双击exe版本,在最后关头要安装的时候, 重点来了! 跟他皮一下 ...