ruby-****@sourc*****
ruby-****@sourc*****
2013年 4月 3日 (水) 03:49:18 JST
-------------------------
REMOTE_ADDR = 70.49.48.128
REMOTE_HOST =
URL = http://ruby-gnome2.sourceforge.jp/hiki.cgi?tut-gtk2-dancr-rbcatut-dwc
-------------------------
@@ -82,127 +82,127 @@
puts "DEBUG: cr.target.class=#{cr.target.class}" #=> Cairo::ImageSurface
-{{br}}
-{{image_right("1203-p09-80-ssrcrgb-popped-up-issues.png")}}
-The above sample program is direct translation of the respective example found in ((<the official Cairo Tutorial|URL:http://www.cairographics.org/tutorial/>)). However, it is rather deceiving, because it hides a few important concepts, a student will discover only it they try to write this program in the Gtk/Cairo environment, where the hidden issues will pop up. For your convenience I have exposed the most obvious ones on the image here on the right side of this paragraph. However there is also the the additional hidden problem, only shows if you move the square shape away from the edges of the image. Though this can be done by simply adjusting all the x,y coordinates given as parameters to shape drawing methods, it would be counter productive to immerse ourselves in boring, repetitive and trivial programming exercises, which would additionally obfuscate the simple example program, revealing the source manipulation concepts, we are trying to grasp here. Moreover, the same t
ask can be accomplished by a single cairo method called 'translate(tx, ty)', which we will cover a number of paragraph later in
-section 12.3.4 ((<Working with Transforms|tut-gtk2-dancr-rbcatut-dwc#Working with Transforms>)).
+ {{br}}
+ {{image_right("1203-p09-80-ssrcrgb-popped-up-issues.png")}}
+ The above sample program is direct translation of the respective example found in ((<the official Cairo Tutorial|URL:http://www.cairographics.org/tutorial/>)). However, it is rather deceiving, because it hides a few important concepts, a student will discover only it they try to write this program in the Gtk/Cairo environment, where the hidden issues will pop up. For your convenience I have exposed the most obvious ones on the image here on the right side of this paragraph. However there is also the the additional hidden problem, only shows if you move the square shape away from the edges of the image. Though this can be done by simply adjusting all the x,y coordinates given as parameters to shape drawing methods, it would be counter productive to immerse ourselves in boring, repetitive and trivial programming exercises, which would additionally obfuscate the simple example program, revealing the source manipulation concepts, we are trying to grasp here. Moreover, the sa
me task can be accomplished by a single cairo method called 'translate(tx, ty)', which we will cover a number of paragraph later in section 12.3.4 ((<Working with Transforms|tut-gtk2-dancr-rbcatut-dwc#Working with Transforms>)).
-However, it is unlikely, you'd discover these problems, merely by reading and running this example as originally written in the official Cairo Tutorial without trying to convert it so it would run in some GUI environment like our Gtk/Cairo, or at least by experimenting with the original example's size/scale settings, and perhaps trying to place the drawing away from the edges of the drawing surface. This is exactly what we are going to do next.
+ However, it is unlikely, you'd discover these problems, merely by reading and running this example as originally written in the official Cairo Tutorial without trying to convert it so it would run in some GUI environment like our Gtk/Cairo, or at least by experimenting with the original example's size/scale settings, and perhaps trying to place the drawing away from the edges of the drawing surface. This is exactly what we are going to do next.
-{{br}}
-:Exposing all the issues of the 'setsourcergb' program example
- (12.3.2.1.A1){{br}}
+ {{br}}
+ :Exposing all the issues of the 'setsourcergb' program example
- Though, you may jump over the reminder of this segment directly to section 12.3.2.2 ((<Creating a Path|tut-gtk2-dancr-rbcatut-dwc#Creating a Path>)), I recommend you spare a few moments and acquaint yourself with the just announced 'issues'. By doing so you'll be better prepared and motivated to also read at first glance perhaps boring sections dealing with size/scale and drawing displacement issues.
+ (12.3.2.1.1.A1){{br}}
- The good news is, you do not have to waste your time, completely understanding the following example program (I do suggest, you run it though, just to gain confidence in the code, and indeed, in your Gtk/Cairo implementation.) Instead of reading the code below, you can only carefully study all the three images shown in this section (12.3.2.1), and try to figure out what the differences mean, and possibly, what caused them. Here are some hints: the majority of problems are related to the size of the drawing surface, as well as scale, which are only completely revealed if the drawing is not done right next to the edges of the drawing surface.
+ Though, you may jump over the reminder of this segment directly to section 12.3.2.2 ((<Creating a Path|tut-gtk2-dancr-rbcatut-dwc#Creating a Path>)), I recommend you spare a few moments and acquaint yourself with the just announced 'issues'. By doing so you'll be better prepared and motivated to also read at first glance perhaps boring sections dealing with size/scale and drawing displacement issues.
+
+ The good news is, you do not have to waste your time, completely understanding the following example program (I do suggest, you run it though, just to gain confidence in the code, and indeed, in your Gtk/Cairo implementation.) Instead of reading the code below, you can only carefully study all the three images shown in this section (12.3.2.1), and try to figure out what the differences mean, and possibly, what caused them. Here are some hints: the majority of problems are related to the size of the drawing surface, as well as scale, which are only completely revealed if the drawing is not done right next to the edges of the drawing surface.
- We will revisit this program again in the above mentioned section 12.3.4, where we will see a better and more efficient way to handle displacements in cairo code. By then you should also have a much better understanding of 'canvas' (drawing surface) size and scale related issues, which are there finally addressed in full extent.
+ We will revisit this program again in the above mentioned section 12.3.4, where we will see a better and more efficient way to handle displacements in cairo code. By then you should also have a much better understanding of 'canvas' (drawing surface) size and scale related issues, which are there finally addressed in full extent.
- {{image_right("1203-p09-80-ssrcrgb-coords-w-displacements.png")}}
+ {{image_right("1203-p09-80-ssrcrgb-coords-w-displacements.png")}}
# FILE: 1203-p09-80-04-00-ssrcrgb-coorrds-wDisplacements-dpl01.rb
-
- #!/usr/bin/env ruby
- $: << '~/work/HikiLib'
- require 'hiki2-gtk-w-cairo.rb'
- include HikiGtk
-
- class DrwAreaToImg < CairoWindow
- def draw(cr, drawing_area)
- # width, height = drawing_area.window.size
-
- # Examples are in 1.0 x 1.0 coordinate space
- cr.scale(120, 120)
-
- # Your code goes between the two dashed lines:
- # -- your code - start ----------------------------------------- -s-
- x1 = 0.0
- y1 = 0.0
- x2 = 1.5
- y2 = 1.0
- dx = 0.4
- dy = 0.3
- ctoff_thck = 0.08 # Cut-off rectangle thickness.
- fr_dist = ctoff_thck + 0.03 # Frame distance from the rectangle, 0.03 space
- # between the frame and the drawing inside.
- # Drawing code goes here
- cr.set_source_rgb(0, 0, 0)
- cr.move_to(x1 + dx, y1 + dy)
- cr.line_to(x2 + dx, y2 + dy)
- cr.move_to(x2 + dx, y1 + dy)
- cr.line_to(x1 + dx, y2 + dy)
- cr.set_line_width(0.2)
- cr.stroke
- cr.rectangle(x1 + dx, y1 + dy, x2/2, y2/2)
- cr.set_source_rgba(1, 0, 0, 0.80)
- cr.fill
- cr.rectangle(x1 + dx, y2/2 + dy, x2/2, y2/2)
- cr.set_source_rgba(0, 1, 0, 0.60)
- cr.fill
- cr.rectangle(x2/2 + dx, y1 + dy, x2/2, y2/2)
- cr.set_source_rgba(0, 0, 1, 0.40)
- cr.fill
- # Top cut-off (greenish) rectangle
- cr.rectangle(x1 + dx, y1 + dy - ctoff_thck, x2, ctoff_thck)
- cr.set_source_rgba(0, 0.7, 0, 0.20)
- cr.fill
- cr.rectangle(x1 + dx, y1 + dy - ctoff_thck, x2, ctoff_thck)
- cr.set_source_rgb(0, 1, 0)
- cr.set_line_width(0.01)
- cr.stroke
- # Left cut-off (blueish) rectangle
- cr.rectangle(x1 + dx - ctoff_thck, y1 + dy, ctoff_thck, y2)
- cr.set_source_rgba(0, 0, 0.7, 0.20)
- cr.fill
- cr.rectangle(x1 + dx - ctoff_thck, y1 + dy, ctoff_thck, y2)
- cr.set_source_rgb(0, 0, 0.7)
- cr.set_line_width(0.01)
- cr.stroke
- # Bottom cut-off (redish) rectangle
- cr.rectangle(x1 + dx, y2 + dy, x2, ctoff_thck)
- cr.set_source_rgba(0.7, 0, 0, 0.20)
- cr.fill
- cr.rectangle(x1 + dx, y2 + dy, x2, ctoff_thck)
- cr.set_source_rgb(1, 0, 0)
- cr.set_line_width(0.01)
- cr.stroke
- # Right-side cut-off (greenish) rectangle
- cr.rectangle(x2 + dx, y1 + dy, ctoff_thck, y2)
- cr.set_source_rgba(0, 0.7, 0, 0.20)
- cr.fill
- cr.rectangle(x2 + dx, y1 + dy, ctoff_thck, y2)
- cr.set_source_rgb(0, 1, 0)
- cr.set_line_width(0.01)
- cr.stroke
- # Show (black) rectangle's border
- cr.rectangle(x1 + dx, y1 + dy, x2, y2)
- cr.set_source_rgb(0, 0, 0)
- cr.set_line_width(0.017)
- cr.stroke
- # Frame the shape (orange)
- cr.rectangle(x1+dx-fr_dist, y1+dy-fr_dist, x2+2*fr_dist, y2+2*fr_dist)
- cr.set_source_rgb(1, 0.1, 0)
- cr.set_source_rgb(0.1, 0.1, 0.1)
- cr.set_line_width(0.007)
- cr.stroke
-
- end
- end
- w=DrwAreaToImg.new("Setsourcergb show all issues")
- w.show_all
- w.set_size_request(300, 200)
- Gtk.main
+ #!/usr/bin/env ruby
+ $: << '~/work/HikiLib'
+ require 'hiki2-gtk-w-cairo.rb'
+ include HikiGtk
+
+ class DrwAreaToImg < CairoWindow
+ def draw(cr, drawing_area)
+ # width, height = drawing_area.window.size
+
+ # Examples are in 1.0 x 1.0 coordinate space
+ cr.scale(120, 120)
+
+ # Your code goes between the two dashed lines:
+ # -- your code - start ----------------------------------------- -s-
+ x1 = 0.0
+ y1 = 0.0
+ x2 = 1.5
+ y2 = 1.0
+ dx = 0.4
+ dy = 0.3
+ ctoff_thck = 0.08 # cut-off thickness.
+ fr_dist = ctoff_thck + 0.03 # frame distance from the rectangle, 0.03 space
+ # between the frame and the drawing inside.
+ # Drawing code goes here
+ cr.set_source_rgb(0, 0, 0)
+ cr.move_to(x1 + dx, y1 + dy)
+ cr.line_to(x2 + dx, y2 + dy)
+ cr.move_to(x2 + dx, y1 + dy)
+ cr.line_to(x1 + dx, y2 + dy)
+ cr.set_line_width(0.2)
+ cr.stroke
+ cr.rectangle(x1 + dx, y1 + dy, x2/2, y2/2)
+ cr.set_source_rgba(1, 0, 0, 0.80)
+ cr.fill
+ cr.rectangle(x1 + dx, y2/2 + dy, x2/2, y2/2)
+ cr.set_source_rgba(0, 1, 0, 0.60)
+ cr.fill
+ cr.rectangle(x2/2 + dx, y1 + dy, x2/2, y2/2)
+ cr.set_source_rgba(0, 0, 1, 0.40)
+ cr.fill
+ # Top cut-off (greenisf) rectangle
+ cr.rectangle(x1 + dx, y1 + dy - ctoff_thck, x2, ctoff_thck)
+ cr.set_source_rgba(0, 0.7, 0, 0.20)
+ cr.fill
+ cr.rectangle(x1 + dx, y1 + dy - ctoff_thck, x2, ctoff_thck)
+ cr.set_source_rgb(0, 1, 0)
+ cr.set_line_width(0.01)
+ cr.stroke
+ # Left cut-off (blueish) rectangle
+ cr.rectangle(x1 + dx - ctoff_thck, y1 + dy, ctoff_thck, y2)
+ cr.set_source_rgba(0, 0, 0.7, 0.20)
+ cr.fill
+ cr.rectangle(x1 + dx - ctoff_thck, y1 + dy, ctoff_thck, y2)
+ cr.set_source_rgb(0, 0, 0.7)
+ cr.set_line_width(0.01)
+ cr.stroke
+ # Bottom cut-off (redish) rectangle
+ cr.rectangle(x1 + dx, y2 + dy, x2, ctoff_thck)
+ cr.set_source_rgba(0.7, 0, 0, 0.20)
+ cr.fill
+ cr.rectangle(x1 + dx, y2 + dy, x2, ctoff_thck)
+ cr.set_source_rgb(1, 0, 0)
+ cr.set_line_width(0.01)
+ cr.stroke
+ # Right-side cut-off (greenish) rectangle
+ cr.rectangle(x2 + dx, y1 + dy, ctoff_thck, y2)
+ cr.set_source_rgba(0, 0.7, 0, 0.20)
+ cr.fill
+ cr.rectangle(x2 + dx, y1 + dy, ctoff_thck, y2)
+ cr.set_source_rgb(0, 1, 0)
+ cr.set_line_width(0.01)
+ cr.stroke
+ # Show (black) rectangle's border
+ cr.rectangle(x1 + dx, y1 + dy, x2, y2)
+ cr.set_source_rgb(0, 0, 0)
+ cr.set_line_width(0.017)
+ cr.stroke
+ # Frame the shape (orange)
+ cr.rectangle(x1+dx-fr_dist, y1+dy-fr_dist, x2+2*fr_dist, y2+2*fr_dist)
+ cr.set_source_rgb(1, 0.1, 0)
+ cr.set_source_rgb(0.1, 0.1, 0.1)
+ cr.set_line_width(0.007)
+ cr.stroke
+
+ end
+ end
+
+ w=DrwAreaToImg.new("Setsourcergb show all issues")
+ w.show_all
+ w.set_size_request(300, 200)
+ Gtk.main
+ {{br}}
+ If you cared to compare the three images above and skimmed the program listings, you can appreciate the fact that the first (non-Gtk) program hides the true story. Namely, by adjusting the drawing surface size and the scale, you can achieve an automatic cut-off, so that the black ears in the corners are not visible. However, by drawing to a different surface where, the scale and the visible area are not synchronized, or moving the drawn shape away from the edges of the 'canvas', the edges of the image grow 'black' ears. You will have hard time cutting off these undesirable black ears, without either cutting and pasting (copying) out the shape you desire, or by drawing and manipulating the cut-off rectangles.
-{{br}}
-If you cared to compare the three images above and skimmed the program listings, you can appreciate the fact that the first (non-Gtk) program hides the true story. Namely, by adjusting the drawing surface size and the scale, you can achieve an automatic cut-off, so that the black ears in the corners are not visible. However, by drawing to a different surface where, the scale and the visible area are not synchronized, or moving the drawn shape away from the edges of the 'canvas', the edges of the image grow 'black' ears. You will have hard time cutting off these undesirable black ears, without either cutting and pasting (copying) out the shape you desire, or by drawing and manipulating the cut-off rectangles.