[翻译]Ruby GTK教程6——Cairo

使用Cairo绘制

这部分的Ruby GTK教程,我们将使用Cairo库进行一些绘制。


Cairo是一个用于创建2D矢量图像的库。我们可以用它来绘制自己的控件、图表或者各种效果或动画。


颜色


在第一个会例子,我们将介绍颜色。颜色是一个代表了红、绿和蓝(RGB)强度值的对象。Cairo的RGB有效值范围为0到1。


#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program shows how to work
# with colors in Cairo
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require ‘gtk2’


class RubyApp < Gtk::Window

def initialize
super

set_title “Colors”
signal_connect “destroy” do
Gtk.main_quit
end

init_ui

set_default_size 360, 100
set_window_position Gtk::Window::POS_CENTER

show_all
end

def init_ui

@darea = Gtk::DrawingArea.new

@darea.signal_connect “expose-event” do
on_expose
end

add(@darea)

end

def on_expose

cr = @darea.window.create_cairo_context
draw_colors cr

end

def draw_colors cr

cr.set_source_rgb 0.2, 0.23, 0.9
cr.rectangle 10, 15, 90, 60
cr.fill

cr.set_source_rgb 0.9, 0.1, 0.1
cr.rectangle 130, 15, 90, 60
cr.fill

cr.set_source_rgb 0.4, 0.9, 0.4
cr.rectangle 250, 15, 90, 60
cr.fill
end
end

Gtk.init
window = RubyApp.new
Gtk.main

这个例子中我们绘制了三个矩形并且用三种不同的颜色填充。


@darea = Gtk::DrawingArea.new

我们将在DrawingArea控件是进行绘制操作。


@darea.signal_connect “expose-event” do
on_expose
end

当窗口需要重绘时expose-event事件将触发。对这个事件的响应中我们调用了on_expose方法。


cr = @darea.window.create_cairo_context

从GdkWindow创建cairo上下文对象。这个上下文是我们将要进行所有绘制的对象。


draw_colors cr

实际的绘制委托给draw_colors方法。


cr.set_source_rgb 0.2, 0.23, 0.9

set_source_rgb方法是设置cairo上下文的颜色。这个方法的三个参数是颜色的强度值。


cr.rectangle 10, 15, 90, 60

绘制一个矩形。前两个参数是矩形左上角的x、y坐标。后两个参数是矩形的宽和高。


cr.fill

使用当前的颜色填充矩形。


image1

图片:颜色


基本形状


下一个例子在窗口上绘制一些基本形状。


#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This code example draws basic shapes
# with the Cairo library
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require ‘gtk2’


class RubyApp < Gtk::Window

def initialize
super

set_title “Basic shapes”
signal_connect “destroy” do
Gtk.main_quit
end

init_ui

set_default_size 390, 240
set_window_position Gtk::Window::POS_CENTER

show_all
end

def init_ui

@darea = Gtk::DrawingArea.new

@darea.signal_connect “expose-event” do
on_expose
end

add(@darea)
end

def on_expose

cr = @darea.window.create_cairo_context
draw_shapes cr
end

def draw_shapes cr

cr.set_source_rgb 0.6, 0.6, 0.6

cr.rectangle 20, 20, 120, 80
cr.rectangle 180, 20, 80, 80
cr.fill

cr.arc 330, 60, 40, 0, 2Math::PI
cr.fill

cr.arc 90, 160, 40, Math::PI/4, Math::PI
cr.fill

cr.translate 220, 180
cr.scale 1, 0.7
cr.arc 0, 0, 50, 0, 2
Math::PI
cr.fill
end
end

Gtk.init
window = RubyApp.new
Gtk.main

这个例子我们将创建一个矩形、方形、圆形、弧形和椭圆形。我们将轮廓绘为蓝色,内部为白色。


cr.rectangle 20, 20, 120, 80
cr.rectangle 180, 20, 80, 80
cr.fill

这几行绘制了一个矩形和一个方形。


cr.arc 330, 60, 40, 0, 2Math::PI
cr.fill

arc方法绘制一个全圆。


cr.translate 220, 180
cr.scale 1, 0.7
cr.arc 0, 0, 50, 0, 2Math::PI
cr.fill

translate方法将对象移动到指定的点。如果我们想要绘制椭圆,我们需要进行一些缩放。这里scale方法将y轴收缩。


image2

图片:基本形状


透明矩形


透明度是透过实体的可见度。最简单的理解可以把它想象成玻璃或者水。光线可以透过玻璃,这样我们就可以看到玻璃后的物体。


在计算机图像中,我们可以使用透明混合实现透明度。透明混合处理图片和背景的组合,显示部透明。作品处理使用了阿尔法通道。


#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program shows transparent
# rectangles using Cairo
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require ‘gtk2’


class RubyApp < Gtk::Window

def initialize
super

set_title “Transparent rectangles”
signal_connect “destroy” do
Gtk.main_quit
end

init_ui

set_default_size 590, 90
set_window_position Gtk::Window::POS_CENTER

show_all
end

def init_ui

@darea = Gtk::DrawingArea.new

@darea.signal_connect “expose-event” do
on_expose
end

add(@darea)

end

def on_expose

cr = @darea.window.create_cairo_context

for i in (1..10)
cr.set_source_rgba 0, 0, 1, i0.1
cr.rectangle 50
i, 20, 40, 40
cr.fill
end
end
end

Gtk.init
window = RubyApp.new
Gtk.main

这个例子我们使用不同等级透明度绘制了10个矩形。


cr.set_source_rgba 0, 0, 1, i0.1

set_source_rgba方法是最后一个参数是alpha透明度。


image3

图片:透明矩形


甜甜圈


接下来的例子我们通过旋转一堆椭圆来创建一个复杂的形状。


#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program creates a donut
# with Cairo library
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require ‘gtk2’


class RubyApp < Gtk::Window

def initialize
super

set_title “Donut”
signal_connect “destroy” do
Gtk.main_quit
end

init_ui

set_default_size 350, 250
set_window_position Gtk::Window::POS_CENTER

show_all
end

def init_ui

@darea = Gtk::DrawingArea.new

@darea.signal_connect “expose-event” do
on_expose
end

add(@darea)

end

def on_expose

cr = @darea.window.create_cairo_context
cr.set_line_width 0.5

w = allocation.width
h = allocation.height

cr.translate w/2, h/2
cr.arc 0, 0, 120, 0, 2Math::PI
cr.stroke

for i in (1..36)
cr.save
cr.rotate iMath::PI/36
cr.scale 0.3, 1
cr.arc 0, 0, 120, 0, 2
Math::PI
cr.restore
cr.stroke
end
end
end

Gtk.init
window = RubyApp.new
Gtk.main

这个例子我们创建了一个甜甜圈。它的形状与饼干相似,因此取名为甜甜圈(donut)。


cr.translate w/2, h/2
cr.arc 0, 0, 120, 0, 2Math::PI
cr.stroke

在开始只是一个椭圆。


for i in (1..36)
cr.save
cr.rotate iMath::PI/36
cr.scale 0.3, 1
cr.arc 0, 0, 120, 0, 2*Math::PI
cr.restore
cr.stroke
end

经过一些旋转后变成了甜甜圈。


image4

图片:Donut


绘制文本


下一个例子我们在窗口上绘制一些文本。


#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program draws text
# using Cairo
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require ‘gtk2’


class RubyApp < Gtk::Window

def initialize
super

set_title “Soulmate”
signal_connect “destroy” do
Gtk.main_quit
end

init_ui

set_default_size 370, 240
set_window_position Gtk::Window::POS_CENTER

show_all
end

def init_ui

@darea = Gtk::DrawingArea.new

@darea.signal_connect “expose-event” do
on_expose
end

add(@darea)

end

def on_expose

cr = @darea.window.create_cairo_context

cr.set_source_rgb 0.1, 0.1, 0.1

cr.select_font_face “Purisa”, Cairo::FONT_SLANT_NORMAL,
Cairo::FONT_WEIGHT_NORMAL
cr.set_font_size 13

cr.move_to 20, 30
cr.show_text “Most relationships seem so transitory”
cr.move_to 20, 60
cr.show_text “They’re all good but not the permanent one”
cr.move_to 20, 120
cr.show_text “Who doesn’t long for someone to hold”
cr.move_to 20, 150
cr.show_text “Who knows how to love without being told”
cr.move_to 20, 180
cr.show_text “Somebody tell me why I’m on my own”
cr.move_to 20, 210
cr.show_text “If there’s a soulmate for everyone”
end
end

Gtk.init
window = RubyApp.new
Gtk.main

我们显示了Natasha Bedingfields Soulmate歌的部分歌词。


cr.select_font_face “Purisa”, Cairo::FONT_SLANT_NORMAL,
Cairo::FONT_WEIGHT_NORMAL

这里我们指定我们使用的字体。


cr.set_font_size 13

我们指定字体的大小。


cr.move_to 20, 30

移动到开始绘制文本的坐标。


cr.show_text “Most relationships seem so transitory”

show_text方法在窗口上绘制文本。


image5

图片: Soulmate


这章的Ruby GTK教程我们使用Cairo库进行绘制。




原文地址: http://zetcode.com/gui/rubygtk/cairo/

翻译:龙昌 admin@longchangjin.cn