iOS 2D 畫圖 和 UIBezierPath
****注意一點是set 和setFill的區別
-(void)drawRect:(CGRect)rect{
UIColor *fillColor = [UIColor orangeColor];
[fillColor setFill];
UIBezierPath *path = [UIBezierPath bezierPath];
//setting the starting point of shape
[path moveToPoint:CGPointMake(100+30, 100+0)];
//draw the lines
[path addLineToPoint:CGPointMake(200+30, 100+40.0)];
[path addLineToPoint:CGPointMake(160.0+30, 100+140.0)];
[path addLineToPoint:CGPointMake(40.0+30, 100+140.0)];
[path addLineToPoint:CGPointMake(0.0+30, 100+40.0)];
[path closePath];
[path fill];
}
-(void)drawRect:(CGRect)rect{
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5;
path.lineJoinStyle = kCGLineCapRound;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 20)];
[path addLineToPoint:CGPointMake(200+30, 100+40.0)];
[path addLineToPoint:CGPointMake(160.0+30, 100+140.0)];
[path addLineToPoint:CGPointMake(40.0+30, 100+140.0)];
[path addLineToPoint:CGPointMake(0.0+30, 100+40.0)];
[path addLineToPoint:CGPointMake(100, 20)];
[path stroke];
}
周長= 2πradius
define DEGREES_TO_RADIANS(degrees) (M_PI * degrees/ 180)
-(void)drawRect:(CGRect)rect{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,100) radius:100 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
[path closePath];
[path fill];//填充區域
}
-(void)drawRect:(CGRect)rect{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,100) radius:100 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
Adding Curves to Your Path//新增曲線
//由控制點和控制點的切線點決定
-(void)drawRect:(CGRect)rect{
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//繪製二次貝賽爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
//setting start point
[path moveToPoint:CGPointMake(20, 100)];
//setting end point control point(中間控制點)
[path addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 300)];
[path stroke];
}
-(void)drawRect:(CGRect)rect{
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//繪製二次貝賽爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
//setting start point
[path moveToPoint:CGPointMake(20, 100)];
//setting end point control point(中間控制點)
[path addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 300)];
[path stroke];
[path fill];
}
-(void)drawRect:(CGRect)rect{
UIColor *color = [UIColor orangeColor];
[color set];
//繪製3次貝賽爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5;
path.lineJoinStyle = kCGLineCapRound;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 50)];
[path addCurveToPoint:CGPointMake(300, 50) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(200, 400)];
[path stroke];
}
-(void)drawRect:(CGRect)rect{
UIColor *color = [UIColor orangeColor];
[color set];
//繪製3次貝賽爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5;
path.lineJoinStyle = kCGLineCapRound;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 50)];
[path addCurveToPoint:CGPointMake(300, 50) controlPoint1:CGPointMake(130, 0) controlPoint2:CGPointMake(200, 400)];
[path stroke];
[path fill];
}
Modifying the Path Using Core Graphics Functions-->使用core graphic 來修改
-(void)drawRect:(CGRect)rect{
//根據座標畫出一個內切圓
UIBezierPath *PATH = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 200)];
[[UIColor blackColor]setStroke];
[[UIColor orangeColor] setFill];
CGContextRef ref = UIGraphicsGetCurrentContext();
// 在檢視中的座標
CGContextTranslateCTM(ref,100, 100);
PATH.lineWidth = 5;
[PATH fill];
[PATH stroke];
}
//根據一個矩形畫曲線
- (UIBezierPath *)bezierPathWithRect:(CGRect)rect
//根據矩形框的內切圓畫曲線
- (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
//根據矩形畫帶圓角的曲線
- (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
//在矩形中,可以針對四角中的某個角加圓角
-
(UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
UIBezierPath *PATH = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 200)byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 10)];
-----------CoreGraphics--------------------
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectOne = CGRectMake(10, 10, 200, 300);
CGRect rectTwo = CGRectMake(40, 100, 90, 300);
CGRect rects[2] = {rectOne,rectTwo};
// CGPathAddRect(path, NULL, rectOne); 一個矩形 下面是兩個矩形的情況
CGPathAddRects(path, NULL, (const CGRect *)&rects, 2);
CGContextRef current = UIGraphicsGetCurrentContext();
CGContextAddPath(current, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(current, 5);
CGContextDrawPath(current, kCGPathFillStroke);
CGPathRelease(path);
}
-(void)drawRect:(CGRect)rect{
CGContextRef currentRef = UIGraphicsGetCurrentContext();
CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
CGContextDrawPath(currentRef, kCGPathFill);
CGPathRelease(path);
}
-(void)drawAtTop{
CGContextRef currentRef = UIGraphicsGetCurrentContext();
CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
CGContextDrawPath(currentRef, kCGPathFill);
CGPathRelease(path);
}
-(void)drawAtBottom{
//不特意加陰影也會出現陰影效果
CGContextRef current = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(150, 250, 100, 100));
CGContextAddPath(current, path);
[[UIColor purpleColor]setFill];
CGContextDrawPath(current, kCGPathFill);
CGPathRelease(path);
}
由於上述 原因 所以我們可以使用CGContextSaveGState來儲存圖形上下文狀態,可以通過CGContextRestoreGState來恢復到以前的狀態。
-(void)drawAtTop{
CGContextRef currentRef = UIGraphicsGetCurrentContext();
//儲存狀態
CGContextSaveGState(currentRef);
CGContextSetShadowWithColor(currentRef, CGSizeMake(10, 10), 20.f, [UIColor redColor].CGColor);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(55, 60, 150, 150));
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
CGContextDrawPath(currentRef, kCGPathFill);
CGPathRelease(path);
//恢復到以前的狀態
CGContextRestoreGState(currentRef);
}
-(void)drawAtBottom{
//由於上述方法已經新增儲存和修復狀態所以這個就沒有陰影效果
CGContextRef current = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(150, 250, 100, 100));
CGContextAddPath(current, path);
[[UIColor purpleColor]setFill];
CGContextDrawPath(current, kCGPathFill);
CGPathRelease(path);
}
建立和漸變
-(void)drawRect:(CGRect)rect{
CGContextRef currentRef = UIGraphicsGetCurrentContext();
CGContextSaveGState(currentRef);
//色彩空間物件
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
UIColor *startColor = [UIColor orangeColor];
UIColor *endColor = [UIColor purpleColor];
//CGColorGetComponents 返回一個包含各元素的陣列
CGFloat *startColorComponents = (CGFloat *)CGColorGetComponents(startColor.CGColor);
CGFloat *endColorComponents = (CGFloat *)CGColorGetComponents(endColor.CGColor);
//元素陣列
CGFloat colorComponents[8] = {
startColorComponents[0],
startColorComponents[1],
startColorComponents[2],
startColorComponents[3],
endColorComponents[0],
endColorComponents[1],
endColorComponents[2],
endColorComponents[3]
};
CGFloat colorIndices[2] = {0.0f,1.0f};
//返回CGGradientRef 一個物件 gradient(梯度)
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace,(const CGFloat *)&colorComponents, (const CGFloat *)&colorIndices, 2);
//改變漸變的圖形只需要改變開始和結束的座標點
CGPoint startPoint = CGPointMake(0, [[UIScreen mainScreen] bounds].size.height/2);
CGPoint endPoint = CGPointMake([[UIScreen mainScreen] bounds].size.width,startPoint.y);
//畫線 一個context 梯度 開始結束座標,
CGContextDrawLinearGradient(currentRef, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation|kCGGradientDrawsAfterEndLocation);
//釋放漸變物件
CGGradientRelease(gradient);
CGContextRestoreGState(currentRef);
}
平移圖形
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectAngle = CGRectMake(10, 10, 200, 200);
CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 0);
//主要是傳入一個transform 從10 10 到100 0
CGPathAddRect(path, &transform, rectAngle);
CGContextRef currentRef = UIGraphicsGetCurrentContext();
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(currentRef, 5);
CGContextDrawPath(currentRef, kCGPathFillStroke);
CGPathRelease(path);
}
CGContextTranslateCTM 利用這個方法一樣可以達到上次的效果
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectAngle = CGRectMake(10, 10, 200, 200);
CGPathAddRect(path, NULL, rectAngle);
CGContextRef currentRef = UIGraphicsGetCurrentContext();
//CGContextTranslateCTM 利用這個方法一樣可以達到上次的效果
CGContextTranslateCTM(currentRef, 100, 0);
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(currentRef, 5);
CGContextDrawPath(currentRef, kCGPathFillStroke);
CGPathRelease(path);
}
縮放 由200 到100
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectAngle = CGRectMake(100, 100, 200, 200);
//縮放
CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
CGPathAddRect(path, &transform, rectAngle);
CGContextRef currentRef = UIGraphicsGetCurrentContext();
// //CGContextTranslateCTM 利用這個方法一樣可以達到上次的效果
// CGContextTranslateCTM(currentRef, 100, 0);
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(currentRef, 5);
CGContextDrawPath(currentRef, kCGPathFillStroke);
CGPathRelease(path);
}
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectAngle = CGRectMake(100, 100, 200, 200);
//縮放
CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
CGPathAddRect(path, &transform, rectAngle);
CGContextRef currentRef = UIGraphicsGetCurrentContext();
// //CGContextTranslateCTM 利用這個方法一樣可以達到上次的效果
// CGContextTranslateCTM(currentRef, 100, 0);
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(currentRef, 5);
CGContextDrawPath(currentRef, kCGPathFillStroke);
CGPathRelease(path);
}
旋轉
![Uploading 螢幕快照 2016-01-19 上午11.47.36_529253.png . . .]
-(void)drawRect:(CGRect)rect{
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectAngle = CGRectMake(100, 100, 200, 200);
CGAffineTransform transform = CGAffineTransformMakeRotation((45*M_PI)/180.0f);
CGPathAddRect(path, &transform, rectAngle);
CGContextRef currentRef = UIGraphicsGetCurrentContext();
//CGContextTranslateCTM 利用這個方法一樣可以達到上次的效果
CGContextScaleCTM(currentRef, 0.5, 0.5);
CGContextAddPath(currentRef, path);
[[UIColor orangeColor]setFill];
[[UIColor purpleColor]setStroke];
CGContextSetLineWidth(currentRef, 5);
CGContextDrawPath(currentRef, kCGPathFillStroke);
CGPathRelease(path);
}
一樣可以實現
CGContextRotateCTM(currentRef, 30*M_PI / 180.f);
動畫和移動檢視
[UIView beginAnimations:@"ImageViewAnimation" context:(__bridge void * _Nullable)(_imageView)];
[UIView setAnimationDuration:5];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(imageViewStop:finished:context:)];
_imageView.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width -100, [[UIScreen mainScreen] bounds].size.height - 100, 100, 100);
[UIView commitAnimations];
-(void)imageViewStop:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{
NSLog(@"animation finished");
NSLog(@"animations__ID___%@",paramAnimationID);
UIImageView *contextImageView = (__bridge UIImageView *)paramContext;
NSLog(@"imageView————%@",contextImageView);
}
輸出
**2016-01-19 16:17:58.881 LoginTest[5362:1296744] animation finished**
**2016-01-19 16:17:58.881 LoginTest[5362:1296744] animations__ID___ImageViewAnimation**
**2016-01-19 16:17:58.882 LoginTest[5362:1296744] imageView————<UIImageView: 0x7fa2134a82c0; frame = (314 636; 100 100); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fa21371b000>>**
縮放
_imageView.center = self.view.center;
_imageView.transform = CGAffineTransformIdentity;
[UIView beginAnimations:NULL context:NULL];
[UIView setAnimationDuration:5];
_imageView.transform = CGAffineTransformMakeScale(0.5, 0.5);
[UIView commitAnimations];
旋轉
_imageView.center = self.view.center;
_imageView.transform = CGAffineTransformIdentity;
[UIView beginAnimations:NULL context:NULL];
[UIView setAnimationDuration:2];
_imageView.transform = CGAffineTransformMakeRotation((45*M_PI)/180);
[UIView commitAnimations];
相關文章
- 放肆的使用 UIBezierPath 和 CAShapeLayer 畫各種圖形UI
- 使用CAShapeLayer與UIBezierPath畫出想要的圖形UI
- iOS UIBezierPath 貝塞爾曲線iOSUI
- iOS開發-UI高階 Quartz 2D繪圖iOSUIquartz繪圖
- iOS UIBezierPath貝塞爾曲線常用方法iOSUI
- UIBezierPathUI
- [分享]iOS開發-CGContextRef畫圖小結iOSGCContext
- 圖片轉繪畫效和繪畫軟體
- UML畫圖工具-Graphviz和PlantUML
- python畫散點圖和折線圖Python
- iOS開發之畫圖板(貝塞爾曲線)iOS
- canvas學習筆記-2d畫布基礎Canvas筆記
- UIBezierPath+CAShapeLayer繪製微信聊天圖片效果UI
- 折半查詢排序樹畫圖和排序
- CAGradientLayer + UIBezierPath 為檢視畫漸變背景色並帶有弧度UI
- [Unity3D] 2D畫素遊戲(一) Hello Unity!Unity3D遊戲
- UIBezierPath 和各種 layer 把我玩壞了UI
- 『ios』view和tableview的截圖和圖片拼接iOSView
- C 語言畫圖之畫個太極圖
- iOS動畫系列之八:使用CAShapeLayer繪畫動態流量圖iOS動畫
- UIBezierPath貝塞爾曲線UI
- 轉載:UIBezierPath精講UI
- UIBezierPath的使用方法UI
- 畫出入學管理系統的頂層圖和1層圖
- 使用SAPGUI畫圖GUI
- 純CSS畫圖CSS
- 蘋果新專利:iOS正研發虛擬標尺畫圖功能蘋果iOS
- c#畫圖(橢圓和弧線)Craphics類C#
- iOS-圖片水印,圖片裁剪和螢幕截圖iOS
- Android 和 iOS 圖片輪播AndroidiOS
- CAShaperLayer&UIBezierPath系列(一)UI
- CAShaperLayer&UIBezierPath系列(二)UI
- LightningChart -XY 2D圖表特性GC
- 箱形圖(python畫圖)Python
- 靈魂畫手:漫畫圖解 SSH圖解
- 在2D引擎圖底層進行圖形模組分析(轉)
- CAD夢想畫圖如何進行重畫、繪圖模式繪圖模式
- Artstudio Pro for Mac(繪畫和圖片編輯工具)Mac