openFrameworks全系列 第三篇：图像和纹理

除了基本的2d图形绘制外，我们还可以在文档中添加图像。

一：加载图像

ofImage image;   image.loadImage( fileName ); image.draw( x, y ) 

先定义一个全局对象 image ， 在setup（）里通过 load（）或 loadimage（）函数加载，在draw（）里通过 draw（x,y）或 draw(x,y,w,h)绘制出来。

可以通过上一篇2d图像中的旋转，放大，缩小来运行多张图片，看看出现什么样的效果？

 

颜色除了R、G、B外，还要一个a通道。主要用来改变透明度。

 

二：像素创建图像和图像修改

用代码创建一张图像，我们需要创建一个像素数组，通过调用image.setFromPixels( data, w, h, type )方法即可。这里的type是是图片类型(OF_IMAGE_COLOR_ALPHA, OF_IMAGE_COLOR, or OF_IMAGE_GRAYSCALE).

 

下面是一个实时动态颜色变化图片。把，R、G、B、a 四通道放到data数组里，引入一个浮点型的 time变量让图片动起来。

 

利用下列函数可以修改图像。

• image.resize( newW, newH ) – 重新定义图片的尺寸 newW × newH

• image.crop( x, y, w, h ) –裁剪成新的子图片，左上角：(x, y) ，尺寸： w × h

• image.rotate90( times ) – 以 90 * times角度，顺时针旋转

• image.mirror( vertical, horizontal ) – 在水平，垂直面镜像复制图片。

• image2.clone( image ) – 重新克隆成一张新的图片。

 

三：用ofTexture优化内存

无论是2d图形，还是像素处理，都是用cpu计算。图形数量越多，消耗cpu资源越大，导致计算机不能处于阻塞状态，不能及时处理其他事物，计算性能下降。现代计算机把图形绘制处理都交给显卡GPU，GPU包含了大量的处理芯片，同时能并行处理渲染顶点，像素等。在图形图像方面拥有独特的资源优势。基于GPU的一大批技术不断涌现，像openFrameworks后面涉及到的 3d、openGL，shader等都使得GPU性能大幅度提升。为日常生活带来了绚丽多彩的视觉享受。

计算机的体系结构假定屏幕上描绘的所有图像、矢量图形和三维对象首先应加载到显卡中。把显卡中的图像称为纹理。默认情况下，openFrameworks用ofImage类包含两个相同的图像。这些是RAM内存中的像素数组，可以由image.getPixels（）及其克隆访问，是显卡中的纹理，可以由image.getExtureReference（）访问。

创建纹理和创建图片步骤类似：

• ofLoadImage( texture, fileName ) – 从图片文件夹中加载纹理。

• ofSaveImage( texture, fileName ) – 保存纹理到图片文件夹中。

• texture.draw( x, y ) or texture.draw( x, y, w, h ) –绘制

• texture.getWidth() and texture.getHeight()  获取纹理宽或高。

四：图像扭曲变形和video mapping

video mapping在多媒体展览展示里经常运用，把投影的画面用网格划分，拉点使画面变形，把画面和特定的形状物体契合好。

下面的例子是使一张图像四个角按键盘1,2,3,4都可以选定，用键盘上下左右四个方向可以拉动。