【音视频开发四】基础学习篇SDL加载图片并显示

本篇的主要内容是利用 SDL 加载并显示一张图片&＃xff0c;然后再去进行更多的音视频操作。

SDL2_Image 配置

在 SDL 中加载 png 或者 jpeg 图片用不到上面两个库了&＃xff0c;需要用到 SDL 特定的图片库 SDL_Image &＃xff0c;执行以下命令去下载&＃xff1a;

brew install sdl2_image


我用的版本是 2.0.5 &＃xff0c;也是目前最新的版本&＃xff0c;之后我们要在 CMake 中去配置它。

CMake 工程配置

对 av-beginner 项目的 CMake 配置做了一些改动&＃xff0c;创建了一个 cmake_utils 的目录&＃xff0c;在该目录下创建了一个 CMakeLists.txt &＃xff0c;里面存放一些自定义的函数&＃xff0c;专门用来做开源库的链接加载工作&＃xff0c;如下图红框内容所示&＃xff1a;

定义了一个 init_path 的宏&＃xff0c;宏的功能和函数是有些类似的&＃xff0c;在里面定义了不同开源库的路径变量&＃xff0c;后续只要引用这些变量就好了。如果你的电脑上路径不同&＃xff0c;修改这里的宏定义就行。

当下载了 SDL_Image 之后&＃xff0c;找到它的路径&＃xff0c;把它的库加载到 CMake 链接目录中来&＃xff0c;也就是要调用 link_directories 方法&＃xff0c;这里同样可以定义一个宏&＃xff1a;

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 开源库关联起来&＃xff0c;也就是 target_link_libraries 方法&＃xff0c;同样定义一个宏&＃xff1a;

macro(target_link_sdl_image name)message("${name} link sdl image")target_link_libraries(${name}SDL2_image)
endmacro()

这个宏有个参数 name &＃xff0c;它就是要链接的目标文件 target 。

对于 SDL 库或者其他库&＃xff0c;也可以创建类似的宏&＃xff0c;具体在源码中能看到。

在完成了 SDL_Image 的 CMake 配置之后&＃xff0c;就需要在工程的主 CMakeLists.txt 文件中把它包含进去&＃xff0c;现在还只是在 cmake_utils 目录中&＃xff0c;这样是引用不到宏的。

通过 add_subdirectory 方法将定义的功能添加进来&＃xff0c;接下来就可以使用了。

同时&＃xff0c;对于 SDL 项目代码&＃xff0c;单独创建一个文件夹去存放&＃xff0c;再根据每个小项又划分文件夹&＃xff1a;

如上图所示&＃xff0c;针对每个小项又有单独的 CMakeLists.txt 配置文件&＃xff0c;在里面按需执行动态库的关联就好了。

【文章福利】&＃xff1a;小编整理了一些相关的音视频开发学习资料&＃xff08;资料包括C/C&＃43;&＃43;&＃xff0c;Linux&＃xff0c;FFmpeg  webRTC  rtmp  hls rtsp ffplay  srs 等&＃xff09;&＃xff0c;qun994289133免费分享&＃xff0c;有需要的可以加群领取哦&＃xff01;

经过以上的工程配置整改&＃xff0c;对于后续的开发模块划分是很有帮助的&＃xff0c;不仅便于添加各种开源库&＃xff0c;更利于去单个编译项目。

后续添加的库都会按照这个模式进行添加。

SDL_Image 加载 图片并显示

完成了配置之后&＃xff0c;就可以进行 SDL_Image 的开发了&＃xff0c;整个开发流程比较简单。

前面的文章中我们创建并展示了 SDL_Window&＃xff0c;SDL_Window 内有一个叫做 SDL_Surface 的结构&＃xff0c;实际上它才是最终渲染展示的。

我们加载一张图片&＃xff0c;并将图片转换成 SDL_Surface &＃xff0c;然后把图片对应的 SDL_Surface 转换到 SDL_Window 对应的 SDL_Surface &＃xff0c;再更新一下 SDL_Window 的 SDL_Surface 内容&＃xff0c;渲染到屏幕就好了。

核心代码如下所示&＃xff1a;

// 得到 SDL_Window 的 SDL_SurfaceSDL_Surface *pWindowSurface &＃61; SDL_GetWindowSurface(pWindow);// 根据图片创建一个 SDL_SurfaceSDL_Surface *pImageSurface &＃61; IMG_Load(image_path.c_str());bool bQuit &＃61; false;SDL_Event windowEvent;while (!bQuit){while (SDL_PollEvent(&windowEvent)){switch (windowEvent.type){case SDL_QUIT:bQuit &＃61; true;break;default:break;}}// 将 pImageSurface 的内容传输到 上SDL_BlitSurface(pImageSurface, nullptr,pWindowSurface,nullptr);// 上屏操作&＃xff0c;将 Surface 内容显示到屏幕上SDL_UpdateWindowSurface(pWindow);}

 最终结果如下&＃xff1a;

总结

以上就是音视频基础学习连载的 004 篇。

完成了 SDL 加载图片并显示的流程&＃xff0c;整体代码比较简单