我的C语言学习历程：图形篇

开始向程序的图形界面化进军！

在编写文件管理器的过程中，偶尔做些别的，因为代码写多了，会感到枯燥无味，没有动力，想做其它事情，于是，我就去研究mgaview的源码，因为它能显示图形，想知道它的原理，这个是研究后成果：http://blog.csdn.net/liuchao35758600/article/details/6789910，在此不做过多说明。

研究mgaview的源码的收获还是很大的，了解了linux下显示图形的方法，mgaview是通过往framebuffer(帧缓冲)写数据而实现图形显示的，具体内容不多说，可以参考那文章。

研究后，我就尝试了一下，将屏幕填充白色，之后，在自定的位置显示一个红色矩形，结果成功了，我又改了一下代码，让这个红色矩形在白色背景中移动；

在这之后，我将红色矩形改成了小鸟，小鸟的图片数组是用mgaview中的图片解码功能解码出来的，第一次测试，小鸟的图片变形了，后来发现其实是图片尺寸有问题，不是实际尺寸，纠正后能正常显示，我增加了1只小鸟，又把白色背景改成一半黑一半白的：

图片可以在程序里内置，只需要转换成图片数组即可。

你可以将屏幕看成一个坐标系，左上角是原点（0，0），由于这些图形数据是线性存储的，将二维坐标转换成一维的线性坐标的公式为：

数组中的位置 = y轴坐标 * 屏幕宽度 + x轴坐标

例如：屏幕上有个点的坐标为(320, 240)，而屏幕尺寸是宽为1280像素，高为800像素，那么，这个点在数组中的位置是：240 * 1280 + 320 = 307520；

屏幕每个像素点表示的颜色都保存在一个数组中，每隔3个元素表示一个像素点的颜色，因为分别是表示Red、Green、Blue这三色的深度的，但一般是每隔4个元素，貌似多出来的是alpha通道，也就是透明度，因此，需要乘以4，才能得到真正的位置：(240 * 1280 + 320)*4 = 1 230 080；

假设指向framebuffer内存地址的指针是p_fb，那么，p_fb[1230080]是这个像素点的Red颜色深度，p_fb[1230081]是Green颜色深度，p_fb[1230082]是Blue颜色深度。

我的学习机里的像素点的颜色排列顺序是BGR，不是RGB，要显示正确的颜色，就要改变一下RGB的写入顺序，否则，显示出来的颜色不对。

掌握了这个知识，我用了彩色背景、一个人的图像素材，这个图像素材是我用手机截取的，运行游戏，之后截图，把动画分解成多个图片，之后用PS将人物动作图形抠出来，保存为png，将这些图片转换成数组，每张图一共四个数组，分别保存R、G、B、A通道，关于用alpha通道混合图形的方法，我发了个帖子：http://topic.csdn.net/u/20110623/14/ac5fbbff-a3f9-469f-a362-ecde8aa32a3f.html

用了回帖者告诉我的公式，成功的实现了用alpha通道混合图形，最终，做了个测试程序：

可用按键控制这个人行走，按J键使用攻击动作。

人物的图形素材，来自这个游戏：

我将我从mgaview源码中获得的知识，应用到了文件管理器，使之实现了半图形化界面，主界面是第一个实现图形化的：

第一张图是初始的样子，过了不久，我又改了一下，界面下面一排显示内存信息，并且会动态更新数据，这些文字是用ps做的，数字0-9，小数点、MB、GB、KB分别保存至png图片中，包含alpha通道，其余直接写个完整的文本保存至png图片。文字的显示，我通过判断字符串的内容，来生成对应的图形，之后，粘贴至指定的位置，例如：59.16

MB，遍历这个字符串，计算所需矩形背景的长度和宽度，之后判断，第一个是5，那么，用5的位图，贴到矩形背景中，第二个是9，那么，用9的的位图，贴到矩形背景中，就这样，以此类推，最终，矩形背景中就贴上了该字符串对应的位图。

容量条的显示，我准备了三张图片，红色、蓝色的满格容量条的图片，一张容量条的空槽的图片，根据百分比的值，将适合长度的满格容量条贴到空槽的图片中，超过一定值时，就用红色的容量条的图片，这个方法是那个时候想到的，当然，现在如果再来做的话，就用这种方法：准备1个像素点宽度的红蓝容量条，空槽可以用算法画，之后，根据百分比的值，画长度为 （总长度x百分比） 的容量条至空槽中。

在这之后，其它的功能也实现了图形化：

按钮是模拟实现的，虽然按下时有凹陷的效果，但都是用图片贴出来的；“窗口”中的内容，大部分是用PS预先编辑好的，剩下的由程序处理显示。

以上讲的是文件管理器的主要功能，其它细节功能就没有做过多的说明。

图形处理，使用的算法是个人经过思考和多次测试完善得出来的，比如：图形的截取，图形的合成，这些“算法”都很简单，不知道称之为“算法”是否合适。

小结

研究了mgaview程序的源代码，初步掌握了如何利用图形库提供的函数实现相应格式的图片文件的解码，bmp图片可以直接读，不需要其它图形库的支持。

初步掌握了图形数据的处理，实现了简单的图形合成，图形裁剪。