【移動應(yīng)用開發(fā)技術(shù)】在iOS中使用OpenGL ES實現(xiàn)繪畫板的方法

【移動應(yīng)用開發(fā)技術(shù)】在iOS中使用OpenGLES實現(xiàn)繪畫板的方法

今天我們使用OpenGLES來實現(xiàn)一個繪畫板，主要介紹在OpenGLES中繪制平滑曲線的實現(xiàn)方案。首先看一下最終效果：在iOS中，有很多種方式可以實現(xiàn)一個繪畫板，比如我的另外一個項目MFPaintView就是基于CoreGraphics實現(xiàn)的。然而，使用OpenGLES來實現(xiàn)可以獲得更多的靈活性，比如我們可以自定義筆觸的形狀，這是其他實現(xiàn)方式做不到的。我們知道，OpenGLES中只有點、直線、三角形這三種圖元。因此，怎么在OpenGLES中繪制曲線，是我們第一個要解決的問題，也是最復雜的問題。我們會使用比較大的篇幅來講解這個問題。至于繪畫板的其他功能實現(xiàn)，并不是說不重要，只是說其他的繪畫板實現(xiàn)方式，也會有類似的邏輯，所以這部分會放在最后再簡單介紹一下。一、怎么繪制曲線在OpenGLES中繪制曲線的方式，就是將曲線拆分成點序列來繪制。因為要繪制點，所以我們采取的是點圖元。即我們要把頂點數(shù)據(jù)當成點來繪制，并且每個點都要繪制出筆觸的紋理。關(guān)鍵步驟如下：指定圖元類型：頂點著色器：片段著色器：這里的關(guān)鍵點在于gl_PointCoord這個內(nèi)置變量，當我們使用點圖元的時候，可以通過這個變量獲取到當前像素在點圖元中的歸一化坐標。但是這個坐標的原點是在左上角，這和紋理坐標在豎直方向上是相反的。所以從紋理讀取顏色的時候，要做一個y坐標的轉(zhuǎn)換。接下來，我們通過UITouch來獲取觸摸點的位置，然后算出歸一化的頂點坐標。但是由于iOS系統(tǒng)觸摸事件的派發(fā)頻率有限，我們最終得到的只能是稀疏的點。如下圖所示，每個觸摸點之間的間隔會比較大。二、怎么繪制密集的點很容易想到，只需要在兩個點之間，按照一定的密度進行插值，就可以繪制出連續(xù)的軌跡。但是很明顯，我們的繪制結(jié)果是折線，并不平滑。三、怎么使曲線變平滑解決點連接不平滑的問題，一般是使用貝塞爾曲線。這種方案在MFPaintView中也得到了很好的應(yīng)用。具體的做法是使用兩個頂點間的中點和一個頂點，來構(gòu)造一條貝塞爾曲線。如下圖，圖中的3個紅點被用來構(gòu)造一條貝塞爾曲線。于是，我們的問題就變成了怎么在OpenGLES中繪制貝塞爾曲線。相當于已知貝塞爾曲線的3個關(guān)鍵點，反向來求曲線上的點序列。我們知道貝塞爾曲線的方程是P=(1-t)^2*P0+2*t*(1-t)*P1+t^2*P2，t是唯一的變量，其取值范圍是0~1。所以我們可以采取線性取值的方式，每一條貝塞爾曲線取n個點（n是個確定的常量）。只要依次往方程中代入1/n、2/n、...n/n，就可以得到一個點序列。先將n取一個比較小的值，這樣比較容易看出存在的問題。我們發(fā)現(xiàn)，點序列的間隔并不均勻。原因有兩個：四、怎么生成均勻的點序列貝塞爾曲線生成均勻的點序列，涉及到了一個經(jīng)典的「貝塞爾曲線勻速運動」問題。這個問題的推導和計算比較復雜。如果你有興趣，可以閱讀一下文末的兩篇文章。由于我還不能完全領(lǐng)悟，就不在這里誤導大家了。簡單來說，就是我們通過一系列的騷操作，封裝了一個方法，只需要傳入貝塞爾曲線的3個關(guān)鍵點和筆觸尺寸，就可以獲取均勻的點序列。下面我們固定貝塞爾曲線的起始點和控制點，只移動終止點，來驗證一下這個方法是否可靠?？梢钥吹剑谝苿舆^程中，點和點的距離基本是保持一致的，并且是均勻的。通過這個「神奇」的方法，我們終于畫出了平滑且均勻的曲線。五、繪畫板功能實現(xiàn)終于講完了最麻煩的部分，接下來簡單介紹一下繪畫板基本功能的實現(xiàn)。1、顏色混合在以往的例子中，我們在開始一次渲染之前，都會調(diào)用glClear(GL_COLOR_BUFFER_BIT)來清除畫布，因為我們不希望保留上次的渲染結(jié)果。但是對于一個繪畫板來說，我們要不斷地往畫布上畫東西，所以是希望保留上次結(jié)果的。因此，在繪制之前不能執(zhí)行清除的操作。另外，由于我們的畫筆可能是半透明的，所以新繪制的顏色需要和畫布上已經(jīng)存在的顏色進行混合。因此在繪制開始之前，需要開啟混合選項。2、筆觸調(diào)整筆觸有3個屬性可以調(diào)整：顏色、尺寸、形狀。它們本質(zhì)上都是對點圖元的調(diào)整，通過uniform變量的形式，將顏色、尺寸、紋理傳入著色器并應(yīng)用。3、橡皮擦GLPaintView在初始化的時候，需要傳入一個背景色參數(shù)，當用戶切換到橡皮擦功能的時候，內(nèi)部只是單純地將畫筆的顏色切換成背景色，于是就產(chǎn)生了橡皮擦的效果。4、撤銷重做撤銷重做功能需要依賴兩個棧來實現(xiàn)。我們把用戶的手指從按下屏幕到離開屏幕這一過程中產(chǎn)生的數(shù)據(jù)，定義為一個操作對象，這個操作對象保存了歸一化后的點序列，以及點的屬性