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 ...
随机推荐
- map,hash_map, hash_table, 红黑树 的原理和使用
在刷算法题的时候总是碰到好多题,号称可以用hash table来解题.然后就蒙圈了. 1.首先,map和hash_map的区别和使用: (1)map底层用红黑树实现,hash_map底层用hash_t ...
- SQL Server 2008数据库日志收缩
GO ALTER DATABASE MCS SET RECOVERY SIMPLE--设置简单恢复模式 GO DBCC SHRINKFILE (MCS_Log, 1) GO ALTER DATABAS ...
- Java线程:概念与原理
Java线程:概念与原理 一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程 ...
- 将声音文件加入VC
概述 VC++是微软公司开发的一个IDE(集成开发环境),换句话说,就是使用c++的一个开发平台.有些软件就是这个编出来的...另外还有VB,VF.只是使用不同语言...但是,VC++是Windows ...
- flask + uwsgi 生产环境
https://www.digitalocean.com/community/tutorials/how-to-deploy-flask-web-applications-using-uwsgi-be ...
- CPU阿甘:函数调用的秘密
个人感言:真正的知识是深入浅出的,码农翻身" 公共号将苦涩难懂的计算机知识,用形象有趣的生活中实例呈现给我们,让我们更好地理解.感谢"码农翻身" 公共号,感谢你们的成果, ...
- 【WCF全析(一)】--服务协定及消息模式
上周微软开发布会说.NET支持完全跨平台和并开放Core源码的新闻,让我们顿时感到.NET要迎来它的春天.虽然早在几年前.NET就能开发Android和IOS,但是这次的跨平台把Linux都放到了微软 ...
- try-catch-finally 引发的奇怪问题
今天,发现我们的一个Windows Service无法正常停止,无奈之下只能杀了进程. 为了找到原因,我在本地进行调试,发现程序里用到了多线程,而代码正是卡在了workThread.Abort()语句 ...
- FreeMark学习(一)
FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序 虽然FreeMark ...
- 关于Java static 的学习心得
static,大家都很熟悉.但是要说真的懂,那就很少了.(当然我也不是很懂,但不妨碍学习吗.) 首先,我认为static修饰的成员就是属于类本身的成员.如果你加了一个static修饰符,好吧,那就相当 ...