坐标转换成SVG的path路径
大家好,我是一个刚入职的前端小白,入职后一直做关于svg 的东西,我将自以为很方便的方法提供给大家。
function svgPathCurv(a,b,curv) { /* * 弯曲函数. * a:a点的坐标{x:10,y:10} * b:b点的坐标{x:10,y:20} * curv:弯曲程度 取值 -5 到 5 */ curv = curv ? curv : 0; var s, k2, controX, controY, q, l, path = ''; var s = 'M' + a.x + ',' + a.y + ' '; /* * 控制点必须在line的中垂线上 * **求出k2的中垂线(中垂线公式)** */ var x1=a.x;x2=b.x;y1=a.y;y2=b.y; k2 = -(x2 - x1) / (y2 - y1); /* * 弯曲程度是根据中垂线斜率决定固定控制点的X坐标或者Y坐标,通过中垂线公式求出另一个坐标 * 默认A/B中点的坐标+curv*30,可以通过改基数30改变传入的参数范围 */ if(k2 < 2 && k2 > -2) { controX = (x2 + x1) / 2 + curv * 30; controX = controX < 0 ? -controX : controX; controY = k2 * (controX - (x1 + x2) / 2) + (y1 + y2) / 2; controY = controY < 0 ? -controY : controY; } else { controY = (y2 + y1) / 2 + curv * 30; controY = controY < 0 ? -controY : controY; controX = (controY - (y1 + y2) / 2) / k2 + (x1 + x2) / 2; controX = controX < 0 ? -controX : controX; } //定义控制点的位置 q = 'Q' + controX + ',' + controY + ' '; //l=lineto l = x2 + ',' + y2 + ' '; //结果例: M10,10Q35,15,10,20 path = s + q + l; return path; }
坐标转换成SVG的path路径的更多相关文章
- svg(1) path路径
注: 笔记来自于http://www.jb51.net/html5/72250.html 以及http://blog.csdn.net/u013291076/article/details/2707 ...
- SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- SVG格式图片转成HTML中SVG的Path路径
AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...
- 5分钟看懂svg path 路径的所有命令(更有API解释、有图、有图文对比解析)
友情提示:更多详情.每个命令的例子.参数变化对比图文详解,欢迎关注九十七度的博客:SVG<Path>命令详解 M = moveto M x y 移动到指定坐标,xy分别为x轴和y轴的坐标点 ...
- 简单聊一聊那些svg的沿路径运动
之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...
- d3.js path路径
转自:http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等. ...
- SVG的path的使用
SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...
- [转]sudo找不到命令:修改sudo的PATH路径
sudo有时候会出现找不到命令,而明明PATH路径下包含该命令,让人疑惑.其实出现这种情况的原因,主要是因为当 sudo以管理权限执行命令的时候,linux将PATH环境变量进行了重置,当然这主要是因 ...
- svg实现绘制路径动画
1,首先用svg绘制一条path路径,然后进行如下操作 ps: 下面是svg中两个属性及值的意义 stroke-dasharray是让你指定画出的线段每段的长度,第二个值是各段之间空隙的长度. str ...
随机推荐
- 第11.19节 Python 中正则表达式的扩展功能:前视断言和前视取反
一. 引言 在<第11.16节 Python正则元字符"()"(小括号)与组(group)匹配模式>中老猿介绍了组匹配模式的命名组功能及引用组功能,这两者都是组模式的扩 ...
- 安恒2018年三月月赛MISC蜘蛛侠呀
到处都是知识盲区hhh 下载了out.pcap之后,里面有很多ICMP包 看到ttl之后联想到西湖论剑里面的一道杂项题,无果 看WP知道可以使用wireshark的tshark命令提取流量包里面的文件 ...
- web前端页面常见优化方法
(1)减少http请求,尽量减少向服务器的请求数量 (2)避免重定向 (3)利用缓存:使用外联式引用CSS.JS,在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏 ...
- js setTimeout运行机制
在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...
- 在iframe中获取另一个iframe中的元素
$(top.parent.iframeId).contents().find("#selector") //iframeId为iframe的id名称
- 【Codeforces 1181E】A Story of One Country (Easy & Hard)(分治 & set)
Description 在一个二维平面上有若干个矩形.定义一个矩形的(或有边在无限远处)区域为符合条件的条件为: 这个区域仅包含一个矩形,且不能使边界穿过任何一个矩形的内部. 这个区域可以用一个水平或 ...
- 题解-[SDOI2017]数字表格
题解-[SDOI2017]数字表格 前置知识: 莫比乌斯反演</> [SDOI2017]数字表格 \(T\) 组测试数据,\(f_i\) 表示 \(\texttt{Fibonacci}\) ...
- 把演讲人的桌面、头像、声音合成后推送到 指定的直播流平台上; 录制电脑桌面、摄像头头像、声音保存为本地视频; 适用于讲课老师、医生等演讲内容保存为视频; 提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案
提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案 Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: ...
- 【Jmeter 常用方法】
https://www.jianshu.com/p/a4922b0dceba 如果if控制器的使用
- Validated 注解完成 Spring Boot 参数校验
1. @Valid 和 @Validated @Valid 注解,是 Bean Validation 所定义,可以添加在普通方法.构造方法.方法参数.方法返回.成员变量上,表示它们需要进行约束校验. ...