[笔记]音视频学习之SDL篇《五》裁剪图片成子图片(裁剪精灵表)

简介: [笔记]音视频学习之SDL篇《五》裁剪图片成子图片(裁剪精灵表)

目的

裁剪一个图片中的多个子图片作为图片使用

初始化

创建窗口

载入图片

200*200

//Start up SDL and make sure it went ok
  if (SDL_Init(SDL_INIT_VIDEO) != 0) {
    logSDLError(std::cout, "SDL_Init");
    return 1;
  }
  //Setup our window and renderer
  SDL_Window* window = SDL_CreateWindow("Lesson 5", SDL_WINDOWPOS_CENTERED,
    SDL_WINDOWPOS_CENTERED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN);
  if (window == nullptr) {
    logSDLError(std::cout, "CreateWindow");
    SDL_Quit();
    return 1;
  }
  SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
  if (renderer == nullptr) {
    logSDLError(std::cout, "CreateRenderer");
    cleanup(window);
    SDL_Quit();
    return 1;
  }
  const std::string resPath = getResourcePath("Lesson5");
  SDL_Texture* image = loadTexture("..\\..\\res\\05sdl_learn\\image.png", renderer);
  if (image == nullptr) {
    cleanup(image, renderer, window);
    IMG_Quit();
    SDL_Quit();
    return 1;
  }

确认裁剪坐标

确认裁剪显示坐标

int iW = 100, iH = 100;
  int x = SCREEN_WIDTH / 2 - iW / 2;
  int y = SCREEN_HEIGHT / 2 - iH / 2;

确认裁剪大小的圆为100*100

绿(0,0)

蓝(0,100)

红(100,0)

黄(100,100)

//Setup the clips for our image
  SDL_Rect clips[4];
  //Since our clips our uniform in size we can generate a list of their
  //positions using some math (the specifics of this are covered in the lesson)
  for (int i = 0; i < 4; ++i) {
    clips[i].x = i / 2 * iW;
    clips[i].y = i % 2 * iH;
    clips[i].w = iW;
    clips[i].h = iH;
    SDL_Log("(%d,%d)", clips[i].x, clips[i].y);
  }

按下1,2,3,4显示不同裁剪图片

//Specify a default clip to start with
  int useClip = 0;
  SDL_Event e;
  bool quit = false;
  while (!quit) {
    //Event Polling
    while (SDL_PollEvent(&e)) {
      if (e.type == SDL_QUIT) {
        quit = true;
      }
      //Use number input to select which clip should be drawn
      if (e.type == SDL_KEYDOWN) {
        switch (e.key.keysym.sym) {
        case SDLK_1:
        case SDLK_KP_1:
          useClip = 0;
          break;
        case SDLK_2:
        case SDLK_KP_2:
          useClip = 1;
          break;
        case SDLK_3:
        case SDLK_KP_3:
          useClip = 2;
          break;
        case SDLK_4:
        case SDLK_KP_4:
          useClip = 3;
          break;
        case SDLK_ESCAPE:
          quit = true;
          break;
        default:
          break;
        }
      }
    }
    //Rendering
    SDL_RenderClear(renderer);
    //Draw the image
    renderTexture(image, renderer, x, y, &clips[useClip]);
    //Update the screen
    SDL_RenderPresent(renderer);
  }
  //Clean up
  cleanup(image, renderer, window);
  IMG_Quit();
  SDL_Quit();

总结

demo地址

ApplySurface

SDL_RenderCopy

SDL_QueryTexture含义

查询Texture属性


相关文章
|
6月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
|
1月前
|
C++
SDL基础使用03(渲染显示bmp图片)
如何使用SDL库在C++中创建窗口、加载BMP图片、创建纹理,并通过渲染器进行显示的完整过程。
29 2
|
Web App开发 移动开发 前端开发
移动端图片操作(二)——预览、旋转、合成
在上一节中已经提到了预览,预览可以通过data: URL格式或URL对象。
移动端图片操作(二)——预览、旋转、合成
|
计算机视觉
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
|
缓存 监控 前端开发
调用摄像机播放画面,并且实现录制GIF动图预览和下载
调用摄像机播放画面,并且实现录制GIF动图预览和下载
[笔记]音视频学习之SDL篇《十一》图片 缩放 旋转
[笔记]音视频学习之SDL篇《十一》图片 缩放 旋转
149 0
[笔记]音视频学习之SDL篇《一》 渲染图片
[笔记]音视频学习之SDL篇《一》 渲染图片
|
移动开发 前端开发 JavaScript
【移动端】实现相册的上传和缩放裁剪
做项目时,在移动端,需要实现用户相册图片的上传,并对图片进行缩放裁剪的功能。下面说一下实现流程。
219 1
【移动端】实现相册的上传和缩放裁剪
|
前端开发
canvas实现海报 两张图片合成一张并且可以保存
canvas实现海报 两张图片合成一张并且可以保存
canvas实现海报 两张图片合成一张并且可以保存