??? 寫在前面：本章我們將介紹一個(gè)非常好用的跨平臺(tái)的 C++ 開源框架 —— openFrameworks。它是一個(gè)開源的跨平臺(tái)的 C++工具包，方便開發(fā)者創(chuàng)建出一個(gè)更簡(jiǎn)單和直觀的框架，擅長(zhǎng)開發(fā)圖像和動(dòng)畫。
???本篇博客全站熱榜排名：8
?? 本章目錄：
0x00 openFrameworks 介紹
0x01 開啟 oF 之旅
0x02 oF 文件結(jié)構(gòu)
0x03 圖形基礎(chǔ)
0x04 使用 projectGenerator 創(chuàng)建項(xiàng)目
0x00 openFrameworks 介紹
openFrameworks（簡(jiǎn)稱 oF）是一個(gè)基于C++的開源庫(kù)。
它提供了豐富的功能庫(kù)和工具，用于快速開發(fā)多媒體、交互性和藝術(shù)創(chuàng)作相關(guān)的應(yīng)用程序，如藝術(shù)裝置、互動(dòng)藝術(shù)、音視頻作品、實(shí)時(shí)圖形等。oF 的設(shè)計(jì)目標(biāo)是讓創(chuàng)意編程變得更加簡(jiǎn)單、直觀和靈活，使藝術(shù)家、設(shè)計(jì)師、創(chuàng)意工作者等能夠利用編程進(jìn)行創(chuàng)作和表達(dá)。oF提供了豐富的圖形、音頻、輸入輸出、計(jì)算機(jī)視覺等功能庫(kù)，并支持跨平臺(tái)開發(fā)，適用于Windows、Mac OSX、Linux等操作系統(tǒng)。oF的社區(qū)活躍，有大量的用戶和開發(fā)者共享和貢獻(xiàn)了各種擴(kuò)展、插件和示例代碼。
oF被設(shè)計(jì)成通用的“膠水”，包括以下常用庫(kù)：
- 圖形：OpenGL、GLEW、GLUT 等
- 音頻輸入輸出和分析：rtAudio、PortAudio、OpenAL 等
- 圖像加載和保存：FreeImage
- 計(jì)算機(jī)視覺：OpenCV
- 3D模型加載：Assimp
此外，oF還支持跨平臺(tái)。目前支持Windows、Mac OSX、Linux等IDE
- Visual Studio、Xcode、Eclipse、Code::Blocks
?? 官網(wǎng)：openFrameworks
0x01 開啟 oF 之旅
首先，創(chuàng)建基于 oF 的項(xiàng)目需要一個(gè)集成開發(fā)環(huán)境 (IDE) ，比如 Visual Studio (適用于Windows)，Xcode（適用于 Mac OSX），大多數(shù) IDE 都具有類似的用戶界面。
Xcode 是蘋果公司開發(fā)的集成開發(fā)環(huán)境 (IDE) ：
Visual Studio是由微軟公司開發(fā)的集成開發(fā)環(huán)境 (IDE) ：
在 Visual Studio 中的構(gòu)建：
項(xiàng)目視圖區(qū)域：提供一種一致的方式來查看構(gòu)成項(xiàng)目的各個(gè)元素。
提供以下三種視圖形式：
- 類視圖（Class view）：允許在C++類級(jí)別上查看和操作源代碼。
- 資源視圖（Resource view）：允許查找和編輯應(yīng)用程序中使用的各種資源，如對(duì)話框、圖標(biāo)、菜單等。
- 文件視圖（File view）：允許查找并瀏覽創(chuàng)建應(yīng)用程序所需的所有文件。
0x02 oF 文件結(jié)構(gòu)
從 openFrameworks (oF) 的官網(wǎng) (download | openFrameworks) 下載并解壓縮提供的框架文件，框架文件夾被稱為 oF root 文件夾，oF root 文件夾包含以下多個(gè)文件夾：
Apps，Examples，libs ，other，projectGenerator，Addons
?運(yùn)行示例：oF 根目錄下的 examples 文件夾包含了許多不同的示例項(xiàng)目，先嘗試運(yùn)行示例項(xiàng)目。
- 對(duì)于使用 Xcode 的用戶，可以點(diǎn)擊以 .xcodeproj 擴(kuò)展名結(jié)尾的文件來運(yùn)行項(xiàng)目。
- 對(duì)于使用 Visual Studio (VS) 的用戶，可以點(diǎn)擊以 .sln 擴(kuò)展名結(jié)尾的文件來運(yùn)行項(xiàng)目。
0x03 圖形基礎(chǔ)
畫筆：為了創(chuàng)建各種形狀的畫筆，首先需要定義圖形的基本構(gòu)建塊 (BBB)。 2D 圖形函數(shù)可以分為兩種類別。 基本形狀 (Basic Shapes): 如線條、矩形、三角形等。 自由形狀 (Freeform Shapes): 如多邊形、路徑等。
在繪制任何形狀之前，需要理解在 oF 中如何確定對(duì)象的位置以及如何解釋位置。計(jì)算機(jī)圖形學(xué)通常使用笛卡爾坐標(biāo)系，但在 oF 中使用了具有以下兩個(gè)不同之處的坐標(biāo)系：
- 原點(diǎn) (Origin) 位于左上角
- ?軸的方向被翻轉(zhuǎn)
創(chuàng)建一個(gè)新項(xiàng)目：
創(chuàng)建完新項(xiàng)目后，打開源文件中的 ofAPP.cpp 的 draw() 函數(shù)，試試下面的代碼：
ofBackground(0); // 用黑色清空屏幕，0 表示完全白色的灰度顏色。
ofSetColor(255); // 將繪制顏色設(shè)置為白色。
// 在下面繪制一些圖形。
ofDrawRectangle(50, 50, 100, 100); // 左上角坐標(biāo)為 (50, 50)，寬度為 100，高度為 100。
ofDrawCircle(250, 100, 50); // 中心坐標(biāo)為 (250, 100)，半徑為 50。
ofDrawEllipse(400, 100, 80, 100); // 中心坐標(biāo)為 (400, 100)，寬度為 80，高度為 100。
ofDrawTriangle(500, 150, 550, 50, 600, 150); // 三個(gè)頂點(diǎn)坐標(biāo)分別為 (500, 150), (550, 50), (600, 150)。
ofDrawLine(700, 50, 700, 150); // 從 (700, 50) 到 (700, 150) 的直線。?? 運(yùn)行結(jié)果如下：
下面再試試 ofFill() 和 ofNoFill() 函數(shù)：
- ofFill() 函數(shù)用于設(shè)置形狀的填充顏色，使繪制的形狀被填充。
- ofNoFill() 函數(shù)用于設(shè)置形狀的無填充狀態(tài)，只繪制輪廓線，不填充顏色。
ofBackground(0);
ofSetColor(255);
ofFill();
ofDrawRectangle(50, 50, 100, 100);
ofDrawCircle(250, 100, 50);
ofDrawEllipse(400, 100, 80, 100);
ofDrawTriangle(500, 150, 550, 50, 600, 150);
ofDrawLine(700, 50, 700, 150);
ofNoFill();
ofDrawRectangle(50, 200, 100, 100);
ofDrawCircle(250, 250, 50);
ofDrawEllipse(400, 250, 80, 100);
ofDrawTriangle(500, 300, 550, 200, 600, 300);
ofDrawLine(700, 200, 700, 300);??? 運(yùn)行結(jié)果如下：
使用基本形狀來創(chuàng)建一個(gè)小項(xiàng)目，具有以下目標(biāo)。
- 目標(biāo)：通過按下鼠標(biāo)左鍵并移動(dòng)，用畫筆創(chuàng)建一個(gè)隨機(jī)散布的 "爆炸狀" 效果。
// 如果左鼠標(biāo)按鈕被按下...
if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) {
ofSetColor(255);
ofSetRectMode(OF_RECTMODE_CENTER);
ofDrawRectangle(
ofGetMouseX(),
ofGetMouseY(),
50,
50
);
// 在鼠標(biāo)位置繪制一個(gè)寬高為50的矩形，居中對(duì)齊
}
單矩形畫刷：使用鼠標(biāo)（2）?
// 我們?nèi)匀幌Ｍ诤谏尘吧线M(jìn)行繪制，因此在進(jìn)行畫刷操作之前需要先繪制背景
ofSetBackgroundAuto(false);
ofBackground(0); // 設(shè)置背景顏色為黑色
修改 draw() 函數(shù)，隨機(jī)指定出現(xiàn)的矩形的顏色：
if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) { // 如果左鼠標(biāo)按鈕被按下...
float randomColor = ofRandom(50, 255); // 隨機(jī)生成顏色值，范圍從50到255
ofSetColor(randomColor); // 設(shè)置矩形的顏色為隨機(jī)生成的顏色值，排除黑色背景上不可見的灰度值（0 - 50）
ofSetRectMode(OF_RECTMODE_CENTER);
ofDrawRectangle(ofGetMouseX(), ofGetMouseY(), 50, 50); // 在鼠標(biāo)位置繪制一個(gè)寬高為50的矩形，居中對(duì)齊
}
ofRandom()?用于生成指定范圍內(nèi)的隨機(jī)數(shù)。它接受兩個(gè)參數(shù)，表示生成隨機(jī)數(shù)的范圍，可以是整數(shù)或浮點(diǎn)數(shù)。例如，ofRandom(0, 255) 會(huì)生成一個(gè)0到255之間的隨機(jī)整數(shù)。
ofSetColor()?接受一個(gè)或多個(gè)參數(shù)，用于指定顏色的RGBA值（紅、綠、藍(lán)和透明度）。常見的用法是傳入三個(gè)整數(shù)參數(shù)來設(shè)置RGB顏色值，例如 ofSetColor(255, 0, 0) 表示設(shè)置顏色為紅色。
這兩個(gè)函數(shù)通常在繪圖時(shí)一起使用，例如在繪制圖形之前先生成隨機(jī)顏色，然后使用 ofSetColor() 設(shè)置繪制的圖形顏色，從而實(shí)現(xiàn)隨機(jī)顏色的效果。
if (ofGetMousePressed(OF_MOUSE_BUTTON_LEFT)) { // If the left mouse button is pressed...
ofSetRectMode(OF_RECTMODE_CENTER);
int numRects = 10;
for (int r=0; r<numRects; r++) {
ofSetColor(ofRandom(50, 255));
float width = ofRandom(5, 20);
float height = ofRandom(5, 20);
float xOffset = ofRandom(-40, 40);
float yOffset = ofRandom(-40, 40);
ofDrawRectangle(ofGetMouseX()+xOffset, ofGetMouseY()+yOffset, width, height);
}
}
發(fā)光圓形筆刷：使用顏色
了解如何更改顏色：
ofColor myOrange(255, 132, 0); // Defining an opaque orange color - specified using RGB
ofColor myBlue(0, 0, 255, 50); // Defining a transparent blue color - specified using RGBA
// We can access the red, green, blue and alpha channels like this:
ofColor myGreen(0, 0, 255, 255);
cout << "Red channel:" << myGreen.r << endl;
cout << "Green channel:" << myGreen.g << endl;
cout << "Blue channel:" << myGreen.b << endl;
cout << "Alpha channel:" << myGreen.a << endl;
// We can also set the red, green, blue and alpha channels like this:
ofColor myYellow;
myYellow.r = 255; myYellow.b = 0; myYellow.g = 255; myYellow.a = 255;
// We can also make use of some predefined colors provided by openFrameworks:
ofColor myAqua = ofColor::aqua;
ofColor myPurple = ofColor::plum;?? 運(yùn)行結(jié)果如下：
Fleeing 三角形筆刷：Vector
ofVec2f mousePos(ofGetMouseX(), ofGetMouseY());
// Define a triangle at the origin (0,0) that points to the right
ofVec2f p1(0, 25.0);
ofVec2f p2(100, 0);
ofVec2f p3(0, -25.0);
// Shift the triangle to the mouse position
p1 += mousePos;
p2 += mousePos;
p3 += mousePos;Fleeing 三角形筆刷：Vectors 和旋轉(zhuǎn)
0x04 使用 projectGenerator 創(chuàng)建項(xiàng)目
在?of_v0.11.2_vs2017_release\projectGenerator 路徑下，雙擊：
?
然后定義 Project name 項(xiàng)目名稱，路徑可以不做修改，如果需要，可以在 Addons 中可以添加插件。最后點(diǎn)擊 Generate 按鈕，即可生成。
此時(shí)點(diǎn)擊 Open in IDE 即可，IDE 就會(huì)彈出：
?? [ 筆者 ]? ?王亦優(yōu) ,AKAM
?? [ 更新 ]? ?2023.4.28
? [ 勘誤 ]?? /* 暫無 */
?? [ 聲明 ]? ?由于作者水平有限，本文有錯(cuò)誤和不準(zhǔn)確之處在所難免，
本人也很想知道這些錯(cuò)誤，懇望讀者批評(píng)指正！| ?? 參考資料? C++reference[EB/OL]. []. http://www.cplusplus.com/reference/. Microsoft. MSDN(Microsoft Developer Network)[EB/OL]. []. .文章來源：http://www.zghlxwxcb.cn/news/detail-431672.html 百度百科[EB/OL]. []. https://baike.baidu.com/.文章來源地址http://www.zghlxwxcb.cn/news/detail-431672.html |
到了這里，關(guān)于【openFrameworks】跨平臺(tái)的 C++ 開源框架 | oF 文件結(jié)構(gòu) | 圖形基礎(chǔ)介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
