簡筆畫項目總結: ios繪圖機制 & 實現記錄筆跡功能

    簡筆畫的項目是從暑期8月份開始的,差不多9月多的時候已經有出版,修修改改拖到現在才算能結項目. 現在來總結有點晚了,一些體會早忘記了,但我還是盡力回憶一些自己認為有用的東西記錄一下。 

1、故事板。我在上個項目項目總結：華南師范大學校園開發教育android客戶端總結 中談到了故事板，就是項目的設計圖。因為這次的項目系統較為復雜，邏輯連貫性不強，這就考驗設計故事板的人的寫故事板的能力。其實故事板就是你要完全理解整個應用依賴的東西，所以故事板寫得清晰合理的話，項目也會進行得較為順利。這次的故事板有很多細節沒有交代清楚，好多東西都需要后來的討論才最終確定下來，這雖說是無可避免的但是能減少就減少吧。

2、ios繪圖機制：因為簡筆畫項目主要就是一個繪圖軟件，所以總結一些ios的繪圖是必須的。   

https://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW1

可參考上面的官方文檔。

ios提供了2種繪圖方案：

1，采用iOS的核心圖形庫：Quartz, Core Animation, and UIKit

2，采用OpenGL ES。

這次項目是用第一種，OpenGL更多的是應用於游戲場景中。

Quartz類庫是畫畫的主要類庫，提供了基於路徑畫圖、反鋸齒渲染、漸變填充、圖像、色彩、坐標空間轉換和PDF文檔的一些操作。

UIKit提供划線、Quartz images和顏色操作的objective-C 封裝。

Core Animation：提供了UIKit的的底層支持，也可以用來實現自定義動畫。

 

The UIKit Graphics System

1、畫圖主要在drawRect:中進行，但你不能主動去調用它，它只能被系統本身調用，我們只能通過setNeedsDisplay or setNeedsDisplayInRect: 通知系統更新繪圖，系統之后會自行去調用drawRect。

2、Graphics Contexts：Conceptually, a graphics context is an object that describes where and how drawing should occur, including basic drawing attributes such as the colors to use when drawing, the clipping area, line width and style information, font information, compositing options, and so on。從定義可以看出，Graphics Contexts可以理解成一個畫板，畫板上可以定義一些基本的畫圖元素。每個UIVIew都會創建。

3、坐標。

上圖是用戶坐標、視圖坐標、硬件坐標的關系。但我們更關心的是ios接口給我們的坐標系統：2種坐標系統

upper-left-origin coordinate system (ULO)  and  lower-left-origin coordinate system (LLO)

關於坐標變換的可以參考iphone：坐標變換 。

4、畫圖。

說了這么多，究竟在ios上如何實現畫圖呢？

 

-(void)drawRect:(CGRect)rect{
         CGContextRef ref=UIGraphicsGetCurrentContext();//拿到當前被准備好的畫板。在這個畫板上畫就是在當前視圖上畫
         CGContextBeginPath(ref);//這里提到一個很重要的概念叫路徑（path），其實就是告訴畫板環境，我們要開始畫了，你記下。
         CGContextMoveToPoint(ref, 0, 0);//畫線需要我解釋嗎？不用了吧？就是兩點確定一條直線了。
         CGContextAddLineToPoint(ref, 300,300);
         CGFloat redColor[4]={1.0,0,0,1.0};
         CGContextSetStrokeColor(ref, redColor);//設置了一下當前那個畫筆的顏色。
         CGContextStrokePath(ref);//告訴畫板，對我移動的路徑用畫筆畫一下。
}

 

什么簡單的畫了一條線，其實畫畫的過程都差不多，有幾個步驟：

1，拿到當前面板  UIGraphicsGetCurrentContext

2，開始畫聲明

3，畫

4，提交畫

主要在對Graphics Contexts做的那些修改上面：

 

具體內容自行查文檔，這里不贅述。

5、View截圖

-(UIImage *)getImage
{
    UIGraphicsBeginImageContext(self.bounds.size);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *Img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return Img;
}

 

 記錄筆跡：

具體看我的另一篇blog：iphone:實現像DrawSomething類似的自動畫圖的動畫效果

 

 

 

more ：http://iosdeveloper.diandian.com/post/2011-12-29/16946271