ruby-****@sourc*****
ruby-****@sourc*****
2013年 3月 31日 (日) 02:08:53 JST
-------------------------
REMOTE_ADDR = 70.49.48.128
REMOTE_HOST =
URL = http://ruby-gnome2.sourceforge.jp/hiki.cgi?tut-gtk2-dancr-rbcatut
-------------------------
@@ -393,6 +393,8 @@
{{br}}
{{br}}
+
+
== Cairo's Drawing Model
(12.3.1){{br}}
@@ -455,15 +457,26 @@
:Caveat
{{image_right("dialog-warning.png")}}
- In traditional 'C' GTK Cairo implementations and in its cousins like 'gtkmm', cairo context is typically bound to different surfaces, however, currently in Ruby, other than active GTK Window surfaces are not available! (see section 12.3.0.1.1.)
+ In traditional 'C' GTK Cairo implementations and in its cousins like 'gtkmm', cairo context is typically bound to different surfaces, however, currently in Ruby, other than active GTK Window surfaces are not available! (see section 12.3.0.1.1.)
+
+
+
+# {{image_right("")}}
+# ((<|URL:http://...>))
+
+
+
{{br}}
=== Verbs
(12.3.1.2){{br}}
The reason you are using cairo in a program is to draw. Cairo internally draws with one fundamental drawing operation: the source and mask are freely placed somewhere over the destination. Then the layers are all pressed together and the paint from the source is transferred to the destination wherever the mask allows it. To that extent the following five drawing verbs, or operations, are all similar. They differ by how they construct the mask.
+
:Stroke
{{image_right("123-04-stroke.png")}}
@@ -481,13 +492,25 @@
class StrokeDemo < CairoWindow
def draw(cr, da)
#width, height = da.window.size
- # Your code comes here:
- # ---------------------
+ # Your code goes between the two dashed lines:
+ # -- your code - start -------------------- -s-
cr.scale(120, 120)
cr.line_width = 0.1
cr.set_source_rgb(0, 0, 0)
cr.rectangle(0.25, 0.25, 0.5, 0.5)
cr.stroke
+ # -- your code - end ---------------------- -e-
end
end # // EndOf class StrokeDemo
@@ -498,8 +510,21 @@
:Scale
(12.3.1.2.1.A1){{br}}
- This example introduces an unnecessary complication, that needs additional explanation, which in original Cairo tutorial, Michael defers until paragraph 12.3.4 ((<Working with Transforms|tut-gtk2-dancr-rbcatut#Working with Transforms>)) below. I found such treatment of this issue rather confusing for a beginner learning Cairo library basics. Namely, the transforms are too advanced for you to understand at this point, whereas, the scale method is far less complicated than a beginner might think after introducing it too quickly without explaining what it really means.
+ This example introduces an unnecessary complication, that needs additional explanation, which in original Cairo tutorial, Michael defers until paragraph 12.3.4 ((<Working with Transforms|tut-gtk2-dancr-rbcatut-dwc#Working with Transforms>)) below. I found such treatment of this issue rather confusing for a beginner learning Cairo library basics. Namely, the transforms are too advanced for you to understand at this point, whereas, the scale method is far less complicated than a beginner might think after introducing it too quickly without explaining what it really means.
+
Looking at the output of the above (12.3.1.2.1) example code does not reveal the important details. A much better results would be achieved, if the((*default scale*))were used. The default scale, namely is set as((*scale(1, 1).*)) However, this would require, that rectangle coordinates were given in pixels rather than in relative notation (i.e. as fractions), which calls for a short detour explaining these issues. This actually is exactly what we here are doing.
The most important thing here is understanding the parameters passed to the scale method:((*scale(sx, sy).*)) The((*sx*))and((*sy*)) parameters actually represent ((*pixels.*)) Namely,((*scale(1,1)*)) means that your working area will be measured in pixels. The size of 1 pixel depends on the device (display) you are using. Commonly one pixel is 1/75" = 0.0133". This means that if you use a 75dpi display, for instance 100 pixels will translate to 1.33" (3.378 cm). Now, if you set cairo context's scale to((*scale(2,2),*)) 100 pixels would translate to twice that, i.e. 2.66" (6.756 cm). Imagine using((*scale(100,100).*)) That would translate to 133" (337.8 cm). Unless you are very rich, I do not think, you will ever have a display capable of displaying such a large image!
@@ -512,7 +525,20 @@
(12.3.1.2.1.A2){{br}}
{{image_left("1203-p04-scale_1,1-rect_0,0,50,50-in-drwArea-w-rulers-line-colors-c-s1.png")}}
- For your convenience I also include an example using the default scale, i.e.:((*scale(1,1)*)) and pixels as x,y coordinates used in arguments to shape drawing methods. I also included the image collage, showing three different aspects of the graphics presentation. The first is the usual top Gtk window. For the second and the third, which are the images of the entire cairo drawing area, and the image only of the cr.rectangle(0, 0, 50, 50) respectively, I use GIMP graphic editor with rulers, to enlarge the relevant parts of drawing area and more clearly expose the sizes of both items. I intentionally changed Michael's rectangle's coordinates x1, y1 from (0.25, 0.25) to (0, 0), so the 0.5x0.5 square (now in pixels (50x50) is drawn directly from the 'centre' of the graphics coordinate system (in which, as you know the positive x axis runs from the top left corner of the drawing area to the right, and the positive y coordinate runs down along the left.) If you look carefu
lly, you will see, that the line thickness along x,y axis is only 1/2 of the true size (at the right and at the bottom sides of the square.) I changed the colour of the line from black (0, 0, 0) to pinkish (0.5, 0, 0) in order to better facilitate viewing of different colouration schemes in graphic editors (see the dashed line in the image above on the left).
+ For your convenience I also include an example using the default scale, i.e.:((*scale(1,1)*)) and pixels as x,y coordinates used in arguments to shape drawing methods. I also included the image collage, showing three different aspects of the graphics presentation. The first is the usual top Gtk window. For the second and the third, which are the images of the entire cairo drawing area, and the image only of the cr.rectangle(0, 0, 50, 50) respectively, I use GIMP graphic editor with rulers, to enlarge the relevant parts of drawing area and more clearly expose the sizes of both items. I intentionally changed Michael's rectangle's coordinates x1, y1 from (0.25, 0.25) to (0, 0), so the 0.5x0.5 square (now in pixels (50x50) is drawn directly from the 'centre' of the graphics coordinate system (in which, as you know the positive x axis runs from the top left corner of the drawing area to the right, and the positive y coordinate runs down along the left.) If you look carefu
lly, you will see, that the line thickness along x,y axis is only 1/2 of the true size (at the right and at the bottom sides of the square.) I changed the colour of the line from black (0, 0, 0) to pinkish (0.5, 0, 0) in order to better facilitate viewing of different colouration schemes in graphic editors (see the dashed line in the image above on the left).
{{image_right("1203-p04-scale_1,1-rect_0,0,50,50-collage.png")}}
@@ -525,14 +538,27 @@
def draw(cr, da)
#width, height = da.window.size
-
- # Your code comes here:
- # ---------------------
+ # Your code goes between the two dashed lines:
+ # -- your code - start -------------------- -s-
# cr.scale(1, 1) # scale(1, 1) is the default
cr.line_width = 1
cr.set_source_rgb(0.5, 0, 0)
cr.rectangle(0, 0, 50, 50)
cr.stroke
+ # -- your code - end ---------------------- -e-
end
end # // EndOf class DefaultScaleDemo
@@ -552,6 +565,20 @@
+
:Fill
(12.3.1.2.2){{br}}
@@ -565,7 +579,23 @@
$: << '~/work/HikiLib'
require 'hiki2-gtk-w-cairo.rb'
include HikiGtk
+
class FillDemo < CairoWindow
+
def draw(cr, da)
# width, height = da.window.size
# Your code goes between the two dashed lines:
@@ -578,10 +594,26 @@
# -- your code - end ------------------------------------------- -e-
end
end # // EndOf class FillDemo
+
window = FillDemo.new("Fill Tut. Example")
window.show_all
Gtk.main
-
@@ -592,6 +608,23 @@
{{image_right("123-06-showtext.png")}}
The ((<cairo_show_text()|URL:http://www.cairographics.org/manual/cairo-text.html#cairo-show-text>)) operation forms the mask from text. It may be easier to think of cairo_show_text() as a shortcut for creating a path with ((<cairo_text_path()|URL:http://www.cairographics.org/manual/cairo-Paths.html#cairo-text-path>)) and then using ((<cairo_fill()|URL:http://www.cairographics.org/manual/cairo-cairo-t.html#cairo-fill>)) to transfer it. Be aware cairo_show_text() caches glyphs so is much more efficient if you work with a lot of text.
+
{{br}}{{image_right("1203-p06-showtext-a.png")}}
@@ -620,6 +637,24 @@
Now, lets look at the same cairo drawing as we would write it in a Ruby Gtk/Cairo version of the "Show Text / Glyphs" example program. I took liberty to add and change a few things. If you'd like to write the contents of the cairo drawing area to a file, of course, you should employ Ruby Gtk's file manipulation behaviour, explained in section 12.2 "((<Writing the Image Of a Drawing Area Into a Pixbuf File|tut-gtk2-dancr-wr-dapxb2file>))".
+#{{br}}{{image_right("1203-p06-showtext-rb-s1.png")}}
{{br}}{{image_right("1203-p06-showtext-in-gtkCairo.png")}}
@@ -632,6 +650,25 @@
#width, height = da.window.size
# Your code goes between the two dashed lines:
# -- your code - start ----------------------------------------- -s-
+
# ------------------- clone: drawing surface creation ---- -s-
# Frame what would be the drawing area, if image_surface_create
# were available in Ruby:
@@ -648,6 +667,26 @@
)
cr.set_font_size(1.2)
cr.set_source_rgb(0, 0, 1)
+
cr_te = cr.text_extents("a")
cr.move_to(0.5 - cr_te.width / 2 - cr_te.x_bearing,
0.5 - cr_te.height / 2 - cr_te.y_bearing)
@@ -655,6 +675,27 @@
# -- your code - end ------------------------------------------- -e-
end
end # // EndOf class TextExtendsDemo
+
window = TextExtendsDemo.new("TextExtends Tut. Example")
window.show_all
Gtk.main
@@ -662,11 +683,28 @@
-
-
-
{{br}}
-
:Paint
(12.3.1.2.4){{br}}
@@ -710,8 +727,26 @@
# -- your code - end ------------------------------------------- -e-
Following is the entire program. Indeed, you have to write three versions, by modifying the paint sections as described above:
+
+ {{image_right("1203-p07-paint-w-alpha-s1.png")}}
- {{image_right("1203-p7-paint-w-alpha-s1.png")}}
#!/usr/bin/env ruby
$: << '~/work/HikiLib'
@@ -750,10 +768,29 @@
Gtk.main
+# {{image_right("")}}
+# ((<|URL:http://...>))
-
{{br}}
:Mask
(12.3.1.2.5){{br}}
@@ -764,7 +783,26 @@
:Ruby Gtk-Cairo Library Fails To Support Gradient Patterns
(12.3.1.2.5.A1){{br}}
- However, as mentioned in section 12.3.0.2 ((<Running Cairo Code From Non-Gtk Ruby Environment|tut-gtk2-dancr-rbcatut#Running Cairo Code From Non-Gtk Ruby Environment>)), we may go around this restriction, if we resort to pure Cairo library. Note, that you have to((*require 'cairo'*)) explicitly, unless you use our 'hiki2-gtk-w-cairo.rb' module which unlike the((*'gtk2'*)) requires it for you. Pay attention to how we create a non-GUI cairo context, how the size of the image is identical to our scale. Also, since we are not using the Gtk, at the end we have to make sure our 'art' work can be viewed - we save our cairo drawing surface into a file on the disk.
+ However, as mentioned in section 12.3.0.2 ((<Running Cairo Code From Non-Gtk Ruby Environment|tut-gtk2-dancr-rbcatut-intro#Running Cairo Code From Non-Gtk Ruby Environment>)), we may go around this restriction, if we resort to pure Cairo library. Note, that you have to((*require 'cairo'*)) explicitly, unless you use our 'hiki2-gtk-w-cairo.rb' module which unlike the((*'gtk2'*)) requires it for you. Pay attention to how we create a non-GUI cairo context, how the size of the image is identical to our scale. Also, since we are not using the Gtk, at the end we have to make sure our 'art' work can be viewed - we save our cairo drawing surface into a file on the disk.
Following is the complete example program using Cairo library from a non-Gtk environment:
@@ -794,7 +813,26 @@
{{br}}Let's look at a Gtk version of the same program.
- As mentioned at the beginning of this paragraph, if you use our 'hiki2-gtk-w-cairo.rb' module it includes the needed ((*require 'cairo'*)) declarative, hence, you should now have access to otherwise unsupported Cairo functionality even from your Gtk programs. Following is the above program, run from within the Ruby Gtk main-loop, indeed, I had to change it just a little bit, so we can learn few new things. Most importantly, you have to be aware of the scale. Here, we are now using the default scale ((*(cr.scale(1,1)*)), which requires that we use pixel, rather than relative coordinates (see: section 12.3.1.2.1.A1 ((<Scale|tut-gtk2-dancr-rbcatut#Scale>)).)
+ As mentioned at the beginning of this paragraph, if you use our 'hiki2-gtk-w-cairo.rb' module it includes the needed ((*require 'cairo'*)) declarative, hence, you should now have access to otherwise unsupported Cairo functionality even from your Gtk programs. Following is the above program, run from within the Ruby Gtk main-loop, indeed, I had to change it just a little bit, so we can learn few new things. Most importantly, you have to be aware of the scale. Here, we are now using the default scale ((*(cr.scale(1,1)*)), which requires that we use pixel, rather than relative coordinates (see: section 12.3.1.2.1.A1 ((<Scale|tut-gtk2-dancr-rbcatut-crdrmd#Scale>)).)
{{br}}{{image_right("1203-p08-mask-in-gtkCairo.png")}}
#!/usr/bin/env ruby
@@ -838,6 +857,30 @@
window = MaskDemo.new("Mask Tut. Example")
window.show_all
Gtk.main
+
+
+
+
+
{{br}}
{{br}}