2012年9月1日 星期六

[oF] Workshop 讀取圖片練習

以下內容使用範例可至of_v0071_win_cb_release\examples\graphics\imageLoaderExample查看



Graphic範例練習

依照滑鼠大小改變圖片尺寸

l   撰寫OF程式碼
1.      開啟empty資料夾(of_v0071_win_cb_release\examples\empty)
2.      app資料夾下新增一個資料夾,名稱自訂(of_v0071_win_cb_release\apps)
3.      複製emptyExample資料夾到新增的資料夾中
4.      開啟資料夾中的emptyExample.cbp
5.      執行且編譯(F9)

l   從原始範例複製需要的圖片(of_v0071_win_cb_release\examples\graphics\imageLoaderExample\bin\data)
emptyExampledata資料夾底下(emptyExample\bin\data)
若檔案沒有編譯過,不會產生bindata資料夾

l   開啟testApp.h
1.      定義一個變數,型態為ofImage,名稱為bikers

l   開啟testApp.cpp,在setup中寫入初始設定
1.      設定背景色為白色
ofBackground(255,255,255);
2.      bikers中讀取一張圖片
bikers.loadImage("images/bikers.jpg");

3.      若圖片名稱錯誤會出現


4.      讀取後要顯示圖片,在draw中打入
bikers.draw(0,0,mouseX,mouseY);

5.      若要更改色調,使用ofSetColor(R,G,B)
ofSetColor(255,0,0);



讀取圖片練習二
1.      testApp.h定義ofImage變數,名稱為gear
ofImage gear;


2.      讀取圖片,在setup中寫入
gear.loadImage("images/gears.gif");

3.      顯示圖片,在draw中寫入程式,並把先前的滑鼠控制註解掉
bikers.draw(0,0,bikers.getWidth()/2,bikers.getHeight()/2);
//擺放圖片在0,0的位置,長寬為自己的一半
gear.resize(bikers.getWidth()/2,bikers.getHeight()/2);
 //gear的尺寸縮放跟biker一樣
gear.draw(bikers.getWidth()/2,0);
 //擺放圖片在bike旁,y0             

4.      若要使圖片有透明度,讀取的圖片需為具透明屬性的圖片,ex.png


讀取有透明度圖片

1.      testApp.h中定義ofImage型態的變數transparency
ofImage transparency;


2.      testApp.cpp中的setup將含有透明圖層的圖片讀取至transparency
transparency.loadImage("images/transparency.png");


3.      draw中,顯示transparency,因含透明度,需使用ofEnableAlphaBlending()ofDisableAlpahBlending()
ofEnableAlphaBlending(); //開啟透明圖層效果
float wave = sin(ofGetElapsedTimef()); //定義一個變數wave,使用sin函數,ofGetElapsedTimef取得程式執行經過時間(浮點數)
transparency.draw(mouseX+(wave*100),mouseY);//transparaency這圖將會跟著滑鼠座標,且做左右幅度為100的來回震盪
  ofDisableAlphaBlending(); //關閉透明圖層效果