ios拼圖遊戲(一)之分割圖片

fail佬發表於2016-04-30

最近在學習ios開發,在學習了一些基本知識後,想動手開發一個拼圖遊戲,而要實現拼圖效果,首先需要分割圖片,以下為分割圖片的程式碼

//裁剪圖片的函式
-(UIImage*)cutImageAtSquare:(UIImage*)image Frame:(CGRect)frame{
    
    UIImage* piePic=nil;
    
    if(self){
        
        //獲取在_image圖片的frame區域內的圖片
        CGImageRef imageRef=CGImageCreateWithImageInRect(image.CGImage, frame);
        //建立一個基於點陣圖frame的大小的上下文
        UIGraphicsBeginImageContext(frame.size);
        CGContextRef context=UIGraphicsGetCurrentContext();
        //繪製擷取的圖片
        CGContextDrawImage(context, frame, imageRef);
        piePic=[UIImage imageWithCGImage:imageRef];
        UIGraphicsEndImageContext();
        
    }
    return piePic;
}

該函式是擷取image圖片frame區域內的圖片,擷取形狀為矩形,CGImageRef是畫素影象,能實現很多對圖片的操作,比如縮放,擷取等。

在網上查詢的繪圖操作都需要建立一個上下文,這個上下文究竟是做啥的,下面做了一個實驗

//裁剪圖片的函式
-(UIImage*)cutImageAtSquare:(UIImage*)image Frame:(CGRect)frame{
    
    UIImage* piePic=nil;
    
    if(self){
        
        //獲取在_image圖片的frame區域內的圖片
        CGImageRef imageRef=CGImageCreateWithImageInRect(image.CGImage, frame);
        piePic=[UIImage imageWithCGImage:imageRef];
        
    }
    return piePic;
}

將上下文的操作去掉,直接進行圖片的擷取和建立操作,執行程式後並沒有明顯不同,經過分析後,可能進入了一個誤區,截一張圖並不需要讓其重新建立一個上下文(這個上下文其實是一張畫布),或者說在獲取或建立圖片的時候imageRef和piePic已經建立了一個新的畫布並進行了相應的繪圖操作,所以第一部分的程式碼進行了兩次(或三次?)建立畫布的操作,也就是有一部分程式碼進行了無用功。以下為重新校正的程式碼:

//裁剪圖片的函式
-(UIImage*)cutImageAtSquare:<span style="font-family: Arial, Helvetica, sans-serif;">(UIImage*)image Frame:(</span><span style="font-family: Arial, Helvetica, sans-serif;">CGRect)frame{</span>
    
    UIImage* piePic=nil;
    
    if(self){
        //方法一
//        //獲取在_image圖片的frame區域內的圖片
//        CGImageRef imageRef=CGImageCreateWithImageInRect(image.CGImage, frame);
//        piePic=[UIImage imageWithCGImage:imageRef];
//<span style="white-space:pre">	</span>方法二
        //獲取擷取區域大小
        CGSize sz=frame.size;
        //獲取擷取區域座標
        CGPoint origin=frame.origin;
        //建立sz大小的上下文,背景是否透明:NO,縮放尺寸:0表示不縮放
        UIGraphicsBeginImageContextWithOptions(sz, NO, 0);
        //移動座標原點繪製圖片,由於上下文座標系與圖片自身座標系是相反的,所以繪製座標需要取反
        [image drawAtPoint:CGPointMake(-origin.x, -origin.y)];
        //獲取繪製後的圖片
        piePic=UIGraphicsGetImageFromCurrentImageContext();
        //繪製結束
        UIGraphicsEndImageContext();
        
    }
    return piePic;
}

雖然方法一程式碼量小,且簡單,但並不能實現複雜的截圖,所以建議使用方法二。

總結完畢,如有錯誤請指正,謝謝


相關文章