git實例:https://github.com/LvyCode/BrushDraw 歡迎下載star
貝塞爾曲線
弧度=(角度/180) PI
角度=(弧度/PI) 180
//創(chuàng)建貝塞爾曲線
UIBezierPath *mPath = [UIBezierPath bezierPath];
[mPath moveToPoint:CGPointMake(100, 100)]; //創(chuàng)建一個點
[mPath addLineToPoint:CGPointMake(100, 300)]; // 加條線,從點移動到另一個點
[mPath addLineToPoint:CGPointMake(300, 300)]; // 加條線,從點移動到另一個點
[mPath closePath]; // 關(guān)閉貝塞爾線
UIColor *fillColor = [UIColor greenColor]; //設(shè)置顏色
[fillColor set]; //填充顏色
[mPath fill]; //貝塞爾線進(jìn)行填充
UIColor *stroke = [UIColor redColor]; //設(shè)置紅色畫筆線
[stroke set]; //填充顏色
[mPath stroke]; //貝塞爾線進(jìn)行畫筆填充//創(chuàng)建一個橢圓的貝塞爾曲線 半徑相等 就是圓了
UIBezierPath *mPath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(60, 60, 10, 10)];
[mPath1 fill];//創(chuàng)建一個矩形的貝塞爾線
UIBezierPath *mPath2 = [UIBezierPath bezierPathWithRect:CGRectMake(70,70, 10, 10)];
[mPath2 stroke];//創(chuàng)建一個圓弧 傳的弧度
UIBezierPath *mPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 100) radius:10 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];[mPath3 fill];//創(chuàng)建一個 矩形的貝塞爾曲線, 帶圓角
UIBezierPath *mPath4 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(250, 15, 20, 20) cornerRadius:3];
[mPath4 fill];//定義一個矩形 邊角會變成 設(shè)置的角度 方位/角度大小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];//當(dāng)前貝塞爾的點
NSLog(@"mPath7 currentPoint is : %@",NSStringFromCGPoint(mPath7.currentPoint));

OpenGL
為了畫出筆刷效果,我改用OpenGL ES 曲面細(xì)分將筆刷轉(zhuǎn)換成三角序列(OpenGL支持畫線,但是iOS不支持繪制平滑的可變寬度的線條),二次貝塞爾曲線點需要重新計算。
在進(jìn)行移動手勢處理時,就會遇到locationInView、velocityInView、translationInView具體如下:
筆觸.png
日志.png
- translationInView : 手指在視圖上移動的位置(x,y)向下和向右為正,向上和向左為負(fù)。
- locationInView : 手指在視圖上的位置(x,y)就是手指在視圖本身坐標(biāo)系的位置。
- velocityInView: 手指在視圖上移動的速度(x,y), 正負(fù)也是代表方向,值得一提的是在絕對值上|x| > |y| 水平移動, |y|>|x| 豎直移動。