SDL 開發實戰（三）：使用 SDL 繪制基本圖形

在上文 SDL 開發實戰（二）：SDL 2.0 核心 API 解析 我們講解了SDL最核心的API，並結合Hello World代碼了解了SDL渲染畫面的基本原理。

本文我們來講一下，如何使用SDL的API繪制基本的圖形。

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

0、設置畫筆的顏色

設置畫筆顏色是繪制圖形的首要步驟，函數方法為SDL_SetRenderDrawColor，下面是函數的原型：

int SDL_SetRenderDrawColor(SDL_Renderer* renderer,   // 渲染器
                         Uint8   r,     // 紅
                         Uint8   g,     // 綠
                         Uint8   b,     // 藍
                         Uint8   a)     // 透明值

設置好畫筆的顏色后，我們就可以開始繪制了我們想要的圖形了，如果需要修改繪制顏色的色值，可以再次調用此函數即可。

1. 繪制一個點

我們可以使用SDL_RenderDrawPoint函數可以繪制一個點，下面是函數的原型：

int SDL_RenderDrawPoint(SDL_Renderer* renderer, int x, int y)

渲染器為參數renderer，繪制的坐標為x，y。

2. 繪制多個點

我們可以使用SDL_RenderDrawPoints函數繪制多個點，下面是函數的原型：

int SDL_RenderDrawPoints(SDL_Renderer* renderer, const SDL_Point* points, int count)

其中points為繪制的點的數組，count為要繪制的點的個數。

3. 繪制直線

我們可以使用SDL_RenderDrawLine函數繪制一條之間，下面是函數的原型：

int SDL_RenderDrawLine(SDL_Renderer* renderer,  // 渲染器
                     int    x1,    // 端點1的x坐標
                     int    y1,    // 端點1的y坐標
                     int    x2,    // 段點2的x坐標
                     int    y2)    // 端點2的y坐標

渲染器為參數renderer，兩個端點的坐標為（x1，y1）和（x2，y2）。

4. 繪制多條線

我們可以使用SDL_RenderDrawLines函數繪制多條直線，下面是函數的原型：

int SDL_RenderDrawLines(SDL_Renderer* renderer, const SDL_Point* points, int count)

該函數會將使用兩個相鄰的點之間進行連線。最終畫出你想畫的圖形。如畫三角形，多邊形或圓形。

5. 繪制矩形

我們可以使用SDL_RenderDrawRect函數繪制矩形，下面是函數的原型：

int SDL_RenderDrawRect(SDL_Renderer* renderer, const SDL_Rect* rect)

rect: 是要繪制的一塊區域。它包括x,y,w,h這些元素。

6. 填充矩形

我們可以使用SDL_RenderFillRect函數繪制矩形，下面是函數的原型：

int SDL_RenderFillRect(SDL_Renderer* renderer, const SDL_Rect* rect)

使用指定的色彩填充一塊矩形。rect: 是要繪制的一塊區域，包括x,y,w,h這些元素。

7. 填充多塊矩形

我們可以使用SDL_RenderFillRect函數繪制矩形，下面是函數的原型：

int SDL_RenderDrawRects(SDL_Renderer* renderer, const SDL_Rect* rects, int count)

其中 rects 為矩形數組，count為矩形個數。

 

實戰

代碼：

// SDL.cpp : 此文件包含 "main" 函數。程序執行將在此處開始並結束。
//

#include "pch.h"
#include <iostream>

extern "C" {
#include "SDL.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(
        "SDL2 Draw 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 // 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: %s\n", 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, 0, 255, 0, 255);

    /* Clear the entire screen to our selected color. */
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(renderer, 255, 0, 0, SDL_ALPHA_OPAQUE);
    
    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(5000);  // Pause execution for 5000 milliseconds, for example

    //destory renderer
    if (renderer) {
        SDL_DestroyRenderer(renderer);
    }

    // Close and destroy the window
    SDL_DestroyWindow(window);

    // Clean up
    SDL_Quit();
    return 0;

}

運行效果：