如何在 SDL 中绘制圆、弧和矢量图形？

Posted 2023-04-14

【中文标题】如何在 SDL 中绘制圆、弧和矢量图形？

【英文标题】：HOWTO draw circles, arcs and vector graphics in SDL?

【发布时间】：2016-11-15 00:03:41

【问题描述】：

（我正在使用 SDL2）

SDL is a relatively small library for "low level access to audio, keyboard, mouse, joystick, and graphics hardware via OpenGL and Direct3D" 它用于游戏开发，在我的情况下，用作简单的视听输出和鼠标+键盘输入。它不是像 GTK、Qt、wxWindows 等那样的“工具包”，但它是跨平台的。

But the only way I can find to draw a shape is with the line, rect and pixel functions.

除了使用三角函数或“圆方程”之外，我如何绘制曲线？一般的矢量图呢？

SDL 是一个合适的起点吗？还是我应该看看其他地方？

【参考方案1】：

这是上面提到的中点圆算法的一个例子。它不需要数学库，而且速度非常快。 （在大约 500 微秒内渲染）这是 Windows 使用/用于光栅化圆圈的方法。

void DrawCircle(SDL_Renderer * renderer, int32_t centreX, int32_t centreY, int32_t radius)

   const int32_t diameter = (radius * 2);

   int32_t x = (radius - 1);
   int32_t y = 0;
   int32_t tx = 1;
   int32_t ty = 1;
   int32_t error = (tx - diameter);

   while (x >= y)
   
      //  Each of the following renders an octant of the circle
      SDL_RenderDrawPoint(renderer, centreX + x, centreY - y);
      SDL_RenderDrawPoint(renderer, centreX + x, centreY + y);
      SDL_RenderDrawPoint(renderer, centreX - x, centreY - y);
      SDL_RenderDrawPoint(renderer, centreX - x, centreY + y);
      SDL_RenderDrawPoint(renderer, centreX + y, centreY - x);
      SDL_RenderDrawPoint(renderer, centreX + y, centreY + x);
      SDL_RenderDrawPoint(renderer, centreX - y, centreY - x);
      SDL_RenderDrawPoint(renderer, centreX - y, centreY + x);

      if (error <= 0)
      
         ++y;
         error += ty;
         ty += 2;
      

      if (error > 0)
      
         --x;
         tx += 2;
         error += (tx - diameter);
      
   

【参考方案2】：

如果你想写自己的画圆函数，那么我建议通过绘制像素将midpoint algorithm适配到SDL2。

曲线可以类似地完成，但会使用更多的椭圆绘制算法。

实际的矢量图形开始变得更加复杂，您可能必须找到可以渲染 SVG 文件的东西，我不确定 SDL2 是否有很多选项。

但是，如果您只想拥有可以使用的功能，我建议您直接转至 SDL2_gfx。它已经实现了更多功能供您使用。

【参考方案3】：

SDL 允许第三方库在纹理上绘制。如果 cairo 是可取的，它可以用在这样的函数中：

cairo_t*cb(cairo_t*cr)
cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);
 cairo_rectangle(cr, 10, 20, 128, 128);
 cairo_stroke(cr);
 return cr;

那么cb可以传递给这个函数：

cairo_t*cai(SDL_Window*w,SDL_Renderer*r,cairo_t*(*f)(cairo_t*))
int width, height, pitch;void *pixels;
 SDL_GetWindowSize(w, &width, &height);
 SDL_Texture*t=SDL_CreateTexture(r,SDL_PIXELFORMAT_ARGB8888,SDL_TEXTUREACCESS_STREAMING,width,height);
 SDL_LockTexture(t, NULL, &pixels, &pitch);
 cairo_surface_t *cs=cairo_image_surface_create_for_data(pixels,CAIRO_FORMAT_ARGB32,width,height,pitch);
 cairo_t*s=cairo_create(cs);
 cairo_t*fr=f(s);SDL_UnlockTexture(t);SDL_RenderCopy(r,t,NULL,NULL);SDL_RenderPresent(r);
 return fr;

【参考方案4】：

如果您想在没有第三方库的情况下制作圆形或椭圆形，请包含 math.h 并使用我编写的下面的函数。它会很好地绘制别名椭圆或圆形。在 SDL 2.0.2 上测试并且可以工作。它绘制一个象限弧，并镜像其他弧，减少对 cosf 和 sinf 的调用。

//draw one quadrant arc, and mirror the other 4 quadrants
void sdl_ellipse(SDL_Renderer* r, int x0, int y0, int radiusX, int radiusY)

    float pi  = 3.14159265358979323846264338327950288419716939937510;
    float pih = pi / 2.0; //half of pi

    //drew  28 lines with   4x4  circle with precision of 150 0ms
    //drew 132 lines with  25x14 circle with precision of 150 0ms
    //drew 152 lines with 100x50 circle with precision of 150 3ms
    const int prec = 27; // precision value; value of 1 will draw a diamond, 27 makes pretty smooth circles.
    float theta = 0;     // angle that will be increased each loop

    //starting point
    int x  = (float)radiusX * cos(theta);//start point
    int y  = (float)radiusY * sin(theta);//start point
    int x1 = x;
    int y1 = y;

    //repeat until theta >= 90;
    float step = pih/(float)prec; // amount to add to theta each time (degrees)
    for(theta=step;  theta <= pih;  theta+=step)//step through only a 90 arc (1 quadrant)
    
        //get new point location
        x1 = (float)radiusX * cosf(theta) + 0.5; //new point (+.5 is a quick rounding method)
        y1 = (float)radiusY * sinf(theta) + 0.5; //new point (+.5 is a quick rounding method)

        //draw line from previous point to new point, ONLY if point incremented
        if( (x != x1) || (y != y1) )//only draw if coordinate changed
        
            SDL_RenderDrawLine(r, x0 + x, y0 - y,    x0 + x1, y0 - y1 );//quadrant TR
            SDL_RenderDrawLine(r, x0 - x, y0 - y,    x0 - x1, y0 - y1 );//quadrant TL
            SDL_RenderDrawLine(r, x0 - x, y0 + y,    x0 - x1, y0 + y1 );//quadrant BL
            SDL_RenderDrawLine(r, x0 + x, y0 + y,    x0 + x1, y0 + y1 );//quadrant BR
        
        //save previous points
        x = x1;//save new previous point
        y = y1;//save new previous point
    
    //arc did not finish because of rounding, so finish the arc
    if(x!=0)
    
        x=0;
        SDL_RenderDrawLine(r, x0 + x, y0 - y,    x0 + x1, y0 - y1 );//quadrant TR
        SDL_RenderDrawLine(r, x0 - x, y0 - y,    x0 - x1, y0 - y1 );//quadrant TL
        SDL_RenderDrawLine(r, x0 - x, y0 + y,    x0 - x1, y0 + y1 );//quadrant BL
        SDL_RenderDrawLine(r, x0 + x, y0 + y,    x0 + x1, y0 + y1 );//quadrant BR
    

【讨论】：

如果prec 基于半径值而不是始终相同会更好吗？这将提高大椭圆的质量，但保持较小椭圆的速度。