三次贝塞尔曲线画圆的方法。

上一篇说的仿58同城loadingview的项目。中有一个利用贝塞尔曲线进行绘制圆的步骤,这个贝塞尔曲线理论挺复杂,特此单独说一下所知的和能用到的。

比方上一个loadingView的项目中。要用到Path.cubic()来使用贝塞尔曲线画一个圆,那么首先要了解的是

Path.cubic()方法的定义:

void cubicTo(float x1,float y1,float x2,float y2,float x3,float y3)
Add a cubic bezier from the last point,approaching control points(x1,y1)and(x2,y2),and ending at (x3,y3)

什么意思呢。就是从我们的最后一个点出发以接近(x1,y1)(x2,y2)这两个点的方向走最后结束在(x3,y3)点。

什么叫接近呢?比方y = 1/x^3 这个函数的轨迹当x趋近于0时。轨迹无限趋近于Y轴值趋于无限大。

当曲线从0点出发以趋近1点的方向前进终结于4点时就会呈现这样一个轨迹。

所以当想以三次方程贝塞尔曲线绘制一个圆时。项目中的方法是绘制4个1/4圆,每次用三次贝塞尔绘制1/4圆须要四个点。

这张图中的(0,0)是我们的起始点(1,1)是终点 这两个点都是圆上的能够知道坐标。所以要算出(x1,0)(1,y1)这两个点的坐标。

这就是magicNumber的由来。

我们将这个圆的圆心与(x1,0)(0,0)连线。两条线的夹角为20°,由此可算出x1的坐标。

同理y1,这个坐标值为magicNumber。

四个点坐标算出来就能够画圆了。

时间: 2024-10-06 00:15:45

三次贝塞尔曲线画圆的方法。的相关文章

【转】三次贝塞尔曲线绘制算法

原文:http://www.cnblogs.com/flash3d/archive/2012/01/30/2332176.html 源码:http://files.cnblogs.com/flash3d/bezier.rar ==================================================== 这学期学图形学,就把自己的一些粗浅的理解发上去让大家拍砖.前些天做三次贝塞尔曲线绘制的上机练习,正好将从直线扫描算法中启发得来的n次多项式批量计算用上了,自认为优化得还

html5 canvas绘图—三次方贝塞尔曲线

我们知道二次方贝塞尔曲线,那些曲线都是二维的,意思就是说,它们都只能向一个方向弯曲.如果需要如图这样,能够向两个方向弯曲的曲线,那么你需要的就是三次贝塞尔曲线. 该图所示应用程序使用bezierCurveTo()方法创建了一条代表三次方贝塞尔曲线的路径.该应用程序的代码列在了下面的程序清单中. 这段代码除了绘制曲线本身,还填充了表示曲线控制点与锚点的小圆圈. html代码: 1 <html> 2 <head> 3 <title>Bezier Curves</tit

二次、三次贝塞尔曲线demo(演示+获取坐标点)

二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以上链接使用  三次贝塞尔曲线demo: See the Pen bezierCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(三次) 推荐点击以上链接使用 二次.三次贝塞尔曲线demo(演示+获取坐标点)

通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形

/**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)]; /**创建矩形的贝塞尔曲线*/ UIBezierPath *_rectPath=[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 100)]; /**创建圆形的贝塞尔曲线*/ UIBezierPath *_circlePa

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半径 ) cx,cy表示控制点的坐标,x2,y2表示结束点的坐标,如果我们想画一条弧线,需要提供3个 http://pic.cnhubei.com/space.php?uid=4593&do=album&id=1092946http://pic.cnhubei.com/space.php?ui

使用画圆的方法来标注指定Id的实体

//entId为指定实体的Id void SignEnt(AcDbObjectId entId){ AcDbEntity *pEnt = NULL; AcDbBlockReference *pRef; //打开对应实体 Acad::ErrorStatus es = acdbOpenObject(pEnt, entId, ZcDb::kForRead, false); if ( Acad::eOk != es ) { acutPrintf(_T("\n打开对应Id的实体失败!")); r

利用贝塞尔曲线画出只有2个圆角的View

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopRight cornerRadii:CGSizeMake(40, 40)];    // 这里 40 40 表示圆弧的角度  前面的参数有四个类型  左上角  左下角  右上角  右下角      CAShapeLayer *

canvas 绘制三次贝塞尔曲线

代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script> function init() { var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d')

iOS开发 贝塞尔曲线UIBezierPath

使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. 1.Bezier Path 基础 UIBezierPath对象是CGPathRef数据类型的封装.path如果是基于矢量形状的,都用直线和曲线段去创建.我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状.每一段都包括一个或者多个点,绘图命令定义如