目錄
一. 基本圖形的繪制
- 直線
- 矩形
- 橢圓
- 圓: 使用畫橢圓的方法即可
- 虛線畫筆
二. 文字繪制
三. 在內(nèi)存中生成圖片(無需再用drawRect方法)
四. 復雜圖形的繪制
- 繪制圓角矩形(將畫直線的內(nèi)容全部注釋, 只保留畫圓弧的內(nèi)容, 仍可以畫出一個完整的圓角矩形)
- 繪制正三角形
五. 實踐: 播放音樂時的頻率折線圖
六. 定寬不定高的瀑布流(UICollectionView)
- 新建MyLayout類, 繼承于UICollectionViewLayout(基本框架)
- 核心內(nèi)容: 計算每個Cell的frame
- Cell類和Model類(省略Model類代碼)
- ViewController.m中實現(xiàn)代理方法, 顯示視圖
一. 基本圖形的繪制
-
UIGraphicsGetCurrentContext()
獲取上下文指針
- 設置畫線的顏色, 寬度, 端點(或范圍)
-
CGContextStroke…
或CGContextFill…
繪制
1. 直線
// 視圖顯示的時候默認會調(diào)用這個方法
// 一般不會直接調(diào)用該方法
// 如果需要調(diào)用這個方法里面的代碼, 可以調(diào)用視圖對象的setNeedsDisplay方法
- (void)drawRect:(CGRect)rect
{
// C方法獲取上下文指針
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 設置繪制的顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
// 設置直線的寬度
CGContextSetLineWidth(ctx, 10);
// 直線的端點
const CGPoint points1[] = {CGPointMake(20, 20), CGPointMake(100, 20)};
// 畫線
/*
CGContextStrokeLineSegments(<#CGContextRef c#>, <#const CGPoint *points#>, <#size_t count#>)
第一個參數(shù): 繪圖的上下文
第二個參數(shù): 直線的端點數(shù)組
第三個參數(shù): 數(shù)組里面元素的個數(shù)
*/
CGContextStrokeLineSegments(ctx, points1, 2);
// 2條直線, 相接
CGContextSetLineWidth(ctx, 4);
const CGPoint points2[] = {CGPointMake(30, 30), CGPointMake(30, 100), CGPointMake(30, 100), CGPointMake(100, 70)};
// 畫線
// C語言數(shù)組長度計算: sizeof(points2) / sizeof(points2[0])
CGContextStrokeLineSegments(ctx, points2, 4);
// 直線交叉, 直線交叉處是圓形的
CGContextSetLineCap(ctx, kCGLineCapRound);
const CGPoint points3[] = {CGPointMake(120, 30), CGPointMake(120, 100), CGPointMake(120, 100), CGPointMake(200, 70)};
// 畫線
CGContextStrokeLineSegments(ctx, points3, sizeof(points3) / sizeof(points3[0]));
// 直線交叉處是方形的
CGContextSetLineWidth(ctx, 15);
CGContextSetLineCap(ctx, kCGLineCapSquare);
const CGPoint points4[] = {CGPointMake(230, 30), CGPointMake(230, 100), CGPointMake(230, 100), CGPointMake(300, 70)};
// 畫線
CGContextStrokeLineSegments(ctx, points4, sizeof(points4) / sizeof(points4[0]));
}
2. 矩形
- (void)drawRect:(CGRect)rect {
…………………………………………………………………………………………
// 1) 空心
// 設置線寬
CGContextSetLineWidth(ctx, 6);
// 直線顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
// 繪制矩形
/*
CGContextStrokeRect(<#CGContextRef c#>, <#CGRect rect#>)
第一個參數(shù): 上下文
第二個參數(shù): 矩形的范圍
*/
CGContextStrokeRect(ctx, CGRectMake(30, 120, 130, 60));
// 2) 實心矩形
CGContextSetFillColorWithColor(ctx, [UIColor cyanColor].CGColor);
// 繪制
CGContextFillRect(ctx, CGRectMake(170, 120, 100, 60));
}
3. 橢圓
- (void)drawRect:(CGRect)rect {
…………………………………………………………………………………………
// 1) 空心
// 設置線寬
CGContextSetLineWidth(ctx, 2);
// 設置線的顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor brownColor].CGColor);
// 繪制
CGContextStrokeEllipseInRect(ctx, CGRectMake(30, 200, 100, 40));
// 2) 實心
CGContextFillEllipseInRect(ctx, CGRectMake(150, 200, 100, 40));
}
4. 圓: 使用畫橢圓的方法即可
5. 虛線畫筆
- (void)drawRect:(CGRect)rect {
…………………………………………………………………………………………
/*
CGContextSetLineDash(<#CGContextRef c#>, <#CGFloat phase#>, <#const CGFloat *lengths#>, <#size_t count#>)
第一個參數(shù): 繪圖的上下文
第二個參數(shù): 相位
第三個參數(shù): 數(shù)組
第四個參數(shù): 數(shù)組的長度
*/
// 1) 畫一個虛線
const CGFloat dash1[] = {10, 10};
CGContextSetLineDash(ctx, 0, dash1, 2);
// 畫線
const CGPoint points5[] = {CGPointMake(30, 260), CGPointMake(300, 260)};
CGContextStrokeLineSegments(ctx, points5, 2);
// 2) 另畫虛線, 觀察數(shù)組dash[]的作用
const CGFloat dash2[] = {1, 10};
CGContextSetLineDash(ctx, 0, dash2, 2);
// 畫線
const CGPoint points6[] = {CGPointMake(30, 300), CGPointMake(300, 300)};
CGContextStrokeLineSegments(ctx, points6, 2);
const CGFloat dash3[] = {10, 20, 20};
CGContextSetLineDash(ctx, 0, dash3, 3);
// 畫線
const CGPoint points7[] = {CGPointMake(30, 340), CGPointMake(300, 340)};
CGContextStrokeLineSegments(ctx, points7, 3);
// 3) 修改相位
const CGFloat dash4[] = {10, 10};
CGContextSetLineDash(ctx, 5, dash4, 2);
// 畫線
const CGPoint points8[] = {CGPointMake(30, 380), CGPointMake(300, 380)};
CGContextStrokeLineSegments(ctx, points8, 3);
}
二. 文字繪制
- 獲取上下文指針
- (可選)設置陰影
CGContextSetShadow()
, 設置繪制模式CGTextDrawingMode
- 繪制(設置文字繪制位置和文字屬性)
str1 drawAtPoint:<#(CGPoint)#> withAttributes:<#(NSDictionary *)#>
- (void)drawRect:(CGRect)rect
{
// 獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
NSString *str1 = @"Who is this?";
/*
str1 drawAtPoint:<#(CGPoint)#> withAttributes:<#(NSDictionary *)#>
第一個參數(shù): 文字繪制的位置
第二個參數(shù): 文字的屬性
*/
NSDictionary *dict = @{NSFontAttributeName:[UIFont systemFontOfSize:20], NSForegroundColorAttributeName:[UIColor redColor]};
[str1 drawAtPoint:CGPointMake(30, 40) withAttributes:dict];
// 設置陰影
/*
CGContextSetShadow(<#CGContextRef context#>, <#CGSize offset#>, <#CGFloat blur#>)
第一個參數(shù): 繪圖的上下文
第二個參數(shù): 陰影的偏移量(CGSize類型的值, 第一個值是x方向的偏移量, 正數(shù)表示陰影在文字的右邊, 第二個值是y方向上的偏移量, 正數(shù)表示陰影在文字的下邊)
第三個參數(shù): 陰影的透明度(0-1)
*/
CGContextSetShadow(ctx, CGSizeMake(4, 4), 1);
// 繪制文字
NSString *str2 = @"It's Yuen";
[str2 drawAtPoint:CGPointMake(30, 80) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14], NSForegroundColorAttributeName:[UIColor greenColor]}];
#warning CGTextDrawingMode
/*
CGContextSetTextDrawingMode(<#CGContextRef c#>, <#CGTextDrawingMode mode#>)
第二個參數(shù):
enum CGTextDrawingMode {
kCGTextFill,
kCGTextStroke,
kCGTextFillStroke,
kCGTextInvisible,
kCGTextFillClip,
kCGTextStrokeClip,
kCGTextFillStrokeClip,
kCGTextClip
};
*/
CGContextSetTextDrawingMode(ctx, kCGTextStroke);
NSString *str3 = @"Oh, I'm fine.";
[str3 drawAtPoint:CGPointMake(30, 120) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14], NSForegroundColorAttributeName:[UIColor greenColor]}];
CGContextSetTextDrawingMode(ctx, kCGTextFillStroke);
NSString *str4 = @"I'm sorry";
[str4 drawAtPoint:CGPointMake(30, 160) withAttributes:@{NSForegroundColorAttributeName:[UIColor purpleColor], NSFontAttributeName:[UIFont systemFontOfSize:16]}];
}
三. 在內(nèi)存中生成圖片(無需再用drawRect方法)
- 開始使用上下文中的圖片
UIGraphicsBeginImageContext()
- 將圖片視圖內(nèi)容繪制到內(nèi)存中
myView.layer renderInContext:ctx
(frame中的x和y值設置沒有用, 解決方法: 建立一個視圖把圖片放在新建視圖中適當?shù)奈恢?
- 獲取內(nèi)存中的圖片
UIGraphicsGetImageFromCurrentImageContext()
- 結(jié)束繪圖
UIGraphicsEndImageContext()
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor];
// 創(chuàng)建一個視圖對象
_myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 100, 300, 400)];
_myImageView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:_myImageView];
_myImageView.image = [self generateImage];
}
// 生成圖片
- (UIImage *)generateImage
{
// 開始使用上下文中的圖片
UIGraphicsBeginImageContext(CGSizeMake(300, 400));
// 在上下文中繪制
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 直線
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 6);
const CGPoint points1[] = {CGPointMake(30, 30), CGPointMake(200, 30)};
CGContextStrokeLineSegments(ctx, points1, 2);
// 矩形
CGContextStrokeRect(ctx, CGRectMake(30, 120, 100, 60));
// 橢圓
CGContextStrokeEllipseInRect(ctx, CGRectMake(30, 120, 100, 60));
// 將圖片視圖內(nèi)容繪制到內(nèi)存中
// frame中的x和y值設置沒有用, 解決方法: 建立一個視圖把圖片放在適當?shù)奈恢? UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 300, 400)];
UIImageView *tmpImageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 200, 30, 40)];
tmpImageView.image = [UIImage imageNamed:@"NO.jpg"];
[myView addSubview:tmpImageView];
[myView.layer renderInContext:ctx];
// 獲取內(nèi)存中的圖片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 結(jié)束繪圖
UIGraphicsEndImageContext();
return image;
}
四. 復雜圖形的繪制
- 獲取上下文
- 繪制圓角矩形:開始繪制:
CGContextMoveToPoint(ctx, x+radius, y)
, 畫直線:CGContextAddLineToPoint(ctx, x+width-radius, y)
, 畫圓弧:CGContextAddArcToPoint(<#CGContextRef c#>, <#CGFloat x1#>, <#CGFloat y1#>, <#CGFloat x2#>, <#CGFloat y2#>, <#CGFloat radius#>)
繪制正三角形
- 因為是手動一步步畫的所以在結(jié)束后需要調(diào)用
CGContextStrokePath()
方法
1. 繪制圓角矩形(將畫直線的內(nèi)容全部注釋, 只保留畫圓弧的內(nèi)容, 仍可以畫出一個完整的圓角矩形)
- (void)drawRect:(CGRect)rect
{
// 獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 繪制圓角矩形
[self drawMyRoundedRectWithCornerX:30 y:40 radius:10 width:200 height:80 context:ctx];
// 因為是手動一步步畫的所以在結(jié)束后需要調(diào)用CGContextStrokePath()方法;
CGContextStrokePath(ctx);
}
/*
@param x: 起始點的橫坐標
@param y: 起始點的縱坐標
@param radius: 圓角矩形的半徑
@param width: 矩形的寬度
@param height: 矩形的高度
@param ctx: 繪圖上下文
*/
- (void)drawMyRoundedRectWithCornerX:(CGFloat)x y:(CGFloat)y radius:(CGFloat)radius width:(CGFloat)width height:(CGFloat)height context:(CGContextRef)ctx
{
#warning 將畫直線的內(nèi)容全部注釋, 只保留畫圓弧的內(nèi)容, 仍可以畫出一個完整的圓角矩形
// 用起始點開始
CGContextMoveToPoint(ctx, x+radius, y);
// 畫直線
CGContextAddLineToPoint(ctx, x+width-radius, y);
// 畫圓弧
/*
CGContextAddArcToPoint(<#CGContextRef c#>, <#CGFloat x1#>, <#CGFloat y1#>, <#CGFloat x2#>, <#CGFloat y2#>, <#CGFloat radius#>)
(x1, y1) 第一個控制點
(x2, y2) 第二個控制點
*/
CGContextAddArcToPoint(ctx, x+width, y, x+width, y+radius, radius);
// 畫直線
CGContextAddLineToPoint(ctx, x+width, y+height-radius);
// 畫圓弧
CGContextAddArcToPoint(ctx, x+width, y+height, x+width-radius, y+height, radius);
// 畫直線
CGContextAddLineToPoint(ctx, x+radius, y+height);
// 畫圓弧
CGContextAddArcToPoint(ctx, x, y+height, x, y+height-radius, radius);
// 畫直線
CGContextAddLineToPoint(ctx, x, y+radius);
// 畫圓弧
CGContextAddArcToPoint(ctx, x, y, x+radius, y, radius);
}
2. 繪制正三角形
- (void)drawMyShapeWithCenterX:(CGFloat)x centerY:(CGFloat)y radius:(CGFloat)radius num:(NSInteger)num context:(CGContextRef)ctx
{
CGContextMoveToPoint(ctx, x+radius, y);
for (int i = 0; i <= num; i++) {
// 計算頂點的位置
CGPoint point = CGPointMake(x+radius*cos(2*M_PI*i/num), y+radius*sin(2*M_PI*i/num));
// 連線
CGContextAddLineToPoint(ctx, point.x, point.y);
}
}
五. 實踐: 播放音樂時的頻率折線圖
六. 定寬不定高的瀑布流(UICollectionView)
1. 新建MyLayout類, 繼承于UICollectionViewLayout(基本框架)
//
// MyLayout.h
// 03_WaterFlow
#import <UIKit/UIKit.h>
@protocol MyLayoutDelegate <NSObject>
- (int)columnsInCollectionView;
@end
@interface MyLayout : UICollectionViewLayout
/*
@param sectionInsets: 上下左右的間距
@param itemSpace: 橫向的間距
@param lineSpace: 縱向的間距
*/
- (instancetype)initWithSectionInsets:(UIEdgeInsets)sectionInsets itemSpace:(CGFloat)itemSpace lineSpace:(CGFloat)lineSpace;
// 代理屬性
@property (nonatomic, assign) id<MyLayoutDelegate> delegate;
@end
//
// MyLayout.m
// 03_WaterFlow
#import "MyLayout.h"
@implementation MyLayout
{
// 布局
UIEdgeInsets _sectionInsets;
CGFloat _itemSpace;
CGFloat _lineSpace;
// 存儲每一列當前的高度
NSMutableArray *_columnArray;
// 列數(shù)
int _column;
// 存儲所有cell的frame
NSMutableArray *_attributeArray;
}
- (instancetype)initWithSectionInsets:(UIEdgeInsets)sectionInsets itemSpace:(CGFloat)itemSpace lineSpace:(CGFloat)lineSpace
{
if (self = [super init]) {
// 賦值
_sectionInsets = sectionInsets;
_itemSpace = itemSpace;
_lineSpace = lineSpace;
}
return self;
}
// 每次重新布局的時候會調(diào)用這個方法
- (void)prepareLayout
{
[super prepareLayout];
// 獲取列數(shù)
if (self.delegate) {
_column = [self.delegate columnsInCollectionView];
}
// 初始化數(shù)組, 初始值就是_sectionInsets.top
_columnArray = [NSMutableArray array];
for (int i = 0; i < _column; i++) {
[_columnArray addObject:[NSNumber numberWithFloat:_sectionInsets.top]];
}
// 去計算每個cell的frame
_attributeArray = [NSMutableArray array];
// 一共有多少cell
NSInteger cellCnt = [self.collectionView numberOfItemsInSection:0];
// 計算寬度
CGFloat cellW = (self.collectionView.bounds.size.width - _sectionInsets.left - _sectionInsets.right - _itemSpace * (_column - 1)) / _column;
for (int i = 0; i < cellCnt; i++) {
}
}
@end
2. 核心內(nèi)容: 計算每個Cell的frame
- (void)prepareLayout
{
…………………………………………………………………………………………
// 計算寬度
CGFloat cellW = (self.collectionView.bounds.size.width - _sectionInsets.left - _sectionInsets.right - _itemSpace * (_column - 1)) / _column;
for (int i = 0; i < cellCnt; i++) {
// x
// 獲取cell在第幾列
NSInteger lowIndex = [self lowestColumnIndex];
CGFloat x = _sectionInsets.left + (cellW + _itemSpace) * lowIndex;
// y
CGFloat y = [_columnArray[lowIndex] floatValue];
// w
// cellW
// h
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
CGFloat height = [self.delegate heightForCellAtIndexPath:indexPath];
_columnArray[lowIndex] = [NSNumber numberWithFloat:y + height + _lineSpace];
// 創(chuàng)建存儲frame的對象
CGRect frame = CGRectMake(x, y, cellW, height);
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attribute.frame = frame;
// 添加到數(shù)組中
[_attributeArray addObject:attribute];
}
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return _attributeArray;
}
// 設置最大滾動范圍
- (CGSize)collectionViewContentSize
{
NSInteger index = [self highestColumnIndex];
return CGSizeMake(self.collectionView.bounds.size.width, [_columnArray[index] floatValue]);
}
// 獲取最高的列數(shù)
- (NSInteger)highestColumnIndex
{
NSInteger index = -1;
CGFloat height = CGFLOAT_MIN;
for (int i = 0; i < _columnArray.count; i++) {
NSNumber *n = _columnArray[i];
if (n.floatValue > height) {
height = n.floatValue;
index = i;
}
}
return index;
}
// 獲取當前最低高度的列序數(shù)
- (NSInteger)lowestColumnIndex
{
CGFloat height = CGFLOAT_MAX;
NSInteger index = -1;
for (NSInteger i = 0; i < _columnArray.count; i++) {
NSNumber *n = _columnArray[i];
if (n.floatValue < height) {
height = n.floatValue;
index = i;
}
}
return index;
}
3. Cell類和Model類(省略Model類代碼)
//
// DataCell.h
// 03_WaterFlow
#import <UIKit/UIKit.h>
#import "DataModel.h"
@interface DataCell : UICollectionViewCell
- (void)config:(DataModel *)model;
@end
//
// DataCell.m
// 03_WaterFlow
#import "DataCell.h"
@implementation DataCell
{
UILabel *_titleLabel;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
_titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 120, 20)];
[self.contentView addSubview:_titleLabel];
}
return self;
}
- (void)config:(DataModel *)model
{
_titleLabel.text = model.title;
}
@end
4. ViewController.m中實現(xiàn)代理方法, 顯示視圖
//
// ViewController.m
// 03_WaterFlow
#import "ViewController.h"
#import "DataCell.h"
#import "MyLayout.h"
@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, MyLayoutDelegate>
{
NSMutableArray *_dataArray;
UICollectionView *_collectionView;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1. 初始化數(shù)據(jù)
[self prepareData];
// 2. 創(chuàng)建網(wǎng)格視圖
[self createCollectionView];
}
- (void)prepareData
{
_dataArray = [NSMutableArray array];
for (int i = 0; i < 100; i++) {
// 創(chuàng)建模型對象
DataModel *model = [[DataModel alloc] init];
model.title = [NSString stringWithFormat:@"第%d條數(shù)據(jù)", i+1];
model.height = 40+arc4random()%60;
[_dataArray addObject:model];
}
}
- (void)createCollectionView
{
// 布局對象
MyLayout *layout = [[MyLayout alloc] initWithSectionInsets:UIEdgeInsetsMake(5, 5, 5, 5) itemSpace:10 lineSpace:10];
layout.delegate = self;
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, 375, 667-20) collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
#warning 注冊cell
[_collectionView registerClass:[DataCell class] forCellWithReuseIdentifier:@"cellId"];
_collectionView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_collectionView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - UICollectionView代理方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return _dataArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
DataCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1];
// 顯示數(shù)據(jù)
DataModel *model = _dataArray[indexPath.item];
[cell config:model];
return cell;
}
#pragma mark - MyLayout代理方法
- (int)columnsInCollectionView
{
return 3;
}
- (CGFloat)heightForCellAtIndexPath:(NSIndexPath *)indexPath
{
DataModel *model = _dataArray[indexPath.item];
return model.height;
}
@end