ソフトウェア設計及び演習2017

GDK2017::Cairo

GDKドローアブルとCairo

ドローアブルからサーフェス&コンテキストを作成する

cairo_t* gdk_cairo_create (GdkDrawable *drawable);

コンテキストは使い終わったら破棄すること

void cairo_destroy (cairo_t *cr);

Cairoの概念

  • サーフェス
    • 画用紙
    • サーフェスに描くことで,ドローアブルに描画する
  • パス
    • パスに開いた穴を通して,ソースの色が画用紙に移るイメージ
  • ソース
    • 絵の具
    • 単色だけではなく,画像自体をソースにすることも可能

ソース

単色

  • 光の三原色:赤(red:R)、緑(green:G)、青(blue:B)で表現
  • RGBの各成分の含まれる割合を0.0~1.0で表す
-色- -R- -G- -B-
0.0 0.0 0.0
1.0 1.0 1.0
1.0 0.0 0.0
0.0 1.0 0.0
0.0 0.0 1.0
1.0 1.0 0.0

void cairo_set_source_rgb (cairo_t *cr,
                           double red,
                           double green,
                           double blue);
void cairo_set_source_rgba (cairo_t *cr,
                            double red,
                            double green,
                            double blue,
                            double alpha);
  • cairo_set_source_rgba
    • 入門GTK+ 3版pdf:94(106)ページ
    • alphaは透明度.0.0で透明,1.0で不透明.
ソースを白に設定
  cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);

画像

  • GdkPixbuf
  • ピクスマップ
  • サーフェス
void gdk_cairo_set_source_pixbuf (cairo_t *cr,
                                  const GdkPixbuf *pixbuf,
                                  double pixbuf_x,
                                  double pixbuf_y);
void gdk_cairo_set_source_pixmap (cairo_t *cr,
                                  GdkPixmap *pixmap,
                                  double pixmap_x,
                                  double pixmap_y);
void cairo_set_source_surface (cairo_t *cr,
                               cairo_surface_t *surface,
                               double x,
                               double y);

パス

線の形状

  • 線の太さ,角や端の形状,点線
void cairo_set_line_width (cairo_t *cr,
                           double width);
void cairo_set_line_cap (cairo_t *cr,
                         cairo_line_cap_t line_cap);
void cairo_set_line_join (cairo_t *cr,
                          cairo_line_join_t line_join);
void cairo_set_dash (cairo_t *cr,
                     const double *dashes,
                     int num_dashes,
                     double offset);
太さ2で、角や端が丸い線を設定
  cairo_set_line_width(cr, 2.0);
  cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
  cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);

直線

  • cairo_move_to()で始点に移動し,cairo_line_to()で示す終点まで線を引く
  • cairo_line_to()を続ければ折れ線が引かれていく
  • 最後にcairo_stroke()を読んだ時点で実際に描かれる
void cairo_move_to (cairo_t *cr,
                    double x,
                    double y);
void cairo_line_to (cairo_t *cr,
                    double x,
                    double y);
void cairo_stroke (cairo_t *cr);

矩形

  • 塗りつぶしたいときはcairo_stroke()の代わりにcairo_fill()を呼ぶ
  • 枠を描いて,さらに塗りつぶしたいときは
    • 先に枠を描く場合,cairo_stroke_preserve(),cairo_fill()の順に
    • 先に塗りつぶす場合,cairo_fill_preserve(),cairo_stroke()の順に
    • どちらを先に描くかで結果が違う
    • _preserveを付けないと,cairo_stroke()やcairo_fill()を読んだ時点でパスは再利用できなくなる
void cairo_rectangle (cairo_t *cr,
                      double x,
                      double y,
                      double width,
                      double height);
void cairo_fill (cairo_t *cr);
  • cairo_fill
    • 入門GTK+ 3版pdf:89(101)ページ
void cairo_stroke_preserve (cairo_t *cr);
void cairo_fill_preserve (cairo_t *cr);

円弧

  • 中心と半径で表現
  • 角度は3時の位置が0で時計回り.単位はラジアン
void cairo_arc (cairo_t *cr,
                double xc,
                double yc,
                double radius,
                double angle1,
                double angle2);
  • cairo_arc
    • 入門GTK+ 3版pdf:92(104)ページ

曲線

  • 制御点が2つのベジエ曲線
void cairo_curve_to (cairo_t *cr,
                     double x1,
                     double y1,
                     double x2,
                     double y2,
                     double x3,
                     double y3);

多角形

  • 基本的にcairo_line_to()を続けて折れ線で描く
  • 途中,cairo_curve_to()で曲線も可
  • 閉じた図形にするときは,cairo_close_path()を使う
void cairo_close_path (cairo_t *cr);

塗りつぶし

  • サーフェスを全てソースで塗りつぶす
void cairo_paint (cairo_t *cr);
  • cairo_paint
    • 入門GTK+ 3版pdf:99(111)ページ
void cairo_paint_with_alpha (cairo_t *cr,
                             double alpha);

座標系の変換

  • 平行移動
void cairo_translate (cairo_t *cr,
                      double tx,
                      double ty);
  • cairo_translate
    • 入門GTK+ 3版pdf:103(115)ページ 座標系を変換する前にcairo_save()することで座標系を保存し, 処理が全て終わったらcairo_restore()すれば変換前の状態に戻すことができる
void cairo_save (cairo_t *cr);
void cairo_restore (cairo_t *cr);


最終更新日:2017/04/03 09:14:21