开源框架 openFrameworks

时间  2019-11-24
标签 开源 框架 openframeworks 繁體版
原文   原文链接
转自： http://www.javashuo.com/article/p-nbadqsna-hu.html
此处仅供学习，版权属原做者；

做为一个图形图像方向的研究生，我常常都在和 OpenGL 、OpenCV 等多种 C++ 库打交道。这些库遵循着不一样的规则和用法；另外，为了让本身的程序具备更多的交互能力，编写界面也是一个屡见不鲜的工做。css

然而，随着工程复杂性的增长，库的管理和界面的维护也变得愈来愈困难：一方面，库的增长和删除不只会增长学习成本，也会对系统的逻辑层带来影响。而另外一方面，若是要让本身的项目易于维护，就要尽量地应用设计模式，让逻辑和界面分离。但对于科研，一味陷入设计模式的桎梏又会带来过早优化的问题，影响科研进度。html

直到后来，我接触到了 openFrameworks ，简直有种相逢恨晚的感受。openFrameworks 封装了经常使用的 C++ 库，在此基础上提供了一个直观统一的接口，也大幅简化了编写界面的流程，使得开发图形程序变得很轻松。linux

本文将为你们介绍这个让人着迷的开发框架 —— openFrameworks。git

什么是 openFrameworks

openFrameworks（如下简称 oF） 是一个开源的、跨平台的 C++ 工具包，它的设计目的为开发创造过程提供一个更加简单和直观的框架。github

openFrameworks

oF 的强大之处在于，它不只是一个通用的胶水（glue），同时它还封装了多种经常使用的库，包括：json

这些库虽然遵循着不一样的规则和用法，但 oF 在它们基础上提供了一个通用的接口，使得使用它们变得很容易。设计模式

除此以外，oF 的另外一亮点在于它具备很好的跨平台特性。目前它支持 5 种操做系统（Windows、OSX、Linux、iOS、Android）以及 4 种 集成开发环境（XCode、Code::Blocks、Visual Studio、Eclipse）。bash

安装和配置 oF

下面介绍如何在 Linux 下安装和配置 oF 。服务器

下载 oF

访问 oF 的官方下载页面，找到适用于你的操做系统和 IDE 的版本，点击下载。例如，个人计算机是 Linux Arch 64位的系统，因此选择的是 code::blocks (64 bit)。网络

下载 openFrameworks

安装依赖

下载完成后，将其解压，开启终端，cd 到解压后目录，例如：

 

1
$  cd $HOME/Documents/programming/openFrameworks

 

以后，根据你的 Linux 发行版的不一样，cd 进入 scripts/linux/<操做系统发行版名称> ，例如：

 

1
$  cd scripts/linux/archlinux

 

执行两个命令，安装 code::block 和其余依赖（须要 root 权限）：

 

1
2
3
$  sudo ./install_codeblocks.sh
$  sudo ./install_dependencies.sh
$  sudo ./install_codecs.sh

 

编译 oF

安装完依赖后，回到上一级目录：

 

1
$  cd ..

 

编译 oF：

 

1
$ ./compileOF.sh

 

编译过程当中，若是你和我同样遇到找不到 freetype.h 的问题，多是 FreeType 在 2.5.1 以后改变了头文件的结构致使的。须要将根目录里的 /libs/openFrameworks/graphics/ 目录下的 ofTrueTypeFont.cpp 开头部分改成：

 

1
2
3
4
5
6
7
8
9
10
11
#include "ft2build.h"
/* Corrected setup of include files for freetype as of 2.5.1 dh
#include "freetype2/freetype/freetype.h"
#include "freetype2/freetype/ftglyph.h"
#include "freetype2/freetype/ftoutln.h"
#include "freetype2/freetype/fttrigon.h"
*/
#include FT_FREETYPE_H
#include FT_GLYPH_H
#include FT_OUTLINE_H
#include FT_TRIGONOMETRY_H

 

此时的 oF 已经能够工做了。咱们能够测试它提供的示例。cd 到根目录里的 /examples/gui/guiExample/ 目录，编译该工程并执行：

 

1
2
$ make
$ make run

 

将会运行一个界面以下图的程序。与左侧面板里的控件交互将能够改变该形状的属性1 1多阅读 example 的示例代码是个好习惯。。

guiExample 程序

编译项目生成器

为了方便往后建立工程，oF 还提供了一个项目生成器 projectGenerator 。使用它前一样须要先编译。回到 compileOF.sh 脚本所在的目录，敲入以下命令：

 

1
$ ./compilePG.sh

 

完成后，在 oF 的根目录下找到 projectGenerator 目录，进去里面能够找到 projectGenerator ，咱们能够执行它：

 

1
2
$  cd ../../projectGenerator
$ ./projectGenerator

 

程序界面以下图所示。点击左侧的每一个黑色按钮将能够修改项目名、生成路径，以及依赖的插件（Addon)。

projectGenerator

点击右下角的 GENERATE PROJECT 按钮后，将会在 Path 字段指定的路径中生成一个项目，如上图所示就是 /home/ehome/Documents/programming/openframeworks/apps/myApps/mySketch ：

 

1
2
3
$  cd /home/ehome/Documents/programming/openframeworks/apps/myApps
$ ls
addons.make bin config.make Makefile mySketch.cbp mySketch.workspace src

 

其中：

  • addons.make 文件 - 用于维护这个工程所依赖的插件列表；
  • config.make 文件 - 用于添加查找路径，修改优化标记以及其余的设置；
  • Makefile 文件 - 工程的 Makefile ，通常不须要直接修改它。在 oF 中，make 的目标包括：
    • Debug：生成带有调试标记的可执行程序；
    • Release：生成经编译器优化的可执行程序；
    • clean：清除目标文件和可执行程序；
    • CleanDebug：只清除 debug 目标的生成结果；
    • CleanRelease：只清除 release 目标的生成结果；
    • help：打印帮助信息；
    • run：执行生成的可执行程序。
  • mySketch.cbp 和 mySketch.workspace 文件 - Code::Blocks 的工程文件。

注册环境变量

咱们能够看看 Makefile 文件的内容：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ cat Makefile
# Attempt to load a config.make file.
# If none is found, project defaults in config.project.make will be used.
ifneq ($(wildcard config.make),)
include config.make
endif
 
# make sure the the OF_ROOT location is defined
ifndef OF_ROOT
OF_ROOT=../../..
endif
 
# call the project makefile!
include $(OF_ROOT)/libs/openFrameworksCompiled/project/makefileCommon/compile.project.mk

 

如上所示，编译 openFrameWorks 的工程时，系统须要从 oF 的根路径中引入另外一个名为 compile.project.mk 的 Makefile，这个根路径存储在 OF_ROOT 变量中，默认值是 ../../.. ，即当前目录往上三级的目录。之因此使用这个默认值，是由于使用 projectGenerator 生成的项目都默认存放在 oF根目录/apps/myApps 目录下。为了方便在其余地方建立和编译工程，能够人为地定义一个 OF_ROOT 变量。将下面这一行添加到用户主目录下的 .bashrc 文件中：

 

1
export OF_ROOT=<你的 oF 根目录>

 

入门实例

接下来将介绍如何开发基于 oF 的 C++ 程序2 2主要参考了 Jeff Crouse 所编写的教程 ofTutorials - Chapter 1 - Getting Started。。

testApp.cpp

双击 mySketch.cbp 文件，打开 Code::Blocks 开发环境，在左边的项目管理器中双击打开 test.App 文件。以下图所示：

使用 Code::Blocks 开发程序

testApp.cpp 将会是你的好朋友。在编辑窗口中，你能够看到以下的内容：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#include "testApp.h"
 
//--------------------------------------------------------------
void testApp::setup(){
 
}
 
//--------------------------------------------------------------
void testApp::update(){
 
}
 
//--------------------------------------------------------------
void testApp::draw(){
 
}
 
//--------------------------------------------------------------
void testApp::keyPressed(int key){
 
}
 
...

 

上面的代码包含了 4 类函数：

  • setup - 这个函数将在应用程序生命期的最开始就被调用，甚至在你编写的程序窗口打开以前。利用这个函数，咱们能够作一些准备工做，例如在窗口打开以前，先修改窗口的大小；
  • update 和 draw - 当 setup 函数运行完成后，系统将进入一个 update 和 draw 不断交替运行的循环，这个循环将持续到程序结束。也就是说，setup() 运行完成后，update() 开始运行，而后是 draw() ，而后又是 update() ，而后又是 draw() …… 3 3这个交替频率就是帧率，它的默认值取决于你的电脑的处理速度。update() 一般用来更新你的程序的状态（例如改变变量的值），而 draw() 则经常使用来在你的窗口中绘制内容；
  • keyPressed、keyReleased、mouseMoved、mouseDragged、mousePressed、mouseReleased、windowResized, gotMessage、dragEvent - 与前面三种函数不一样，这类函数仅当用户触发某类事件才会被调用。

咱们先试着直接编译这个项目，此时的程序窗口里尚未东西：

绘制图形

以后，咱们能够试着在窗口中画一个圆。oF 提供了 ofCircle 函数用于绘制圆。

往 draw 函数里头添加一句内容，：

 

1
2
3
void testApp::draw(){
ofCircle( 200, 300, 60);
}

 

第二行告诉系统在坐标 (200, 300) 处画一个半径为 60 的圆。

添加颜色

如今这个圆看起来很单调，能够给这个圆添加颜色。oF 提供了 ofSetColor 函数用于设置颜色。将 draw() 函数改成：

 

1
2
3
4
void testApp::draw(){
ofSetColor( 255, 0, 255);
ofCircle( 200, 300, 60);
}

 

新加的这一行（第2行）告诉系统在绘制图形前选择一个颜色，这个颜色的 R、G、B 三原色的色值分别为 (255, 0, 255) 。

咱们能够用一样的方法再画一个青色的圆：

 

1
2
3
4
5
6
7
void testApp::draw(){
ofSetColor( 255, 0, 255);
ofCircle( 200, 300, 60);
 
ofSetColor( 0, 255, 255);
ofCircle( 500, 500, 100);
}

 

其余的形状

除了画圆，oF 也能够画其余的图案：

  • ofRect - 画一个矩形。参数是：(x, y, width, height) ；
  • ofTriangle - 画一个三角形。参数是三个顶点的坐标：(x1, y1, x2, y2, x3, y3)
  • ofLine - 画一条线段。参数是两个端点的坐标 (x1, y1, x2, y2)
  • ofEllipse - 画椭圆。参数是：(x, y, width, height)
  • ofCurve - 画一条从点 (x1, y1) 到 (x2, y2) 的贝塞尔曲线，曲线的形状由两个控制点 (x0, y0) 和 (x3, y3) 控制 4 4贝塞尔曲线 的控制点比较难以掌握。若是你用过 Photoshop 里的钢笔工具，你大概就会明白是怎么一回事。。

让形状动起来

接下来咱们将编写代码让窗口里的图形动起来。主要的思路就是用两个变量控制圆的坐标，而后在程序的运行过程当中改变这个变量。在 test.cpp 文件的开头声明两个变量，分别用于存放圆的 x 坐标和 y 坐标：

 

1
2
3
4
#include "testApp.h"
 
int myCircleX;
int myCircleY;

 

在 setup() 函数中为这两个变量添加初始值 5 5别忘了前面介绍的每类函数的用途。：

 

1
2
3
4
void testApp::setup(){
myCircleX =  0;
myCircleY =  200;
}

 

用这两个变量绘制图形：

 

1
2
3
4
void testApp::draw(){
ofSetColor( 255, 0, 255);
ofCircle(myCircleX, myCircleY,  60);
}

 

要在运行过程当中修改这两个变量，能够在 update() 函数中编写相关代码。例如，让这个圆一直向右移动，当超出屏幕时，再回到原来开始的地方：

 

1
2
3
4
5
void testApp::update(){
myCircleX++;
if (myCircleX > ofGetWindowWidth())
myCircleX =  0;
}

 

其中，第 3 行的 ofGetWindowWidth() 函数用来获取窗口的宽度6 6若是不考虑拉伸窗口，也能够用 1024 这个值代替，由于 oF 的默认窗口大小是 1024x768 。。

改变帧率

你可能会发现上面的程序在运行的时候有一个问题：圆圈的运动存在时快时慢的状况。如前面所说，这是因为你的程序的帧率，或者说 update() 函数和 draw() 函数交替执行的频率不稳定形成的。在 draw() 函数中添加下面这一行代码能够在窗口的左上方显示帧率信息：

 

1
ofDrawBitmapString(ofToString(ofGetFrameRate())+ "fps", 10, 15);

 

你能够发现这个数值会在程序运行的过程当中存在较大波动，尤为是当你同时还在执行其余耗费计算资源的任务时，这个数值会降低得更加明显，相应的这个圆圈的运动速度也会跟着变慢。

让窗口中的动画变得更加平滑的方法是把帧率限制在一个合理的值，例如 60 fps ：

 

1
2
3
4
5
6
void testApp::setup(){
ofSetFrameRate( 60);
 
myCircleX =  300;
myCircleY =  200;
}

 

若是你以为通过这么一改动以后这个圆圈慢的让你没法忍受，你能够经过修改圆圈的移动速度来加速。例如：

 

1
2
3
4
5
void testApp::update(){
myCircleX+= 4;
if (myCircleX > ofGetWindowWidth())
myCircleX =  0;
}

 

添加交互

接下来，咱们将为这个程序添加键盘和鼠标的交互。要添加键盘交互，能够经过修改 keyPressed() 函数和 keyReleased() 函数来完成。其中，keyPressed() 捕获的是按下键盘按键的事件，而 keyReleased() 捕获的是松开键盘按键的事件 7 7额外提一下， oF 彷佛并不能很好的识别 DVORAK 等其余键盘布局。解决方法见这个帖子。。

例如：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void testApp::keyPressed(int key){
if('w' == key || 'W' == key)
{
myCircleY-= 4;
}
if('s' == key || 'S' == key)
{
myCircleY+= 4;
}
if('a' == key || 'A' == key)
{
myCircleX-= 4;
}
if('d' == key || 'D' == key)
{
myCircleX+= 4;
}
}

 

将经过 w 、s、a、d 四个按键控制圆圈的运动。出于鲁棒性考虑，小写和大写的字母都要考虑进去，由于按键是经过十进制的 ASCII 码来判断的，而大写字母和小写字母的 ASCII 码是不一样的。上面的代码也能够等价的用 ASCII 码来代替8 8舒适小提示：Linux 下能够经过 man ascii查询每一个字母对应的 ASCII 编码。通常人我不告诉他。：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void testApp::keyPressed(int key){
if(119 == key || 87 == key) // w key
{
myCircleY-= 4;
}
if(115 == key || 83 == key) // s key
{
myCircleY+= 4;
}
if(97 == key || 65 == key) // a key
{
myCircleX-= 4;
}
if(100 == key || 68 == key) // d key
{
myCircleX+= 4;
}
}

 

添加鼠标事件则经过修改 mouseMoved() 、mouseDragged()、mousePressed() 和 mouseReleased() 来完成，顾名思义，分别捕获的是鼠标的移动、拖拽、单击、松开操做。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void testApp::mouseMoved(int x, int y ){
 
}
 
void testApp::mouseDragged(int x, int y, int button){
 
}
 
void testApp::mousePressed(int x, int y, int button){
 
}
 
void testApp::mouseReleased(int x, int y, int button){
 
}

 

例如，咱们能够编写代码实现鼠标拖动圆圈：

 

1
2
3
4
5
6
7
8
9
10
void testApp::mouseDragged(int x, int y, int button){
if (0 == button) { // left button
float distance = ofDist(myCircleX, myCircleY, x, y);
 
if (distance < 100){
myCircleX = x;
myCircleY = y;
}
}
}

 

第 2 行用于判断触发此事件的按键是否为左键；第 3 行的 ofDist() 函数用于计算鼠标当前位置和圆心的距离。若是这个距离小于半径 100 ，则能够判断当前鼠标落在这个圆圈的范围之内，能够用鼠标的位置代替圆心的位置。

其余优化

调整圆圈精度

若是近一点观察圆圈，你可能会发现圆圈的周围有点粗糙。

能够修改圆圈的绘制精度来让圆圈更加平滑。在 setup() 函数中添加这一句：

 

1
ofSetCircleResolution( 120);

 

抗锯齿和垂直同步

抗锯齿和垂直同步也是经常使用的优化画面的手段：

 

1
2
ofSetVerticalSync( true);
ofEnableSmoothing();

 

实用的插件

oF 的另一大杀手锏在于它的社区很是活跃，如今已经开发出了数量可观的第三方插件。这里只收集了极小一部分实用插件。更全面的插件列表能够访问 ofxaddons.com 9 9什么？有墙？！其实几乎全部插件都是托管在 Github 上的。因此若是在 Github 上搜 “ofx” ，也能够找到这些 oF 插件哦。。

  • ofxUI - 华丽丽的 UI 库。提供了不少新颖而实用的界面控件。
  • ofxCv - OpenCV 的另外一套可选的 oF 插件（oF 自带一个 oFOpenCv 插件）；
  • ofxLibRocket - 对 librocket 库的封装，这个库容许你使用 html 和 css 来布局 C++ 窗口；
  • ofxTrueTypeFontUC - 对 ofTrueTypeFont 类的扩展，使其支持 Unicode 字符（例如汉字）；
  • ofxPCL - 对 PCL（一个专门用于处理点云的库） 的封装；
  • ofxTimeline - 一个用来绘制可编辑的 timeline 控件的插件；
  • ofxMidi - Midi 音乐的插件；
  • ofxSpeech - 语音识别插件；
  • ofxVideoRecorder - 录制视频插件；
  • ofxImageSequence - 一个用于像播放视频同样播放图像序列的插件；
  • ofxGifEncoder - 生成 Gif 动画的插件；
  • ofxVolumetrics - 简单的体绘制插件；
  • ofxDelaunay -
  • ofxFft - 对两个用于进行傅里叶变换的库 FFTW 和 KissFFT 的封装；
  • ofxNodejs - 桥接 Node.js 的插件；
  • ofxLua - 桥接 Lua 的插件；
  • ofxBox2d - 对流行的 2D 物理模拟库 box2d 的封装；
  • ofxBullet - 对另外一个物理模拟库 Bullet Physics 的封装；
  • ofxLearn - 通用的机器学习插件，支持分类、回归、聚类等任务；
  • ofxJSON - 对 Json 库 JsonCpp 的封装；
  • ofxHttpServer - 一个基于 libmicrohttpd 的 http 服务器插件；
  • ofxAddonTemplate - 一个空的目录框架，能够借鉴它本身编写插件（这都有……--bb）。

使用这些插件的方法很简单：

  1. 访问这个插件的 Github 项目主页；
  2. 复制它的代码仓库地址；
  3. 进入你的 oF 根目录下的 addons 目录，git clone 这个项目；
  4. 若是这个项目自带 example ，能够直接 make && make run 编译和执行它看看结果。

相关连接

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程