（译）SDL编程入门（8）几何图形渲染

arcticfox

发布于 2020-09-27 10:18:31

1.4K0

发布于 2020-09-27 10:18:31

几何图形渲染

除了新的纹理API，SDL还有新的基元渲染调用作为其渲染API[1]的一部分。因此，如果你需要渲染一些基本的形状，而你又不想为它们创建额外的图形，SDL可以为你省力。

bool loadMedia(){
    //加载成功标志
    bool success = true;

    //没有任何东西可加载
    return success;
}

所以在我们的媒体加载功能中可以看到，我们没有加载媒体。SDL的基元渲染允许您在不加载特殊图形的情况下渲染形状。

             //While application is running
            while( !quit )
            {
                //Handle events on queue
                while( SDL_PollEvent( &e ) != 0 )
                {
                    //User requests quit
                    if( e.type == SDL_QUIT )
                    {
                        quit = true;
                    }
                }

                //Clear screen
                SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF, 0xFF );
                SDL_RenderClear( gRenderer );
                //渲染红色填充四边形
                SDL_Rect fillRect = { SCREEN_WIDTH / 4, SCREEN_HEIGHT / 4, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2 };
                SDL_SetRenderDrawColor( gRenderer, 0xFF, 0x00, 0x00, 0xFF );        
                SDL_RenderFillRect( gRenderer, &fillRect );
                //渲染绿色轮廓的四边形
                SDL_Rect outlineRect = { SCREEN_WIDTH / 6, SCREEN_HEIGHT / 6, SCREEN_WIDTH * 2 / 3, SCREEN_HEIGHT * 2 / 3 };
                SDL_SetRenderDrawColor( gRenderer, 0x00, 0xFF, 0x00, 0xFF );        
                SDL_RenderDrawRect( gRenderer, &outlineRect );
                //画蓝色横线
                SDL_SetRenderDrawColor( gRenderer, 0x00, 0x00, 0xFF, 0xFF );        
                SDL_RenderDrawLine( gRenderer, 0, SCREEN_HEIGHT / 2, SCREEN_WIDTH, SCREEN_HEIGHT / 2 );
                 //画出黄点的垂直线
                SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0x00, 0xFF );
                for( int i = 0; i < SCREEN_HEIGHT; i += 4 )
                {
                    SDL_RenderDrawPoint( gRenderer, SCREEN_WIDTH / 2, i );
                }

                //更新屏幕
                SDL_RenderPresent( gRenderer );
            }

在主循环的顶部，我们像之前一样处理退出事件并清除屏幕。另外，请注意，我们在每一帧都用SDL_SetRenderDrawColor将清除颜色设置为白色，而不是在初始化函数中设置一次。我们将在主循环结束时介绍为什么会发生这种情况。

我们要画的第一个基元是填充矩形，也就是一个实心矩形。

首先我们定义一个矩形来定义我们要用颜色填充的区域。如果你从来没有见过这样初始化的结构，知道组成SDL rect的成员变量是x、y、w和h，分别代表x位置、y位置、宽度和高度。你可以按照变量在结构中的顺序给它一个数组来初始化一个结构。这里我们设置的矩形在x方向上的宽度为屏幕宽度的四分之一，在y方向上的高度为屏幕高度的四分之一，而且宽度/高度为屏幕的一半。

定义好矩形区域后，我们用SDL_SetRenderDrawColor设置渲染颜色。这个函数接收了我们使用的窗口的渲染器和我们要渲染的颜色的RGBA值。R是红色组件，G是绿色，B是蓝色，A是alpha。Alpha控制某物的不透明程度，我们将在透明度教程中介绍。这些值的范围从0到255(或如上图所示的FF十六进制)，并混合在一起以创建你在屏幕上看到的所有颜色。这个对SDL_SetRenderDrawColor的调用将绘图颜色设置为不透明的红色。

设置好矩形和颜色后，调用SDL_RenderFillRect[2]来绘制矩形。

你也可以使用SDL_RenderDrawRect[3]绘制一个空心的矩形轮廓。正如你所看到的那样，它的工作原理和一个实心填充的矩形差不多，因为这段代码和上面的代码几乎一样。主要的区别是这个矩形的大小是屏幕的三分之二，而且我们这里使用的颜色是绿色。

另外，如果你搞乱了矩形的位置，你可能会发现y坐标有些奇怪。把y坐标变大，它就会向下，把y坐标变小，它就会向上。这是因为SDL和许多2D渲染API使用了不同的坐标系统。

早在代数课上，你可能学过笛卡尔坐标系:

其中x轴指向右侧，y轴指向上方，原点在左下角。

SDL使用不同的坐标系:

x轴仍然指向右边，但y轴指向下方，原点在左上方。

所以当我们渲染实体矩形时，坐标系的功能是这样的:

还有一点要知道的是，SDL从左上角渲染矩形、表面和纹理。

下面是使用SDL_RenderDrawLine[4]绘制一条像素细线的代码。首先我们将颜色设置为蓝色，然后给渲染调用提供起始x/y位置和结束x/y位置。这些位置会使它在屏幕上水平直行。

我们渲染的最后一点几何体是使用 SDL_RenderDrawPoint[5] 渲染的一系列点。我们只是取一组点，从上到下绘制它们。再次注意y坐标和倒置的y轴。当我们完成所有几何体的绘制后，我们更新屏幕。

请注意对 SDL_SetRenderDrawColor[6] 的调用。我们使用了255个红色和255个绿色，它们组合在一起就变成了黄色。还记得循环顶部对 SDL_SetRenderDrawColor 的调用吗？如果没有这个调用，那么屏幕就会用上次用 SDL_SetRenderDrawColor 设置的任何颜色来清除，在本例中就会产生黄色背景。

在 这里[7]下载本教程的媒体和源代码。

原文链接[8]