[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)

到emptyExample的data資料夾底下(emptyExample\bin\data)

若檔案沒有編譯過，不會產生bin與data資料夾

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旁，y為0             

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(); //關閉透明圖層效果