web-dev-qa-db-ja.com

SDLで円、弧、ベクトルグラフィックスを描画する方法

(私はSDL2を使用しています)

SDLは、「OpenGLおよびDirect3Dを介したオーディオ、キーボード、マウス、ジョイスティック、およびグラフィックハードウェアへの低レベルアクセス」用の比較的小さなライブラリです ゲーム開発に使用され、私の場合、単純なオーディオビジュアルとして使用されます出力およびマウス+キーボード入力。 GTK、Qt、wxWindowsなどの「ツールキット」ではありませんが、クロスプラットフォームです。

しかし、私が図形を描くために見つけることができる唯一の方法は、線、四角形、およびピクセル関数を使用することです。

トリガーや「円の方程式」を使用する以外に、どうすれば曲線を描くことができますか?一般的なベクターグラフィックスはどうですか?

SDLは適切な出発点ですか、それとも他の場所を見る必要がありますか?

11
effbiae

独自の円描画関数を記述したい場合は、ピクセルを描画することで midpoint algorithm をSDL2に適合させることをお勧めします。

曲線も同様に行われますが、楕円描画アルゴリズムをさらに使用します。

実際のベクトルグラフィックスははるかに複雑になり始め、おそらくSVGファイルをレンダリングするものを見つける必要がありますが、SDL2には多くのオプションがあるかどうかはわかりません。

ただし、操作できる関数を単に使用する場合は、代わりに SDL2_gfx に直接進むことをお勧めします。これには、作業用にすでに実装されているさらに多くの機能があります。

14
davek

これは、上で参照した中点円アルゴリズムの例です。数学ライブラリを必要とせず、非常に高速です。 (約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);
      }
   }
}
14
Scotty Stephens

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;
}
2
effbiae

サードパーティのライブラリなしで円または楕円を作成したい場合は、math.hをインクルードして、以下に記述した関数を使用します。エイリアスされた楕円または円を非常にうまく描画します。 SDL 2.0.2でテストされ、動作します。 1つの象限弧を描画し、他の弧をミラーリングして、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
    }
}
1
12oclocker