「SDL第三篇」繪製基本圖形

前言

之前的SDL的兩篇文章我向大家介紹了如何編譯使用 SDL,以及如何才能讓窗口顯示出來。想了解相關內容的同學可以點擊下面的鏈接查看相關內容。

本文將向大家介紹一下,如何通過 SDL 繪製一些基本圖形,如 點、線、矩形。了解了這些基本圖形後,你就可以按照搭積木的方式,構造出其它更複雜的圖形了。

有哪些基本圖形可以繪製

SDL中繪製基本圖形的 API並不多,主要是 點、線、矩形。其它圖形都可以通過 點、線、矩形組合出來。

  • 設置顏色:在繪製圖形前,要設置一下畫筆的色彩。這裡需要注意的是,如果畫筆與背景色相同了,那在窗口中是顯示不出來圖形的。
  • 畫點。
  • 畫線。
  • 畫矩形。
  • 填充矩形。

下面來詳細介紹一下這幾個API。

API詳細介紹

  • 設置顏色 int SDL_SetRenderDrawColor(SDL_Renderer* renderer, Uint8 r, Uint8 g, Uint8 b, Uint8 a) 該函數中的參數 a 指明了顏色的透明度。 但該值我設置了一下沒有起作用,應該需要和BlendMode一起才能起作用。這塊有誰清楚可以指定一下
  • 畫點 int SDL_RenderDrawPoint(SDL_Renderer* renderer, int x, int y)
  • 畫多個點 int SDL_RenderDrawPoints(SDL_Renderer* renderer, const SDL_Point* points, int count)
    • points: 點數組。
    • count: 點的個數。
  • 畫線 int SDL_RenderDrawLine(SDL_Renderer* renderer, int x1, int y1, int x2, int y2)
  • 畫多條線 int SDL_RenderDrawLines(SDL_Renderer* renderer, const SDL_Point* points, int count) 該函數會將使用兩個相鄰的點之間進行連線。最終畫出你想畫的圖形。如畫三角形,多邊形或圓形。
  • 繪製矩形 int SDL_RenderDrawRect(SDL_Renderer* renderer, const SDL_Rect* rect) rect: 是要繪製的一塊區域。它包括,x,y,w,h這個元素。
  • 填充矩形 int SDL_RenderFillRect(SDL_Renderer* renderer, const SDL_Rect* rect) 使用指定的色彩填充一塊矩形。
  • 填充多塊矩形 int SDL_RenderDrawRects(SDL_Renderer* renderer, const SDL_Rect* rects, int count)
    • rects: 指定的矩形數組。
    • count: 指定矩形個數。

我們來看看程式碼

下面的程式碼非常之簡單,我們在上一篇文章程式碼的基礎上增加了幾個畫線、畫矩形的API就可以了。

這裡唯一值得注意的地方是下面這個函數。

SDL_SetRenderDrawColor(renderer, 0, 0, 255, 255);

該函數是設置畫筆顏色,也就是說我們想畫出什麼顏色的圖形,只要用這個函數設置一下,再使用畫點、畫線的API就可以畫出對應顏色的圖形了。

原碼如下:

#include "SDL.h"  #include <stdio.h>    #define POINTS_COUNT 4    static SDL_Point points[POINTS_COUNT] = {      {320, 200},      {300, 240},      {340, 240},      {320, 200}  };    static SDL_Rect bigrect = {0,0,540, 380};    int main(int argc, char* argv[]) {        int flag = 1;        SDL_Window *window;                    // Declare a pointer      SDL_Renderer *renderer;        SDL_Init(SDL_INIT_VIDEO);              // Initialize SDL2        // Create an application window with the following settings:      window = SDL_CreateWindow(          "An SDL2 window",                  // window title          SDL_WINDOWPOS_UNDEFINED,           // initial x position          SDL_WINDOWPOS_UNDEFINED,           // initial y position          640,                               // width, in pixels          480,                               // height, in pixels          SDL_WINDOW_SHOWN | SDL_WINDOW_BORDERLESS// flags - see below      );        // Check that the window was successfully created      if (window == NULL) {          // In the case that the window could not be made...          printf("Could not create window: %sn", SDL_GetError());          return 1;      }        /* We must call SDL_CreateRenderer in order for draw calls to affect this window. */      renderer = SDL_CreateRenderer(window, -1, 0);        /* Select the color for drawing. It is set to red here. */      SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255);        /* Clear the entire screen to our selected color. */      SDL_RenderClear(renderer);        SDL_SetRenderDrawColor(renderer, 255, 255, 255, SDL_ALPHA_OPAQUE);      //SDL_RenderDrawLine(renderer, 100, 20, 500, 400);      SDL_RenderDrawLines(renderer, points, POINTS_COUNT);        SDL_Rect rect = {200, 300, 100, 100};      SDL_RenderDrawRect(renderer, &rect);        SDL_SetRenderDrawColor(renderer, 0, 255, 255, 255);      SDL_RenderFillRect(renderer, &rect);        SDL_SetRenderDrawColor(renderer, 0, 0, 255, 255);      SDL_RenderFillRect(renderer, &bigrect);        /* Up until now everything was drawn behind the scenes.         This will show the new, red contents of the window. */      SDL_RenderPresent(renderer);        // The window is open: could enter program loop here (see SDL_PollEvent())        SDL_Delay(3000);  // Pause execution for 3000 milliseconds, for example        //destory renderer      if (renderer) {          SDL_DestroyRenderer(renderer);      }        // Close and destroy the window      SDL_DestroyWindow(window);        // Clean up      SDL_Quit();      return 0;  }

小結

本文重點介紹了 SDL 繪製經常使用的幾個基本圖形API,通過這些API你可以構造出更加複雜的圖形。

希望本文能對你所有幫助,謝謝!