iOS-初解繪畫

繪圖:需要使用Quartz 2D 


繪畫常規步驟:

(1)要有一支畫筆 

①設置筆畫寬度 CGContextSetLineWidth:

②設置筆畫顏色 set

設置筆畫的顏色 setStroke(下文有與set的區別)

畫線區域範圍的填充 setFill

⑤設置畫筆填充樣式

typedef CF_ENUM (int32_t, CGPathDrawingMode) {
  kCGPathFill,      //只填充
  kCGPathEOFill, //
  kCGPathStroke,//畫筆顏色
  kCGPathFillStroke,//既有填充又有畫筆
  kCGPathEOFillStroke
};

(2)要有一個畫板CGContextRef

(3)畫圖的內容

(4)把內容添加到上下文(畫板)

(5)把內容畫到畫板上


常用方法介紹(這裏沒有按畫圖的步驟介紹方法)

(1)CGContextRef 上下文(畫布)

(2)路徑(貝塞爾路徑)

①UIBezierPath

②通過點繪製一個路徑  CGMutablePathRef

③注意 必須設置起始點 CGContextMoveToPoint

(3)畫形狀

①畫矩形:CGContextAddRect:

②畫曲線:CGContextAddCurveToPoint

③畫圓形:CGContextAddEllipseInRect

.......

(4)截圖

①開始獲得圖片上下文  UIGraphicsBeginImageContext

獲得當前圖片上下文的圖片  UIGraphicsGetImageFromCurrentImageContext() 是從畫圖視圖layer上得到的

③關閉圖片上下文  UIGraphicsEndImageContext 

開始截圖  UIGraphicsBeginImageContextWithOptions

⑤把路徑繪製到上下文  CGContextStrokePath

⑥直接把路徑繪製到界面stroke


1、畫線

(1)首先得有一張畫板 CGContextRef

(2)路徑 畫圖的內容

(3)把路徑添加到上下文CGContextAddPath

(4)把路徑渲染到上下文CGContextStrokePath


//畫直線

- (void)addLine{

//  1、創建畫布(上下文)

//    獲得當前的上下文當做畫布

    CGContextRef context =UIGraphicsGetCurrentContext();

//    2、創建畫圖的內容

/*

使用path,則一個path就代表一條路徑。

比如:如果要在上下文中繪製多個圖形,這種情況下建議使用path

*/

    UIBezierPath *path = [UIBezierPathbezierPath];

//    21起始點

    /*

     Point 中心點

     x:中心點x

     y:中心點y

     

     y不變,x從小值到大值:橫向直線

     */

    [path moveToPoint:CGPointMake(20,20)];

//    22添加終點

//    CGContextAddLineToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat x#>, <#CGFloat y#>)這種方法也可以用下面這個

    

    [path addLineToPoint:CGPointMake(200,200)];

    

    [path addLineToPoint:CGPointMake(100,200)];

    

    

//    2.3 設置畫筆寬度

    path.lineWidth =80

    ;

//    24設置畫筆顏色

//    set 設置既有填充又有畫筆顏色

//    [[UIColor whiteColor] set];

    

//   設置畫筆顏色  setStroke設置的是邊框的顏色

    [[UIColorwhiteColor ] setStroke];

//    設置填充的顏色

    [[UIColorbrownColor] setFill];

    

//    3、把畫的內容(路徑)添加到畫布(上下文)

    

    CGContextAddPath(context, path.CGPath);

    

//    4渲染內容到上下文

//    CGContextStrokePath(context);

    

//    設置填充的樣式既有填充又有畫筆顏色

    CGContextDrawPath(context,kCGPathFillStroke);

    

}

//畫矩形

- (void)addRect{

    

//    1、畫布

    CGContextRef rect =UIGraphicsGetCurrentContext();

    

//    2、內容

    CGContextAddRect(rect,CGRectMake(0,0, 100,100));

    

//    設置畫筆顏色

//    [[UIColor redColor]set];

    

    [[UIColorredColor] setFill];

    [[UIColoryellowColor] setStroke];

    

//    設置畫筆寬度

    CGContextSetLineWidth(rect,10);

    

//    3、渲染

//    直接渲染矩形

//    CGContextStrokeRect(rect, CGRectMake(10, 10, 100, 100));

    

    CGContextDrawPath(rect,kCGPathFillStroke);

    

}


//畫圓形

- (void)addRound{

    

//    1、畫布

    contextRef =UIGraphicsGetCurrentContext();

    

//    2、內容

    CGContextAddEllipseInRect(contextRef,CGRectMake(100,100, 100,100));

    

    [[UIColoryellowColor] set];

    

//    3、渲染

    CGContextDrawPath(contextRef,kCGPathFillStroke);

    

}


//畫曲線

- (void)addCurve{

//    1、畫布

    CGContextRef curve =UIGraphicsGetCurrentContext();

    

//    2、內容

    UIBezierPath *path = [UIBezierPathbezierPath];

    

//    起始點

//    [path moveToPoint:CGPointMake(100, 100)];

    

//    畫曲線(直接繪製成曲線)

//    [path addCurveToPoint:CGPointMake(100, 200) controlPoint1:CGPointMake(20, 20) controlPoint2:CGPointMake(300, 300)];

    

    [[UIColorredColor]setStroke];

    [[UIColoryellowColor]setFill];

    

//    畫弧

    /*

     center:中心點不用起始點

     radius:半徑

     startAngle:開始弧度

     endAngle:結束弧度

     clockwise:是順時針還是逆時針

     */

    [path addArcWithCenter:CGPointMake(100,100) radius:100startAngle:M_PIendAngle:1/4clockwise:YES];

    

//    把內容添加到畫布上

    CGContextAddPath(curve, path.CGPath);

    

//    渲染

    CGContextDrawPath(curve,kCGPathFillStroke);

    

}


//畫線簡化

- (void)addLineEasy{

//    1、路徑

//    2、畫出內容

    

//    1

    UIBezierPath *path = [UIBezierPathbezierPath];

    [path moveToPoint:CGPointMake(200,200)];

    [path addLineToPoint:CGPointMake(300,40)];

    [[UIColorwhiteColor]set];

    

//    2

    [path stroke];

    

}


//截屏

- (void)cutScreen{

//    1、獲得一個圖片的上下文(畫布)

//    2、畫布的上下文

//    3、設置截圖的參數

//    4、截圖

//    4、關閉圖片的上下文

//    5、保存

    

//    1

    UIGraphicsBeginImageContext(self.frame.size);

//    2

    [selfaddRound];

    

    [self.layerrenderInContext:contextRef];

    

//    3

    /*

     size:圖片尺寸

     opaque:是否是不透明  yes是不透明

     scale:比例

     */

    UIGraphicsBeginImageContextWithOptions(self.frame.size,YES, 1);

    

//    4

    UIImage *image =UIGraphicsGetImageFromCurrentImageContext();

    

//    5

    UIGraphicsEndImageContext();

    

//    6

    UIImageWriteToSavedPhotosAlbum(image,self, @selector(image:didFinishSavingWithError:contextInfo:),nil);

    

}


- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{

    

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章