iOS繪圖基礎(chǔ)(圖像相關(guān))

前篇地址:iOS繪圖基礎(chǔ)(圖形文字曲線相關(guān))

這篇主要是記錄記錄iOS繪圖與圖像有關(guān)的一些處理。包括繪制圖片,裁剪圖片,給圖片增加水印等常用功能。

繪制圖片

作為圖片來說,也有兩套方式去繪制圖片。UIKit的方式、CoreGraphics的API方式。

第一種:(非常快速)

- (void)drawRect:(CGRect)rect {
    /*  繪制圖片    */
    UIImage *image = [UIImage imageNamed:@"Vokie"];
    [image drawInRect:CGRectMake(10, 10, 100, 100)];
}

第二種:(稍顯復(fù)雜)

- (void)drawRect:(CGRect)rect {
    /*  繪制圖片    */
    CGRect imageRect = CGRectMake(10, -10, 100, 100);
    
    //獲取上線文context
    CGContextRef context = UIGraphicsGetCurrentContext();

    /*圖片繪制時(shí)的上下顛倒問題,具體原因不明,可能與底層的繪制API及其鏡像相關(guān),待深入研究。
      所以做了下面的一次翻轉(zhuǎn),一次平移的操作來修正*/
    //翻轉(zhuǎn)context
    CGContextScaleCTM(context, 1, -1);
    //平移context
    CGContextTranslateCTM(context, 0, -imageRect.size.height);
    
    UIImage *cgImage = [UIImage imageNamed:@"Vokie"];
    //繪圖
    CGContextDrawImage(context, imageRect, cgImage.CGImage);
}

對第二種方法,稍開腦洞。既然可以對context進(jìn)行操作平移,縮放操作,也就可以旋轉(zhuǎn)咯?

動手試試:

在上面代碼的基礎(chǔ)上增加CGContextRotateCTM(context, M_PI_2 / 3.0);

完全可以,效果如圖:

rotate.png

裁剪圓角圖片(原先圖片)

- (void)drawRect:(CGRect)rect {
    /*  裁剪圖片    */
    
    //imageSize的設(shè)置,決定圖片裁剪后的導(dǎo)出大小
    CGSize imageSize = CGSizeMake(100, 100);
    
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, UIScreen.mainScreen.scale);
    
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
    [circlePath addClip];
    
    UIImage *clipImage = [UIImage imageNamed:@"Vokie"];
    [clipImage drawInRect:CGRectMake(0, 0, 100, 100)];
    
    /*  繪制水印    */
    NSString *waterMark = @"@vokie";
    [waterMark drawAtPoint:CGPointMake(25, 20) withAttributes:@{
        NSFontAttributeName:[UIFont systemFontOfSize:13],
        NSForegroundColorAttributeName:[UIColor whiteColor]
                                                                }];
    
    //此時(shí)導(dǎo)出的圖片的大小是受imageSize的影響。
    UIImage *clipedImage = UIGraphicsGetImageFromCurrentImageContext();
    //將裁剪后的圖片圓形圖片返回出去給外部調(diào)用
    //return clipedImage;
    
    UIGraphicsEndImageContext();
    
    //將裁剪后的圖片放大并展示到context畫布上。
    [clipedImage drawInRect:CGRectMake(30, 10, 140, 140)];
}

需要注意的是,必須要先調(diào)用addClip方法,然后在draw圖片。先后順序不能顛倒??梢允謩痈母倪@些代碼,實(shí)踐出真知。運(yùn)行效果如下:

wm.png

基于上面的圓形裁剪的代碼,也就可以一定程度上寫出類似于上傳圖片前的矩形裁剪的代碼?;驹硎且恢碌?。

綜合理解下:

熟練掌握了iOS繪制的相關(guān)內(nèi)容(圖形文字圖像等的繪制、context的平移縮放旋轉(zhuǎn),圖像尺寸縮放裁剪等),便可以解決實(shí)際開發(fā)中遇到的各種問題。因?yàn)樵陂_發(fā)中,經(jīng)常會和圖片打交道。當(dāng)然更重要的是了解其背后的底層知識。這兩篇也就是學(xué)習(xí)筆記加上入門會寫。還要繼續(xù)在這個(gè)文章分類下添加更多的深入篇。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容