SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

摘要:
以二次贝塞尔曲线的公式为例:p1是控制点//它们的坐标由数组[x表示。您可以使用L方法绘制Bezier曲线。通常,最好在路径中使用曲线命令。用于绘制Bezier曲面的命令包括:yT平滑二次Bezier曲线x、yC曲线(curveto)x1、yS平滑曲线x2和y2,由M定义(x0,形成二次Bezier曲线。T二次Beier曲线的平滑扩展用法:使用Q定义二次Bezier曲线的背面。

以二次贝塞尔曲线的公式为例:

二次贝塞尔曲线公式

js函数:

Js代码  收藏代码
  1. //p0、p1、p2三个点,其中p0为起点,p2为终点,p1为控制点  
  2. //它们的坐标用数组表示[x,y]  
  3. //t的范围是0-1  
  4. function qBerzier(p0,p1,p2,t){  
  5.     var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];  
  6.     var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];  
  7.     return [x,y];  
  8. }  

通过函数,可以用L方法绘制贝塞尔曲线,但是这种方法是用直线将离散的点连接起来,只是因为点的距离很近,所以看上去是曲线,不够完美。所以绘制贝塞尔曲线,一般还是用path里的曲线命令比较好。

path路径绘制中,绘制贝塞尔曲线的命令包括:

Q 二次贝赛尔曲线 x1,y1 x,y

T 平滑二次贝塞尔曲线 x,y

C 曲线(curveto) x1,y1 x2,y2 x,y

S 平滑曲线 x2,y2 x,y

其中Q和T可以在一起使用,C和S可以在一起用。

Q 二次贝塞尔曲线

用法:M x0,y0 Q x1,y1 x2,y2

Snip20150708_4

通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点,(x2,y2)为终点,构成一条二次贝塞尔曲线。 Q方法非常简单直观。

T 二次贝塞尔曲线平滑延伸

用法:M x0,y0 Q x1,y1 x2,y2 T x4,y4

Snip20150708_5

T 命令是二次被赛尔曲线的平滑延伸命令,用Q定义了一段二次贝塞尔曲线后面,紧接着一个T命令,只需定义终点,就可以自动延伸出一条平滑的曲线。 在这段曲线中,(x3,y3)没有手工定义,这里使用的T方法,只定义一个终点,起点是上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于 上一段曲线的终点)。 在这里,(x3,y3)是(x1,y1)的对称点(相对于(x2,y2)对称)。

C 三次贝塞尔曲线

用法:M x0,y0 C x1,y1 x2,y2 x3,y3

Snip20150708_6

C方法定义的是三次贝塞尔曲线,这里只是多了一个控制点,很好理解

S 三次贝塞尔曲线平滑延伸

用法:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6

Snip20150708_7

三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和一个终点,命令会再自动生成一个控制点,从而形成一条延伸出来的三次贝赛尔曲线。

原文:http://xbingoz.com/194.html

免责声明:文章转载自《SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Spring源码阅读环境搭建 coderhbase 取多个版本数据下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[转]SIFT,SURF,ORB,FAST 特征提取算法比较

转载地址:https://blog.csdn.net/vonzhoufz/article/details/46461849 主要的特征检测方法有以下几种,在一般的图像处理库中(如opencv, VLFeat, Boofcv等)都会实现。 FAST ,Machine Learning for High-speed Corner Detection, 200...

精确率,召回率

精确率 P = TP/(TP+FP) ;  反映了被分类器判定的正例中真正的正例样本的比重 召回率 R = TP/(TP+FN),反映了被正确分类的正样本占所有正样本的比例  准确率(Accuracy)A = (TP + TN)/(P+N) = (TP + TN)/(TP + FN + FP + TN);     反映了分类器统对整个样本的判定能力——能将...

canva基础绘制曲线(3)

1、canvas绘制贝塞尔曲线 1.1canvas绘制二次贝塞尔曲线 1.1.1绘制二次贝塞尔曲线方法 参数说明:关于绘制方法中每个点的说明见如下图 1.1.2代码实现绘制二次贝塞尔曲线 var mycanvas=document.getElementById('mycanvas'); //获取canvas对象...

ARCore中根据屏幕坐标计算射线的算法

ARCore中提供了根据屏幕坐标、视口大小及view、 project矩阵计算从屏幕坐标发射一条射线的方法,此方法用于3D拾取。 1 class Ray { 2 3 public final Vector3f origin;//射线起点 4 public final Vector3f direction;//射线方向 5 6...

Houdini中给火花渲染准确的运动模糊

估计大家都知道使用运动速度来进行运动模糊的渲染,但是往往这个方法得到的运动模糊都是线性变化的,虽然乍一看没什么问题,但是如果想要每一帧的模糊轨迹也是有曲线变化的而不是僵硬的直来直去的话,使用trail算个速度来做的运动模糊是永远做不到这一点的。 这里我想通过常用的火花(spark)的运动模糊来讲一讲我所了解的一些比较好的方法。 所谓渲染中的运动模糊无非就是...

Houdini中全景摄像机shader立体左右眼成像方法

熟悉Houdini Shader部分的同学应该多多少少也了解camera自身也可以设定自己的shader。其中polar panoramic shader 能够非常方便的为艺术家渲染360全景视角的cg画面,但是这样渲染出来的画面只是单眼所看到的环境,如果引入立体双摄像机的渲染方法的话,默认的这个摄像机shader就会出现一个严重的问题,那就是所渲染出来的...