贝塞尔曲线以及OpenGL

git实例：https://github.com/LvyCode/BrushDraw 欢迎下载star

贝塞尔曲线

弧度＝(角度/180) PI
角度=(弧度/PI) 180

//创建贝塞尔曲线
UIBezierPath *mPath = [UIBezierPath bezierPath];
[mPath moveToPoint:CGPointMake(100, 100)]; //创建一个点
[mPath addLineToPoint:CGPointMake(100, 300)]; // 加条线,从点移动到另一个点
[mPath addLineToPoint:CGPointMake(300, 300)]; // 加条线,从点移动到另一个点
[mPath closePath]; // 关闭贝塞尔线

UIColor *fillColor = [UIColor greenColor]; //设置颜色
[fillColor set]; //填充颜色
[mPath fill]; //贝塞尔线进行填充
UIColor *stroke = [UIColor redColor]; //设置红色画笔线

[stroke set]; //填充颜色

[mPath stroke]; //贝塞尔线进行画笔填充//创建一个椭圆的贝塞尔曲线 半径相等 就是圆了

UIBezierPath *mPath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(60, 60, 10, 10)];
[mPath1 fill];//创建一个矩形的贝塞尔线
UIBezierPath *mPath2 = [UIBezierPath bezierPathWithRect:CGRectMake(70,70, 10, 10)];
[mPath2 stroke];//创建一个圆弧 传的弧度
UIBezierPath *mPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 100) radius:10 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];[mPath3 fill];//创建一个 矩形的贝塞尔曲线, 带圆角
UIBezierPath *mPath4 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(250, 15, 20, 20) cornerRadius:3];
[mPath4 fill];//定义一个矩形 边角会变成 设置的角度 方位/角度大小UIBezierPath *mPath5 =[UIBezierPath bezierPathWithRoundedRect:CGRectMake(250, 45, 40, 40) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(10, 10)];[mPath5 fill];//定义一个二级的赛贝尔曲线 重点|拐弯点
UIBezierPath *mPath6 = [UIBezierPath bezierPath];[mPath6 moveToPoint:CGPointMake(10,260)];
[mPath6 addQuadCurveToPoint:CGPointMake(200,260) controlPoint:CGPointMake(85, 240)];
[mPath6 setLineWidth:3];
[mPath6 stroke];//定义一个三级的赛贝尔曲线 终点|拐点1|拐点2UIBezierPath *mPath7 = [UIBezierPath bezierPath];
[mPath7 moveToPoint:CGPointMake(10,290)];
[mPath7 addCurveToPoint:CGPointMake(300, 290) controlPoint1:CGPointMake(50, 270) controlPoint2:CGPointMake(140, 340)];[mPath7 stroke];//当前贝塞尔的点
NSLog(@"mPath7 currentPoint is : %@",NSStringFromCGPoint(mPath7.currentPoint));

![](http://upload-images.jianshu.io/upload_images/1718623-3a9cf51ba60be647.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

OpenGL

为了画出笔刷效果，我改用OpenGL ES 曲面细分将笔刷转换成三角序列（OpenGL支持画线，但是iOS不支持绘制平滑的可变宽度的线条），二次贝塞尔曲线点需要重新计算。

在进行移动手势处理时，就会遇到locationInView、velocityInView、translationInView具体如下：

笔触.png

日志.png

• translationInView : 手指在视图上移动的位置（x,y）向下和向右为正，向上和向左为负。
• locationInView ： 手指在视图上的位置（x,y）就是手指在视图本身坐标系的位置。
• velocityInView： 手指在视图上移动的速度（x,y）, 正负也是代表方向，值得一提的是在绝对值上|x| > |y| 水平移动， |y|>|x| 竖直移动。