[笔记]音视频学习之SDL篇《一》 渲染图片

简介: [笔记]音视频学习之SDL篇《一》 渲染图片

前期准备

SDL2-devel-2.0.9

SDL2_image-2.0.4

准备一张bmp图片

然后配置库啥的我不教了 基本知识 实在不行 跑我的demo 我的是cmake搭建的 有点复杂

初始化并创建窗口 用来绘制画面

if (SDL_Init(SDL_INIT_VIDEO)) //选择渲染视频画面
{
  std::cout << "SDL_Init Error: " << SDL_GetError() << std::endl;
  return 1;
}
SDL_Window *win = SDL_CreateWindow(
    "Hello World!",//标题
    100, 100,//坐标
    640, 480, //窗口宽高
    SDL_WINDOW_SHOWN//标志 显示 另外还有其他全屏,隐藏等标志
    );
if (win == nullptr)
{
  std::cout << "SDL_CreateWindow Error: " << SDL_GetError() << std::endl;
  return 1;
}

SDL_CreateWindow这个函数的作用是为我们创建一个窗口,并且返回一个SDL_Window指针。这个函数的第一个参数是窗口的标题,之后是窗口所打开的位置的x,y坐标,之后的参数是窗口的长度和宽度。最后一个参数是窗口的各种flag,因为我们想要窗口在创建之后马上弹出,所以这里我们填SDL_WINDOW_SHOWN。

获取SDL_Renderer

为了渲染图片到窗口,得获取SDL_Renderer

// SDL_CreateRenderer 窗口句柄 指定显卡驱动(-1为自动选择) 
  // SDL_RENDERER_ACCELERATED,因为我们想使用硬件加速的renderer 
  // SDL_RENDERER_PRESENTVSYNC标志,因为我们想要使用SDL_RendererPresent这个函数,这个函数将会以显示器的刷新率来更新画面
  SDL_Renderer *ren = SDL_CreateRenderer(win, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
  if (ren == nullptr)
  {
    SDL_DestroyWindow(win);
    std::cout << "SDL_CreateRender Error: " << SDL_GetError() << std::endl;
    SDL_Quit();
    return 1;
  }

将bmp图片图片载入Surface

std::string imagePath = BMP_PATH;
//Surface 可以把它理解为一个Buffer,它是一块屏幕缓冲区。
//每个Window(窗口)对应一个Surface,任何View都是画在Surface上的
SDL_Surface *bmp = SDL_LoadBMP(imagePath.c_str());
//SDL_Surface *bmp = IMG_Load(imagePath.c_str());
if (bmp == nullptr)
{
  SDL_DestroyRenderer(ren);
  SDL_DestroyWindow(win);
  std::cout << "SDL_LoadBMP Error: " << SDL_GetError() << std::endl;
  SDL_Quit();
  return 1;
}

创建Texture

//SDL_Texture来用硬件加速绘制图像
SDL_Texture *tex = SDL_CreateTextureFromSurface(ren, bmp);
SDL_FreeSurface(bmp);
if (tex == nullptr)
{
  SDL_DestroyRenderer(ren);
  SDL_DestroyWindow(win);
  std::cout << "SDL_CreateTextureFromSurface Error: " << SDL_GetError() << std::endl;
  SDL_Quit();
  return 1;
}

开始绘制

现在我们可以把Texture画到renderer上了。首先,我们先使用SDL_RenderClear来清空屏幕,然后我们使用SDL_RenderCopy来把texture画上去。最后,我们使用SDL_RenderPresent来更新屏幕的画面。

SDL_RenderClear(ren);
//texture画上去
//第一个NULL是一个指向源矩形的指针,也就是说,从图像上裁剪下的一块矩形
//而另一个是指向目标矩形的指针。我们将NULL传入这两个参数,
//是告诉SDL绘制整个源图像(第一个NULL),并把它画在屏幕上(0,0 )的位置,并拉伸这个图像让它填满整个窗口(第二个NULL)
SDL_RenderCopy(ren, tex, NULL, NULL);// 
SDL_RenderPresent(ren);// SDL_RenderPresent来更新屏幕的画面
SDL_Delay(10000);

这里我们给SDL_RenderCopy传了两个NULL值。第一个NULL是一个指向源矩形的指针,也就是说,从图像上裁剪下的一块矩形;而另一个是指向目标矩形的指针。我们将NULL传入这两个参数,是告诉SDL绘制整个源图像(第一个NULL),并把它画在屏幕上(0,0 )的位置,并拉伸这个图像让它填满整个窗口(第二个NULL)。这一点以后还会详细说明。

销毁资源

//必要释放掉我们这个窗口、renderer还有texture所用的全部内存
  SDL_DestroyTexture(tex);
  SDL_DestroyRenderer(ren);
  SDL_DestroyWindow(win);
  SDL_Quit();

补充

SDL2_image-2.0.5会有点问题 dll找不到dwClose等等

推荐使用SDL2_image-2.0.4 的

IMG_Load(url);

替换

SDL_LoadBMP(imagePath.c_str());

总结

1.创建窗口

2.创建Render

3.载入图片到屏幕缓冲区Surface

4.Surface载入到纹理Texture后 用Render渲染Surface

5.依次销毁Texture,Render,Window

demo地址

相关文章
|
存储 编解码 Linux
FFmpeg+SDL播放器开发实践:解析、解码、渲染全流程详解
FFmpeg+SDL播放器开发实践:解析、解码、渲染全流程详解
[笔记]音视频学习之SDL篇《十四》简单的动画
[笔记]音视频学习之SDL篇《十四》简单的动画
[笔记]音视频学习之SDL篇《五》裁剪图片成子图片(裁剪精灵表)
[笔记]音视频学习之SDL篇《五》裁剪图片成子图片(裁剪精灵表)
[笔记]音视频学习之SDL篇《三》使用拓展库
[笔记]音视频学习之SDL篇《三》使用拓展库
|
5月前
|
Web App开发 移动开发 前端开发
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
146 0
|
6月前
|
Linux C语言 开发者
音视频-SDL的简单使用
音视频-SDL的简单使用
50 0
|
计算机视觉
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
[笔记]音视频学习之SDL篇《九》 渲染yuv数据
[笔记]音视频学习之SDL篇《九》 渲染yuv数据
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
[笔记]音视频学习之SDL篇《十三》播放音乐和特效
[笔记]音视频学习之SDL篇《十一》图片 缩放 旋转
[笔记]音视频学习之SDL篇《十一》图片 缩放 旋转
149 0