svg path中的贝塞尔曲线
首先介绍以下什么是贝塞尔曲线
贝塞尔曲线又叫贝茨曲线（Bezier），由两个端点以及若干个控制点组成，只有两个端点在曲线上，控制点不在曲线上，只是控制曲线的走向。
控制点个数为0时，它是一条直线;
控制点个数为1时，它是二次贝塞尔曲线;
控制点个数为2时，它是三次贝塞尔曲线；
....
数学公式
二次贝塞尔曲线
p0,p2是起始点，p1是控制点
分别把p0,p1,p2点的x,y坐标带入，求出曲线上的点的x,y坐标
三次贝塞尔曲线
p0,p3是起始点，p1,p2是控制点
svg的path中与贝塞尔曲线相关的命令有：
C(curveto):三次贝塞尔曲线，参数：
x1,y1 x2,y2 m,n
x1,y1 x2,y2为两个控制点的xy坐标，m n为终点的坐标，起始点为执行该命令之前，笔触的位置。（注：svg中的曲线命令通常与M命令一起使用）
S(smooth curveto)参数：
x2,y2 m,n
x2,y2为第二个控制点，m n为终点的坐标,对于第一个控制点分为两种情况：
当S命令的前一个命令是C或S命令时，第一个控制点是前一个C或S的控制点的对称点（关于前一个命令的终点或当前命令的起始点）；
否则S命令将退化为二次贝塞尔曲线（同Q）。
Q(quadratic Belzier c
urve)二次贝塞尔曲线，参数：
x1,y1 m,n
x1,y1为控制点坐标，m,n为终点坐标。
T(smooth quadratic Belzier curveto)
参数：m,n
同S相似，T是Q的退化或者懒人写法。分为两种情况：
当T的前一个命令是Q或T时，控制点是前一个Q或T的控制点的对称点（关于前一个命令的终点或当前命令的起始点）；否则T命令将退化为一条直线。
相对坐标
c,s,q,t命令的相对位移相对的是同一个点，
以c命令为例，当pen表示当前笔触的位置时，
点的绝对坐标为：
x1=pen[0]+dx1
y1=pen[1]+dy1
x2=pen[0]+dx2
y2=pen[1]+dy2
m=pen[0]+mx
n=pen[1]+my
参考：https://zh.wikipedia.org/zh-cn/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/
svg path中的贝塞尔曲线的更多相关文章
- 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现
RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...
- NGUI研究院之在Unity中使用贝塞尔曲线（六）[转]
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- Unity3d游戏中自定义贝塞尔曲线编辑器[转]
关于贝塞尔曲线曲线我们再前面的文章提到过<Unity 教程之-在Unity3d中使用贝塞尔曲线>,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...
- 在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- NGUI研究之在Unity中使用贝塞尔曲线
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天由于工作的原因须要将贝塞尔曲线加在project中.那么我迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的随意角度的曲线,这两个点一 ...
- android 利用Path.cubicTo 画 贝塞尔曲线
Path.cubicTo void android.graphics.Path.cubicTo(float x1, float y1, float x2, float y2, float x3, fl ...
- Unity游戏中使用贝塞尔曲线
孙广东 2015.8.15 比方在3D rpg游戏中.我们想设置弹道,不同的轨迹类型! 目的:这篇文章的主要目的是要给你关于在游戏怎样使用贝塞尔曲线的基本想法. 贝塞尔曲线是最主要的曲线,一般用在 ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- AI: 字体设计中的贝塞尔曲线
http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-cur ...
随机推荐
- Tableau地图移动
最近又回归写报表,新的工具使用Tableau,这次要做一个地图,当地图导入之后一直无法能够较好的移动地图,百度也找不到资料. 每次点击一下省份或者利润就是放大或者缩小,很不好移动位置. 研究了一下很简 ...
- Birt导出Excel图片
有一段时间没有使用Birt了,最近突然之间发现新版的Birt可以支持导出Excel附带图片.我目前下载的是Birt 4.3版本的,导出图片的也只能在Excel 2007下面能够实现,2003的xls格 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- bcm cmd
BCM.1> port ge en=0 ;Disable all GbEBCM.1> tx 2 pbm=ge2,fe7 ;Transmit 2 packets out of both po ...
- J2EE应用监控后台执行SQL
我们可能已经很熟悉在未使用数据库连接池的hibernate的环境下,配置p6spy和sql profiler.这在单独使用hibernate,以及项目初期是有效的.但是,在真实的开发环境下,往往是项目 ...
- 使用generator生成排序动画
相信作为一个程序猿,大家应该都已经看过一些排序算法的过程教学动画,现在我来总结一下自己使用ES6的generator实现动画的过程,以作为自己对generator的使用实践的一个记录. 为什么用gen ...
- WebServices(转)
一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...
- 36、重新复习html和css之二
(1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术 ...
- AIX 环境下整理文件系统碎块
IBM AIX v5.3以上版本操作系统环境下基本上不需要对文件系统碎块进行整理,查到AIX里有整理文件系统碎块命令,这里简单提一下. 命令:defragfs例:#defragfs /var defr ...
- XtraBackup原理解读
XtraBackup是现今为止唯一一款为InnoDB 和XtraDB提供热备的开源工具,这个工具有以下的有点: (1)备份快速高效而且可靠 (2)备份过程可以做到事物处理不间断 (3)节省磁盘空间和网 ...