1. 程式人生 > >我的C語言學習歷程:圖形篇

我的C語言學習歷程:圖形篇

開始向程式的圖形介面化進軍!

在編寫檔案管理器的過程中,偶爾做些別的,因為程式碼寫多了,會感到枯燥無味,沒有動力,想做其它事情,於是,我就去研究mgaview的原始碼,因為它能顯示圖形,想知道它的原理,這個是研究後成果:http://blog.csdn.net/liuchao35758600/article/details/6789910,在此不做過多說明。

研究mgaview的原始碼的收穫還是很大的,瞭解了linux下顯示圖形的方法,mgaview是通過往framebuffer(幀緩衝)寫資料而實現圖形顯示的,具體內容不多說,可以參考那文章。

研究後,我就嘗試了一下,將螢幕填充白色,之後,在自定的位置顯示一個紅色矩形,結果成功了,我又改了一下程式碼,讓這個紅色矩形在白色背景中移動;

在這之後,我將紅色矩形改成了小鳥,小鳥的圖片陣列是用mgaview中的圖片解碼功能解碼出來的,第一次測試,小鳥的圖片變形了,後來發現其實是圖片尺寸有問題,不是實際尺寸,糾正後能正常顯示,我增加了1只小鳥,又把白色背景改成一半黑一半白的:


圖片可以在程式裡內建,只需要轉換成圖片陣列即可。

你可以將螢幕看成一個座標系,左上角是原點(0,0),由於這些圖形資料是線性儲存的,將二維座標轉換成一維的線性座標的公式為:

陣列中的位置 = y軸座標 * 螢幕寬度 + x軸座標

例如:螢幕上有個點的座標為(320, 240),而螢幕尺寸是寬為1280畫素,高為800畫素,那麼,這個點在陣列中的位置是:240 * 1280 + 320 = 307520;

螢幕每個畫素點表示的顏色都儲存在一個數組中,每隔3個元素表示一個畫素點的顏色,因為分別是表示RedGreenBlue這三色的深度的,但一般是每隔4個元素,貌似多出來的是alpha通道,也就是透明度,因此,需要乘以4,才能得到真正的位置:(240 * 1280 + 320)*4 = 1 230 080;

假設指向framebuffer記憶體地址的指標是p_fb,那麼,p_fb[1230080]是這個畫素點的Red顏色深度,p_fb[1230081]是Green顏色深度,p_fb[1230082]是Blue顏色深度。

我的學習機裡的畫素點的顏色排列順序是BGR,不是RGB,要顯示正確的顏色,就要改變一下RGB的寫入順序,否則,顯示出來的顏色不對。

掌握了這個知識,我用了彩色背景、一個人的影象素材,這個影象素材是我用手機擷取的,運行遊戲,之後截圖,把動畫分解成多個圖片,之後用PS將人物動作圖形摳出來,儲存為png,將這些圖片轉換成陣列,每張圖一共四個陣列,分別儲存R、G、B、A通道,關於用alpha通道混合圖形的方法,我發了個帖子:http://topic.csdn.net/u/20110623/14/ac5fbbff-a3f9-469f-a362-ecde8aa32a3f.html

用了回帖者告訴我的公式,成功的實現了用alpha通道混合圖形,最終,做了個測試程式:

可用按鍵控制這個人行走,按J鍵使用攻擊動作。

人物的圖形素材,來自這個遊戲:


我將我從mgaview原始碼中獲得的知識,應用到了檔案管理器,使之實現了半圖形化介面,主介面是第一個實現圖形化的:


第一張圖是初始的樣子,過了不久,我又改了一下,介面下面一排顯示記憶體資訊,並且會動態更新資料,這些文字是用ps做的,數字0-9,小數點、MB、GB、KB分別儲存至png圖片中,包含alpha通道,其餘直接寫個完整的文字儲存至png圖片。文字的顯示,我通過判斷字串的內容,來生成對應的圖形,之後,貼上至指定的位置,例如:59.16

MB,遍歷這個字串,計算所需矩形背景的長度和寬度,之後判斷,第一個是5,那麼,用5的點陣圖,貼到矩形背景中,第二個是9,那麼,用9的的點陣圖,貼到矩形背景中,就這樣,以此類推,最終,矩形背景中就貼上了該字串對應的點陣圖。

容量條的顯示,我準備了三張圖片,紅色、藍色的滿格容量條的圖片,一張容量條的空槽的圖片,根據百分比的值,將適合長度的滿格容量條貼到空槽的圖片中,超過一定值時,就用紅色的容量條的圖片,這個方法是那個時候想到的,當然,現在如果再來做的話,就用這種方法:準備1個畫素點寬度的紅藍容量條,空槽可以用演算法畫,之後,根據百分比的值,畫長度為 (總長度x百分比) 的容量條至空槽中。

在這之後,其它的功能也實現了圖形化:



按鈕是模擬實現的,雖然按下時有凹陷的效果,但都是用圖片貼出來的;“視窗”中的內容,大部分是用PS預先編輯好的,剩下的由程式處理顯示。

以上講的是檔案管理器的主要功能,其它細節功能就沒有做過多的說明。

圖形處理,使用的演算法是個人經過思考和多次測試完善得出來的,比如:圖形的擷取,圖形的合成,這些“演算法”都很簡單,不知道稱之為“演算法”是否合適。


小結

研究了mgaview程式的原始碼,初步掌握瞭如何利用圖形庫提供的函式實現相應格式的圖片檔案的解碼,bmp圖片可以直接讀,不需要其它圖形庫的支援。

初步掌握了圖形資料的處理,實現了簡單的圖形合成,圖形裁剪。