noanoa 日々の日記

図形を描画する方法は主に2つあります。
A．Cairo::Context を使う方法
B．Gdk::Drawable を使う方法（gtk2のみ）

どちらも、最初に Gtk::DrawingArea（描画用ウィジェット）を作成して、そのウィジェット上に図形を描画していきます。
GTK3 は、A. Cairo::Context を使う方法のみになりました。

Use cairo for drawing
In GTK+ 3, the GDK drawing API (...) has been removed. All drawing in GTK+ 3 is done via cairo.

The GdkGC and GdkImage objects, as well as all the functions using them, are gone.

参考）
A．
→・(12) Drawing Area And Cairo - Ruby/GTK2 Tutorial - Ruby-GNOME2 Project Website
→・(12.3) Ruby Cairo Tutorial
　・(12.3.1) Cairo's Drawing Model
　・(12.3.2) Drawing with Cairo
→・Painting with Cairo in Ruby GTK - ZetCode
→・PyCairo tutorial  - ZetCode

B．
→・ウインドウへの直接描画(2) - Gdk/Drawable - Ruby-GNOME2 Project Website
→・Drawing Widgets - Ruby/GTK2 Tutorial - Ruby-GNOME2 Project Website
→・gtkmandel.rb - iso.enat.jp さんのブログ
→・[ruby-list/42528] Gdk/GC の foreground - ruby_list
　・[ruby-list/42529] Re/ Gdk/GC の foreground - ruby_list







　のブロック内に描画処理を記述します


1-4）Gdk::Drawable を作る
　実際に描画する準備として Drawableクラスが必要なので、DrawingArea から作成します
　※gtk3 では、signal_connect("draw") { |widget, context| ... } のブロック変数 context に Cairo::Context が代入されるので作らなくてもよい場合もあります

○Gtk::DrawingArea#window
　DrawingArea が持つ Gdk::Window（Gtkではなく、Gdk）を呼び出します
　Gdk::Window は Gdk::Drawableクラスを継承しているので、Drawableの持つ描画メソッドが使えます
　※ただし、signal_connect のブロック内でないと作れないようです
　

2．描画する

2-A-2）図形を描く
上述（1-3)）したように
Gtk::DrawingArea#signal_connect のブロック内に記述します

○Cairo::Context#set_source_rgb(r, g, b)
○Cairo::Context#set_source_rgba(r, g, b, a)
　色の設定をする
　・red, green, blue (, alpha)；0-1.0

○Cairo::Context#set_line_width(width)
　線の太さを設定する（1.0 が標準）

○Cairo::Context#scale(x_scale, y_scale)
　座標の拡大率を設定する（1.0で等倍）

○Cairo::Context#move_to(x, y)
　点を打つ座標を指定する

○Cairo::Context#line_to(x, y)
　前の座標から（x, y）までの直線を引く（経路を）指定をする

○Cairo::Context#stroke
　指定された経路を線で描く

○Cairo::Context#rectangle(x1, y1, x2, y2)
　四角を描く

○Cairo::Context#arc(x, y, radius, starting_point, ending_point)
　円弧を描く
　・中心；x, y
　・半径；radius
　・描画開始点；starting_point（角度；ラジアン 0 〜 2*Math::PI）
　・描画終了点；ending_point

○Cairo::Context#fill
　図形内部に色を塗る

○Cairo::Context#paint
　Gtk::DrawingArea 全体に色を塗る
　※ gtk3では、Gtk::DrawingArea の背景色の設定はこれを使います（→ 前述 1-2) 参照）

○Cairo::Context#destroy
　Cairo::Context を廃棄します
　※ gtk2では、macOSの場合；
　　Gtk::DrawingArea.signal_connect("expose_event") do |widget, event|　　の描画処理のブロックの最後に Cairo::Context#destroy をしないと、
　　終了時に毎回クラッシュレポートが表示されます
→・[gtk2] "DrawingArea + Cairo" on macOS; crash reports emerge ・ Issue #1081 ・ ruby-gnome2/ruby-gnome2 - GitHub


※ 注意）→・HiDPI/Retina display support and gtk3-port branch? (2014) — GIMP Development — gimpusers.com

require 'gtk2'

window = Gtk::Window.new

window.set_size_request(400, 300)

cyan   = Gdk::Color.new(0, 65535, 65535)  # RGB; 0-65535

yellow = Gdk::Color.parse('#FFFF00')      # RGB; 00-FF (parseを使った作り方)

drawing_area = Gtk::DrawingArea.new

drawing_area.set_size_request(290,160)

drawing_area.modify_bg(:normal, cyan)

drawing_area.signal_connect("expose_event") do |widget, event|

  context = widget.window.create_cairo_context

  context.set_source_rgb(1.0, 0, 0)  # RGB; 0-1.0

  context.set_line_width(1)

  context.move_to(  0,  10)

  context.line_to( 25,  10)

  context.line_to( 37,   0)

  context.line_to( 49,  10)

  context.line_to(289,  10)

  context.line_to(289, 159)

  context.line_to(  0, 159)

  context.line_to(  0,  10)

  context.stroke

  context.set_source_rgb(1.0, 0, 1.0)

  context.arc(20, 40, 10, 0, 2 * Math::PI)

  context.fill
  context.destroy    # macOSの場合、終了時にクラッシュレポートが出るので必要

end

text_area = Gtk::TextView.new

text_area.set_size_request(150, 50)

text_area.buffer.text = 'Hello World!'

text_area.modify_base(:normal, yellow)

fixed = Gtk::Fixed.new

fixed.put(drawing_area, 20, 20)

fixed.put(text_area, 80, 80)

window.add(fixed)

window.show_all

window.signal_connect("destroy") { Gtk.main_quit }

Gtk.main

# macOS Retina Display だと拡大表示される

require 'gtk3'

window = Gtk::Window.new

window.set_size_request(400, 300)

yellow = Gdk::RGBA::new(1.0, 1.0,   0, 1.0)  # RGBA; 0-1.0

drawing_area = Gtk::DrawingArea.new

drawing_area.set_size_request(290,160)

drawing_area.signal_connect("draw") do |widget, context|

  context.set_source_rgb(0, 1.0, 1.0)  # RGB; 0-1.0

  context.paint                        # 背景色を塗る

  context.set_source_rgb(1.0, 0, 0)

  context.set_line_width(1)

  context.move_to(  0,  10)

  context.line_to( 25,  10)

  context.line_to( 37,   0)

  context.line_to( 49,  10)

  context.line_to(289,  10)

  context.line_to(289, 159)

  context.line_to(  0, 159)

  context.line_to(  0,  10)

  context.stroke

  context.set_source_rgb(1.0, 0, 1.0)

  context.arc(20, 40, 10, 0, 2 * Math::PI)

  context.fill

end

text_area = Gtk::TextView.new

text_area.set_size_request(150, 50)

text_area.buffer.text = 'Hello World!'

text_area.override_background_color(:normal, yellow)

fixed = Gtk::Fixed.new

fixed.put(drawing_area, 20, 20)

fixed.put(text_area, 80, 80)

window.add(fixed)

window.show_all

window.signal_connect("destroy") { Gtk.main_quit }

Gtk.main

require 'gtk2'

window = Gtk::Window.new

window.set_size_request(400, 300)

cyan    = Gdk::Color.new(    0, 65535, 65535)  # RGB; 0-65535

red     = Gdk::Color.new(65535,     0,     0)

magenta = Gdk::Color.new(65535,    0, 65535)

yellow  = Gdk::Color.parse('#FFFF00')          # RGB; 00-FF (parseを使った作り方)

drawing_area = Gtk::DrawingArea.new

drawing_area.set_size_request(290,160)

drawing_area.modify_bg(:normal, cyan)

drawing_area.signal_connect("expose_event") do |widget, event|

  gc = Gdk::GC.new(widget.window)         # signal_connectのループ内でないとnilになる

  #gc = widget.style.fg_gc(widget.state)  # これでも可

  gc.set_rgb_fg_color(red) 

  widget.window.draw_lines(gc,

      [[  0,  10],

       [ 25,  10],

       [ 37,   0],

       [ 49,  10],

       [289,  10],

       [289, 159],

       [  0, 159],

       [  0,  10]])

  gc.rgb_fg_color = magenta

  widget.window.draw_arc(gc, true, 10, 30, 20, 20, 0, 64 * 360)

end

text_area = Gtk::TextView.new

text_area.set_size_request(150, 50)

text_area.buffer.text = 'Hello World!'

text_area.modify_base(:normal, yellow)

fixed = Gtk::Fixed.new

fixed.put(drawing_area, 20, 20)

fixed.put(text_area, 80, 80)

window.add(fixed)

window.show_all

window.signal_connect("destroy") { Gtk.main_quit }

Gtk.main