在前面的文章中已经介绍完 SDL 显示窗口、消息循环和事件响应这些基础内容,有了这些基础就可以进行功能性开发了。
本篇的主要内容是利用 SDL 加载并显示一张图片,然后再去进行更多的音视频操作。
SDL2_Image 配置
之前写过两篇 libpng 和 libjpeg-turbo 编译与实践的文章:
有需要的可以去翻阅一下。
在 SDL 中加载 png 或者 jpeg 图片用不到上面两个库了,需要用到 SDL 特定的图片库 SDL_Image ,执行以下命令去下载:
brew install sdl2_image
我用的版本是 2.0.5
,也是目前最新的版本,之后我们要在 CMake 中去配置它。
CMake 工程配置
对 av-beginner
项目的 CMake 配置做了一些改动,创建了一个 cmake_utils
的目录,在该目录下创建了一个 CMakeLists.txt
,里面存放一些自定义的函数,专门用来做开源库的链接加载工作,如下图红框内容所示:
定义了一个 init_path
的宏,宏的功能和函数是有些类似的,在里面定义了不同开源库的路径变量,后续只要引用这些变量就好了。如果你的电脑上路径不同,修改这里的宏定义就行。
如果对 CMake 的操作不熟悉的话,建议阅读之前写过的文章,涵盖了很多基础操作。 Android NDK 开发之 CMake 必知必会
当下载了 SDL_Image 之后,找到它的路径,把它的库加载到 CMake 链接目录中来,也就是要调用 link_directories
方法,这里同样可以定义一个宏:
macro(link_sdl_image)
message("link sdl image library and path is ${sdl_image_dir}")
include_directories(${sdl_image_dir}/include/SDL2)
link_directories(${sdl_image_dir}/lib)
endmacro()
之后就需要把目标执行文件或者目标库与 SDL_Image 开源库关联起来,也就是 target_link_libraries
方法,同样定义一个宏:
macro(target_link_sdl_image name)
message("${name} link sdl image")
target_link_libraries(${name}
SDL2_image
)
endmacro()
这个宏有个参数 name
,它就是要链接的目标文件 target 。
对于 SDL 库或者其他库,也可以创建类似的宏,具体在源码中能看到。
在完成了 SDL_Image 的 CMake 配置之后,就需要在工程的主 CMakeLists.txt
文件中把它包含进去,现在还只是在 cmake_utils
目录中,这样是引用不到宏的。
通过 add_subdirectory
方法将定义的功能添加进来,接下来就可以使用了。
同时,对于 SDL 项目代码,单独创建一个文件夹去存放,再根据每个小项又划分文件夹:
如上图所示,针对每个小项又有单独的 CMakeLists.txt
配置文件,在里面按需执行动态库的关联就好了。
经过以上的工程配置整改,对于后续的开发模块划分是很有帮助的,不仅便于添加各种开源库,更利于去单个编译项目。
后续添加的库都会按照这个模式进行添加。
SDL_Image 加载 图片并显示
完成了配置之后,就可以进行 SDL_Image 的开发了,整个开发流程比较简单。
前面的文章中我们创建并展示了 SDL_Window
,SDL_Window 内有一个叫做 SDL_Surface
的结构,实际上它才是最终渲染展示的。
我们加载一张图片,并将图片转换成 SDL_Surface
,然后把图片对应的 SDL_Surface 转换到 SDL_Window 对应的 SDL_Surface ,再更新一下 SDL_Window 的 SDL_Surface 内容,渲染到屏幕就好了。
核心代码如下所示:
// 得到 SDL_Window 的 SDL_Surface
SDL_Surface *pWindowSurface = SDL_GetWindowSurface(pWindow);
// 根据图片创建一个 SDL_Surface
SDL_Surface *pImageSurface = IMG_Load(image_path.c_str());
bool bQuit = false;
SDL_Event windowEvent;
while (!bQuit){
while (SDL_PollEvent(&windowEvent)){
switch (windowEvent.type){
case SDL_QUIT:
bQuit = true;
break;
default:
break;
}
}
// 将 pImageSurface 的内容传输到 上
SDL_BlitSurface(pImageSurface, nullptr,pWindowSurface,nullptr);
// 上屏操作,将 Surface 内容显示到屏幕上
SDL_UpdateWindowSurface(pWindow);
}
最终结果如下:
总结
以上就是音视频基础学习连载的 004
篇。
完成了 SDL 加载图片并显示的流程,整体代码比较简单,很多东西都是之前文章提到过的,反而重点更侧重于工程的 CMake 配置,有兴趣的可以看看代码。
具体代码见仓库:
本篇文章对应的提交 tag
为 av-beginner-004
,可切换至对应源码查看。
能力有限,文中有不对之处,欢迎加我微信 ezglumes 进行交流~~
知识星球
公众号音视频开发进阶对应的知识星球,一个编程开发领域的专业圈子,贩卖知识和技巧! ※ 入群须知:了解该星球能提供的价值和帮助,在提问时务必阐述好背景,附带相关的信息。 iOS 用户可以加我微信 ezglumes 邀请你进星球,有疑问也可以加我微信咨询。 ※ 星球内容: 基础教程: 在知识星球连载的干货教程,可以在专栏中找到,随着时间的推移,教程也会越来越多: - 音视频基础概念 - WebRTC 入门教程及源码实践 - 播放器教程及源码实践 - OpenGL 和特效开发教程 - Vulkan 入门教程 部分内容可以在博客 https://glumes.com 中检索到,后面会在星球里持续更新. 干货分享: 涵盖了移动开发和音视频工程领域的绝大部分,从项目实战角度出发,提升能力,包括但不限于以下领域: - Android/iOS 移动开发 - Camera 开发 - 短视频编辑 SDK 项目实践 - 在线直播和推流 - WebRTC 开发 - 播放器基础和提高 - OpenGL 图像渲染及特效开发 - C++ 基础和提高 - FFmpeg 使用和分析 - 干货资源和书籍分享 不止于技术方面的,各种 IT 新闻、茶余饭后、生活趣事也欢迎大家分享!!! 技术答疑解惑: 针对上述基础教程和干货分享的答疑,另外还有音视频和 IT 开发中的各种交流讨论。 - 基础知识点答疑 - 工业项目实践答疑 - 问题排查思路分析 一个 BUG 排查很久,不如来星球里提个问题,效率提升百倍。 求职和面试辅导: 一站式职场服务,每份工作都值得用心对待!!! - 面试题和面试经验分享 - 简历修改和模拟面试 - 大厂内推和信息同步 - 职场经验分享 - 职业规划和发展分析 ※ 星主和合伙人介绍 星主是公众号音视频开发进阶的作者,也是网站 https://glumes.com 的作者,曾参与过抖音、剪映等头部音视频 APP 底层 SDK 的开发。 合伙人也是在头条、快手从事音视频架构师的职位,具有多年的音视频开发经验,能力圈覆盖了音视频的绝大多数领域,资深音视频从业人员为你保驾护航。
微信公众号
扫描下面的二维码关注我的微信公众号《音视频开发进阶》,推送更多精彩内容!
添加我的微信 ezglumes 拉你入音视频与图形图像技术群一起交流学习~

原创文章,转载请注明来源: 【音视频连载-004】基础学习篇-SDL 加载图片并显示