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

Myth丶恋晨 2022-12-08 12:48 299阅读 0赞

# 几何图形渲染 #

除了新的纹理API，SDL还有新的基元渲染调用作为其[渲染API][API]的一部分。因此，如果你需要渲染一些基本的形状，而你又不想为它们创建额外的图形，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][SDL_RenderFillRect]来绘制矩形。

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

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

早在代数课上，你可能学过笛卡尔坐标系:  
![7da90c8ea7a27bc47d60b2023bd37dc3.png][]  
其中x轴指向右侧，y轴指向上方，原点在左下角。

SDL使用不同的坐标系:  
![e9a0c5c29b0777721f47e88e1a3d62f7.png][]  
x轴仍然指向右边，但y轴指向下方，原点在左上方。

所以当我们渲染实体矩形时，坐标系的功能是这样的:  
![2713f9659f4c4065cee249d71e4d090b.png][]  
还有一点要知道的是，SDL从左上角渲染矩形、表面和纹理。

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

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

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

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

[原文链接][Link 2]

**关注我的公众号：编程之路从0到1**  
![编程之路从0到1][0_1]

[API]: https://wiki.libsdl.org/CategoryRender
[SDL_RenderFillRect]: https://wiki.libsdl.org/SDL_RenderFillRect
[SDL_RenderDrawRect]: https://wiki.libsdl.org/SDL_RenderDrawRect
[7da90c8ea7a27bc47d60b2023bd37dc3.png]: /images/20221123/0daa1c5cab4c476c981eff3ee7d56c8a.png
[e9a0c5c29b0777721f47e88e1a3d62f7.png]: /images/20221123/8800d09bcac94f158c1ec964186d1073.png
[2713f9659f4c4065cee249d71e4d090b.png]: /images/20221123/3972f7fecf5b437bb7f653cef064e819.png
[SDL_RenderDrawLine]: https://wiki.libsdl.org/SDL_RenderDrawLine
[SDL_RenderDrawPoint]: https://wiki.libsdl.org/SDL_RenderDrawPoint
[Link 1]: http://www.lazyfoo.net/tutorials/SDL/08_geometry_rendering/08_geometry_rendering.zip
[Link 2]: http://www.lazyfoo.net/tutorials/SDL/08_geometry_rendering/index.php
[0_1]: /images/20221123/5a1f21a564e440228517f3886f3cfec3.png