UIImage以及圖形相關

繪圖和動畫

關于貝塞爾曲線和CALayer以及UIView本身的動畫惜浅,是需要了解的税稼,實際工作中會用到身害。下面幾篇文章比較好赞枕,用到的基本都在了。
iOS動畫篇_UIBezierPath(貝塞爾曲線)
iOS動畫篇_CALayer這些牛逼的子類你造嗎
iOS動畫篇_UIView動畫

設置圓角

imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = 10;

在大多數(shù)情況下坪创,這么做是可以的炕婶。只是這里會觸發(fā)離屏渲染,降低性能莱预,在表格使用中柠掂,會掉幀。這個點是App的性能優(yōu)化方案之一

解決方法是通過UIGraphicsBeginImageContextWithOptionsUIBezierPath配合依沮,畫出這個圓角涯贞。下面這幾篇文章寫得比較詳細,值得參考:
設置圓角&避免離屏渲染的幾種方法

畫圖

  • 自定義UIView的子類

  • 重寫- (void)drawRect:(CGRect)rect方法

  • 利用UIGraphicsGetCurrentContextUIBezierPath兩個類的相關方法畫圖

  • 在xib上拖一個空白的UIView危喉,設置好約束宋渔,將類名改成自定的UIView的子類

  • 常用的有劃線,畫矩形辜限,畫圓皇拣,畫文字,畫圖片(這個還是用UIImageView進行處理比較方便)

這里有篇比較好的文章,這里的例子也是從里面摘的
iOS Quart2D繪圖之UIGraphicsGetCurrentContext基礎氧急。

  • 這篇文章中有個圓形進度條的例子颗胡。可以認為是畫圓弧和畫文字的一個組合吩坝。下面的Slider還是放在另外一個控件中毒姨,可以直接用系統(tǒng)的。這里process就是Slidervalue屬性钉寝,范圍0~1
#import "ProcessView.h"

@interface ProcessView ()

@property (nonatomic, assign) CGFloat progress;

@end

@implementation ProcessView

- (void)updateProcess:(CGFloat)process {
    if (process < 0 || (process > 1)) {
        return;
    }
    self.progress = process;
    [self setNeedsDisplay];
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    // 畫圓弧
    CGFloat startA = - M_PI_2;
    CGFloat endA =  - M_PI_2 + self.progress * M_PI * 2;
    NSLog(@"%f - %f - %f",self.progress,(3.14159265359*self.progress)/180,endA);
    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width*0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width*0.5-10 startAngle:startA endAngle:endA clockwise:YES];
    UIColor *color = [UIColor colorWithRed:self.progress green:(1-self.progress) blue:0 alpha:1];
    [color setStroke];
    path.lineWidth = 5;
    [path stroke];
    
    // 畫文字
    //1.獲取當前上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    //2.創(chuàng)建文字
    NSString * str = [NSString stringWithFormat:@"%04.2f%%", (self.progress * 100)];
    //設置字體樣式
    NSMutableDictionary * dict = [NSMutableDictionary dictionary];
    //NSFontAttributeName:字體大小
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:20];
    //字體前景色
    dict[NSForegroundColorAttributeName] = color;
    //字體背景色
    dict[NSBackgroundColorAttributeName] = [UIColor clearColor];
    //字體陰影
    NSShadow * shadow = [[NSShadow alloc]init];
    //陰影偏移量
    shadow.shadowOffset = CGSizeMake(2, 2);
    //陰影顏色
    shadow.shadowColor = [UIColor greenColor];
    //高斯模糊
    shadow.shadowBlurRadius = 5;
    dict[NSShadowAttributeName] = shadow;
    //字體間距
    dict[NSKernAttributeName] = @10;
    //繪制到上下文
    //從某一點開始繪制 默認 0 0點
    //[str drawAtPoint:CGPointMake(100, 100) withAttributes:dict];
    //繪制區(qū)域設置
    CGSize size = [str sizeWithAttributes:dict];
    CGFloat width = size.width;
    CGFloat height = size.height;
    CGFloat x = rect.size.width / 2 - width / 2;
    CGFloat y = rect.size.height / 2 - height / 2;
    [str drawInRect:CGRectMake(x, y, width, height) withAttributes:dict];
    //添加到上下文
    CGContextStrokePath(contextRef);
}

@end

這里是Demo地址

文字水印

// 文字水印
+ (UIImage *)waterWithImage:(UIImage *)image text:(NSString *)text point:(CGPoint)point attributed:(NSDictionary * )attributed {
    //1.開啟上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //2.繪制圖片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //添加水印文字
    [text drawAtPoint:point withAttributes:attributed];
    //3.從上下文中獲取新圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    //4.關閉圖形上下文
    UIGraphicsEndImageContext();
    //返回圖片
    return newImage;
}

圖片水印

// 圖片水印
+ (UIImage *)waterWithImage:(UIImage *)image mask:(UIImage *)mask rect:(CGRect)rect {
    //1.開啟上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //2.繪制原圖
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //3.繪制水印圖片到當前上下文
    [mask drawInRect:rect];
    //4.從上下文中獲取新圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    //5.關閉圖形上下文
    UIGraphicsEndImageContext();
    //返回圖片
    return newImage;
}

裁剪圓形圖片

+ (UIImage *)clipCircleWithImage:(UIImage *)image {
    //1弧呐、開啟上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //2、設置裁剪區(qū)域
    UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    [path addClip];
    //3瘩蚪、繪制圖片
    [image drawAtPoint:CGPointZero];
    //4泉懦、獲取新圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    //5、關閉上下文
    UIGraphicsEndImageContext();
    //6疹瘦、返回新圖片
    return newImage;
}

設置邊框顏色和大小

  • 對于矩形的圖片崩哩,直接在UIImageView上設置就可以了
imageView.layer.borderColor = [UIColor orangeColor].CGColor;
imageView.layer.borderWidth = 2;
  • 對于圓形變換的圖片,UIImageView矩形邊框是變不了的言沐。還是需要變換UIImage
// 帶邊框的圓形裁剪
+ (UIImage *)clipCircleWithImage:(UIImage *)image borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor {
    //1邓嘹、開啟上下文
    UIGraphicsBeginImageContext(image.size);
    
    //2、設置邊框
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:rect];
    [borderColor setFill];
    [path fill];
    
    //3险胰、設置裁剪區(qū)域
    UIBezierPath * clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(rect.origin.x + borderWidth , rect.origin.x + borderWidth , rect.size.width - borderWidth * 2, rect.size.height - borderWidth *2)];
    [clipPath addClip];
    
    //3汹押、繪制圖片
    [image drawAtPoint:CGPointZero];
    
    //4、獲取新圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    //5起便、關閉上下文
    UIGraphicsEndImageContext();
    //6棚贾、返回新圖片
    return newImage;
}

保存圖片

  • 比如照相機的圖片存到手機;或者將圖片傳到后臺保存榆综;都需要將UIImage轉換為NSData

  • UIImageJPEGRepresentationUIImagePNGRepresentation都能達到目的

  • 一個是有損壓縮(JPEG妙痹,經驗壓縮比為0.9),一個是無損壓縮(PNG

  • 數(shù)據(jù)量無損壓縮要大很多鼻疮;具體采用哪種怯伊,看情況吧,主要看后臺存儲狀況判沟。推薦無損壓縮(SDWebImage用無損壓縮)

Deep Analysis UIImageJPEGRepresentation&UIImagePNGRepresentation

參考文章

以上的例子都來自下面這篇文章
iOS Quart2D繪圖之UIGraphicsBeginImageContextWithOptions基礎耿芹。

圖片拉伸的例子來自這里
UIImage常用的分類

IOS-UIImageView

這里是Demo地址
點擊button之后的下一頁就是Image的變換

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市挪哄,隨后出現(xiàn)的幾起案子吧秕,更是在濱河造成了極大的恐慌,老刑警劉巖迹炼,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寇甸,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機拿霉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門吟秩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人绽淘,你說我怎么就攤上這事涵防。” “怎么了沪铭?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵壮池,是天一觀的道長。 經常有香客問我杀怠,道長椰憋,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任赔退,我火速辦了婚禮橙依,結果婚禮上,老公的妹妹穿的比我還像新娘硕旗。我一直安慰自己窗骑,他們只是感情好,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布漆枚。 她就那樣靜靜地躺著创译,像睡著了一般。 火紅的嫁衣襯著肌膚如雪墙基。 梳的紋絲不亂的頭發(fā)上软族,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機與錄音残制,去河邊找鬼互订。 笑死,一個胖子當著我的面吹牛痘拆,可吹牛的內容都是我干的。 我是一名探鬼主播氮墨,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼纺蛆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了规揪?” 一聲冷哼從身側響起桥氏,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎猛铅,沒想到半個月后字支,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年堕伪,在試婚紗的時候發(fā)現(xiàn)自己被綠了揖庄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡欠雌,死狀恐怖蹄梢,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情富俄,我是刑警寧澤禁炒,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站霍比,受9級特大地震影響幕袱,放射性物質發(fā)生泄漏。R本人自食惡果不足惜悠瞬,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一们豌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阁危,春花似錦玛痊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至趴乡,卻和暖如春对省,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晾捏。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工蒿涎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惦辛。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓劳秋,卻偏偏與公主長得像,于是被迫代替她去往敵國和親胖齐。 傳聞我的和親對象是個殘疾皇子玻淑,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件呀伙、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 在iOS中隨處都可以看到絢麗的動畫效果补履,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌剿另。在這里你可以看...
    F麥子閱讀 5,101評論 5 13
  • 齊齊哈爾一名女副校長因為在課間休息時,要求孩子保持安靜谚攒,以免影響他人阳准,但學生不為所動,依然我行我素五鲫,甚至該學生更老...
    育見閱讀 616評論 6 5
  • 你試過給自己發(fā)微信嗎溺职?跟自己喜歡又不敢表白的人?喜怒哀樂眼淚發(fā)飆都隨你位喂,你想做什么角色都行浪耘。 這就算日記一篇吧。心...
    過去時閱讀 141評論 0 0
  • 人生不過一場旅行塑崖, 你路過我七冲,我路過你, 一個人要清楚地知道自己的角色和位置规婆, 就像知道自己的面孔一樣澜躺。 知道自己...
    米密兒梔風閱讀 210評論 1 0