****Quearz2D****是一個二維繪制引擎,同時支持iOS和Mac系統(tǒng). Quartz 2D能完成繪制圖形 : 線條\三角形\矩形\圓\弧等 繪制文字 繪制\生成圖片(圖像) 讀取\生成PDF 截圖\裁剪圖片片 自定義UI控件.
===為了便于搭建美觀的UI界面,iOS提供了UIKit框架,??有各種各樣的UI控件 利?UIKit框架提供的控件,拼拼湊湊,能搭建和現(xiàn)實一些簡單捡鱼、常見的UI界?. 但是,有些UI界面極其復雜设捐、?且?較個性化,?普通的UI控件無法實現(xiàn),這時可以利用Quartz2D技術將控件內部的結構畫出來,自定義控件的樣子,其實,iOS中?部分控件的內容都是通過Quartz2D畫出來的,Quartz2D在iOS開發(fā)中很重要的?個價值是:自定義view(自定義UI控件) .
直線
直線是我們所研究Quartz2D繪制最簡單的一種圖形,我們怎么實現(xiàn)呢? 上代碼
-(void)line1{
// 1 獲取圖形上下文(繪圖環(huán)境,相當于一塊畫布)
CGContextRef cxt = UIGraphicsGetCurrentContext();//圖形上下文只能獲取不能創(chuàng)建
// 2 描繪路徑
CGMutablePathRef path = CGPathCreateMutable();
// 起點
//第一個參數(shù)是Path 第二個參數(shù)是transform 然后是橫縱坐標
//CGPathMoveToPoint(<#CGMutablePathRef _Nullable path#>, <#const CGAffineTransform * _Nullable m#>, <#CGFloat x#>, <#CGFloat y#>)
CGPathMoveToPoint(path, NULL, 50, 50);
// 終點
CGPathAddLineToPoint(path, NULL, 200, 200);
// 3 把路徑放到圖形上下文
CGContextAddPath(cxt, path);
// 4 渲染上下文cxt
CGContextStrokePath(cxt);
}
我們調用以上方法得到的結果是
但是我們往往不只是在一個畫板上畫一條直線 有時候我們需要畫多條直線 這個時候我們就需要創(chuàng)建多個路徑, 我們借助于UIBezierPath,以第一條直線的終點 作為第二條曲線的起點繪制兩條直線
-(void)line2{
//BezierPath(貝瑟爾路徑1)
UIBezierPath *path = [UIBezierPath bezierPath];
//設置起點
[path moveToPoint:CGPointMake(50, 50)];
//設置終點
[path addLineToPoint:CGPointMake(200, 200)];
//設置顏色
[[UIColor redColor] set];
path.lineWidth = 10;
//渲染
[path stroke];
//BezierPath(貝瑟爾路徑2)
UIBezierPath *path1 = [UIBezierPath bezierPath];
//設置起點
[path1 moveToPoint:CGPointMake(200, 200)];
//設置終點
[path1 addLineToPoint:CGPointMake(200, 300)];
//設置顏色
[[UIColor greenColor] set];
path1.lineWidth = 10;
//渲染
[path1 stroke];
}
運行結果如下
多條直線的繪制方法類似
曲線
-(void)line3{
//獲取上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
//描述路徑(起點)
CGContextMoveToPoint(cxt, 50, 50);
// 前一組表示控制點 后一組表示終點
//CGContextAddQuadCurveToPoint(<#CGContextRef _Nullable c#>, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)
CGContextAddQuadCurveToPoint(cxt, 100, 100, 250, 50);
// 渲染
CGContextStrokePath(cxt);
}
在這里穿插一點: 我們在圖形繪制的過程當中 頻繁是使用CGContextRef 那么什么是圖形上下文?
圖形上下文(Graphics Context):是一個CGContextRef類型的數(shù)據(jù)
圖形上下文的作用: (1)保存繪圖信息慨畸、繪圖狀態(tài)(2)決定繪制的輸出目標(繪制到什么地?去?)(輸出目標可以是PDF?文件、Bitmap或者顯示器的窗口上)
相同的?套繪圖序列,指定不同的Graphics Context,就可將相同的圖像繪制到不同的目標上 .
****要實現(xiàn)drawRect:?法才能繪圖到view上, 因為在drawRect:?法中才能取得跟view相關聯(lián)的圖形上下文****: 所以我們以上方法的調用都是在drawRect:方法里面
****drawRect:?法被調用也是在view第一次顯示在屏幕上的時候或者是調用view的setNeedsDisplay或者setNeedsDisplayInRect:時 ****:
接下來我們在自定義的view視圖上實現(xiàn)一個畫板的效果
#import "DrawView.h"
@interface DrawView ()
{
//起點和終點
CGPoint _startPoint;
CGPoint _endPoint;
}
//數(shù)組保留每一條線
@property(nonatomic,strong)NSMutableArray *pathArr;
@end
@implementation DrawView
-(NSMutableArray *)pathArr{
if (!_pathArr) {
_pathArr = [NSMutableArray array];
}
return _pathArr;
}
我們實現(xiàn)UIview的touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event和touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event方法
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//獲取起點
_startPoint = [[touches anyObject]locationInView:self];
//創(chuàng)建貝瑟爾路徑
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_startPoint];//起點
//添加到數(shù)組
[self.pathArr addObject:path];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
_endPoint = [[touches anyObject]locationInView:self];
//數(shù)組中最后一條線
UIBezierPath *path = [self.pathArr lastObject];
[path addLineToPoint:_endPoint];
//不能直接調用 這個方法
[self setNeedsDisplay];//setNeedsDisplay會自動調用drawRect方法
}
這個時候我們運行程序 拖動鼠標在view上 可以看到沒有任何的反應,因為我們沒有實現(xiàn)drawRect:(CGRect)rect;
我們在drawRect:(CGRect)rect方法里面寫一下代碼
for (UIBezierPath * path in _pathArr) {
[[UIColor redColor]set];
path.lineWidth = 10;
[path stroke];
}
效果如下:
我們如果加上橡皮擦, 撤銷鍵等等,就可以實現(xiàn)真正畫板功能了,這些我們不在此操作 大家可以按興趣各自進行.
持續(xù)更新中~~~~~~~~~
