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

GDK2015::Cairo

archive mode

!!! GDKドローアブルとCairo
ドローアブルからサーフェス＆コンテキストを作成する

((img DandC.png))

8<
cairo_t* gdk_cairo_create (GdkDrawable *drawable);
>8
* [gdk_cairo_create|https://developer.gnome.org/gdk2/2.24/gdk2-Cairo-Interaction.html#gdk-cairo-create]
** 入門GTK+ 3版pdf：82（94）ページ

コンテキストは使い終わったら破棄すること
8<
void cairo_destroy (cairo_t *cr);
>8
* [cairo_destroy|http://cairographics.org/manual/cairo-cairo-t.html#cairo-destroy]

!! 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

((img cairo-3light.png))

8<
void cairo_set_source_rgb (cairo_t *cr,
                           double red,
                           double green,
                           double blue);
>8
* [cairo_set_source_rgb|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgb]
** 入門GTK+ 3版pdf：94（106）ページ
8<
void cairo_set_source_rgba (cairo_t *cr,
                            double red,
                            double green,
                            double blue,
                            double alpha);
>8
* [cairo_set_source_rgba|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-rgba]
** 入門GTK+ 3版pdf：94（106）ページ
** alphaは透明度．0.0で透明，1.0で不透明．

! ソースを白に設定
8<
  cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);
>8

!! 画像
* GdkPixbuf
* ピクスマップ
* サーフェス

8<
void gdk_cairo_set_source_pixbuf (cairo_t *cr,
                                  const GdkPixbuf *pixbuf,
                                  double pixbuf_x,
                                  double pixbuf_y);
>8
* [gdk_cairo_set_source_pixbuf|https://developer.gnome.org/gdk2/2.24/gdk2-Cairo-Interaction.html#gdk-cairo-set-source-pixbuf]
** 入門GTK+ 3版pdf：99（111）ページ
8<
void gdk_cairo_set_source_pixmap (cairo_t *cr,
                                  GdkPixmap *pixmap,
                                  double pixmap_x,
                                  double pixmap_y);
>8
* [gdk_cairo_set_source_pixmap|https://developer.gnome.org/gdk2/2.24/gdk2-Cairo-Interaction.html#gdk-cairo-set-source-pixmap]
8<
void cairo_set_source_surface (cairo_t *cr,
                               cairo_surface_t *surface,
                               double x,
                               double y);
>8
* [cairo_set_source_surface|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-source-surface]
** 入門GTK+ 3版pdf：101（113）ページ

!!! パス
!! 線の形状
* 線の太さ，角や端の形状，点線
8<
void cairo_set_line_width (cairo_t *cr,
                           double width);
>8
* [cairo_set_line_width|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-width]
** 入門GTK+ 3版pdf：85（97）ページ
8<
void cairo_set_line_cap (cairo_t *cr,
                         cairo_line_cap_t line_cap);
>8
* [cairo_set_line_cap|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-cap]
* [cairo_line_cap_t|http://cairographics.org/manual/cairo-cairo-t.html#cairo-line-cap-t]
** 入門GTK+ 3版pdf：85（97）ページ
8<
void cairo_set_line_join (cairo_t *cr,
                          cairo_line_join_t line_join);
>8
* [cairo_set_line_join|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-line-join]
* [cairo_line_join_t|http://cairographics.org/manual/cairo-cairo-t.html#cairo-line-join-t]
** 入門GTK+ 3版pdf：87（99）ページ
8<
void cairo_set_dash (cairo_t *cr,
                     const double *dashes,
                     int num_dashes,
                     double offset);
>8
* [cairo_set_dash|http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-dash]
** 入門GTK+ 3版pdf：88（100）ページ

! 太さ2で、角や端が丸い線を設定
8<
  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);
>8

((img gdk-line-attr.jpg))

!! 直線
* cairo_move_to()で始点に移動し，cairo_line_to()で示す終点まで線を引く
* cairo_line_to()を続ければ折れ線が引かれていく
* 最後にcairo_stroke()を読んだ時点で実際に描かれる
8<
void cairo_move_to (cairo_t *cr,
                    double x,
                    double y);
>8
* [cairo_move_to|http://cairographics.org/manual/cairo-Paths.html#cairo-move-to]
** 入門GTK+ 3版pdf：84（96）ページ
8<
void cairo_line_to (cairo_t *cr,
                    double x,
                    double y);
>8
* [cairo_line_to|http://cairographics.org/manual/cairo-Paths.html#cairo-line-to]
** 入門GTK+ 3版pdf：85（97）ページ
8<
void cairo_stroke (cairo_t *cr);
>8
* [cairo_stroke|http://cairographics.org/manual/cairo-cairo-t.html#cairo-stroke]
** 入門GTK+ 3版pdf：85（97）ページ

!! 矩形
* 塗りつぶしたいときはcairo_stroke()の代わりにcairo_fill()を呼ぶ
* 枠を描いて，さらに塗りつぶしたいときは
** 先に枠を描く場合，cairo_stroke_preserve()，cairo_fill()の順に
** 先に塗りつぶす場合，cairo_fill_preserve()，cairo_stroke()の順に
** どちらを先に描くかで結果が違う
** _preserveを付けないと，cairo_stroke()やcairo_fill()を読んだ時点でパスは再利用できなくなる
8<
void cairo_rectangle (cairo_t *cr,
                      double x,
                      double y,
                      double width,
                      double height);
>8
* [cairo_rectangle|http://cairographics.org/manual/cairo-Paths.html#cairo-rectangle]
** 入門GTK+ 3版pdf：89（101）ページ
8<
void cairo_fill (cairo_t *cr);
>8
* [cairo_fill|http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill]
** 入門GTK+ 3版pdf：89（101）ページ
8<
void cairo_stroke_preserve (cairo_t *cr);
>8
* [cairo_stroke_preserve|http://cairographics.org/manual/cairo-cairo-t.html#cairo-stroke-preserve]
** 入門GTK+ 3版pdf：85（97）ページ
8<
void cairo_fill_preserve (cairo_t *cr);
>8
* [cairo_fill_preserve|http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-preserve]
** 入門GTK+ 3版pdf：89（101）ページ

!! 円弧
* 中心と半径で表現
* 角度は3時の位置が0で時計回り．単位はラジアン
8<
void cairo_arc (cairo_t *cr,
                double xc,
                double yc,
                double radius,
                double angle1,
                double angle2);
>8
* [cairo_arc|http://cairographics.org/manual/cairo-Paths.html#cairo-arc]
** 入門GTK+ 3版pdf：92（104）ページ

!! 曲線
* 制御点が2つのベジエ曲線
8<
void cairo_curve_to (cairo_t *cr,
                     double x1,
                     double y1,
                     double x2,
                     double y2,
                     double x3,
                     double y3);
>8
* [cairo_curve_to|http://cairographics.org/manual/cairo-Paths.html#cairo-curve-to]
** 入門GTK+ 3版pdf：93（105）ページ

!! 多角形
* 基本的にcairo_line_to()を続けて折れ線で描く
* 途中，cairo_curve_to()で曲線も可
* 閉じた図形にするときは，cairo_close_path()を使う
8<
void cairo_close_path (cairo_t *cr);
>8
* [cairo_close_path|http://cairographics.org/manual/cairo-Paths.html#cairo-close-path]
** 入門GTK+ 3版pdf：90（102）ページ

!! 塗りつぶし
* サーフェスを全てソースで塗りつぶす
8<
void cairo_paint (cairo_t *cr);
>8
* [cairo_paint|http://cairographics.org/manual/cairo-cairo-t.html#cairo-paint]
** 入門GTK+ 3版pdf：99（111）ページ
8<
void cairo_paint_with_alpha (cairo_t *cr,
                             double alpha);
>8
* [cairo_paint_with_alpha|http://cairographics.org/manual/cairo-cairo-t.html#cairo-paint-with-alpha]
** 入門GTK+ 3版pdf：99（111）ページ
** 透明度付き

!! 座標系の変換
* 平行移動
8<
void cairo_translate (cairo_t *cr,
                      double tx,
                      double ty);
>8
* [cairo_translate|http://cairographics.org/manual/cairo-Transformations.html#cairo-translate]
** 入門GTK+ 3版pdf：103（115）ページ
座標系を変換する前にcairo_save()することで座標系を保存し，
処理が全て終わったらcairo_restore()すれば変換前の状態に戻すことができる
8<
void cairo_save (cairo_t *cr);
>8
* [cairo_save|http://cairographics.org/manual/cairo-cairo-t.html#cairo-save]
8<
void cairo_restore (cairo_t *cr);
>8
* [cairo_restore|http://cairographics.org/manual/cairo-cairo-t.html#cairo-restore]

Tag:

Attachment

New: append-tag

(download: 8616 bytes, at 2015/03/05 10:01:27 )
(download: 17479 bytes, at 2015/03/05 10:01:27 )
(download: 8017 bytes, at 2015/03/05 10:01:27 )
(download: 9442 bytes, at 2015/03/05 10:01:27 <frozen> )
(download: 9446 bytes, at 2015/03/05 10:01:27 <frozen> )
(download: 9354 bytes, at 2015/03/05 10:01:27 <frozen> )
(download: 9355 bytes, at 2015/03/05 10:01:27 <frozen> )

Edit

GDK2015::Cairo

Attachment

Syntax Help

URL Link

Page Link

Image or Attachment

Text Decoration

Special Letter

Headline

Itemize

Enumerate

Table

Description

Quotation

Preformatted text