Skip to content

Commit 13317bd

Browse files
CartuchoCartucho
committed
Tutorial Basic Geometric Drawing
1 parent c4c1e94 commit 13317bd

File tree

5 files changed

+524
-87
lines changed

5 files changed

+524
-87
lines changed

‎doc/tutorials/core/basic_geometric_drawing/basic_geometric_drawing.markdown

Lines changed: 210 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
Basic Drawing {#tutorial_basic_geometric_drawing}
22
=============
33

4+
@prev_tutorial{tutorial_basic_linear_transform}
5+
@next_tutorial{tutorial_random_generator_and_text}
6+
47
Goals
58
-----
69

710
In this tutorial you will learn how to:
811

9-
- Use @ref cv::Point to define 2D points in an image.
10-
- Use @ref cv::Scalar and why it is useful
11-
- Draw a **line** by using the OpenCV function @ref cv::line
12-
- Draw an **ellipse** by using the OpenCV function @ref cv::ellipse
13-
- Draw a **rectangle** by using the OpenCV function @ref cv::rectangle
14-
- Draw a **circle** by using the OpenCV function @ref cv::circle
15-
- Draw a **filled polygon** by using the OpenCV function @ref cv::fillPoly
12+
- Draw a **line** by using the OpenCV function **line()**
13+
- Draw an **ellipse** by using the OpenCV function **ellipse()**
14+
- Draw a **rectangle** by using the OpenCV function **rectangle()**
15+
- Draw a **circle** by using the OpenCV function **circle()**
16+
- Draw a **filled polygon** by using the OpenCV function **fillPoly()**
1617

18+
@add_toggle_cpp
1719
OpenCV Theory
1820
-------------
1921

@@ -42,86 +44,217 @@ Point pt = Point(10, 8);
4244
Scalar( a, b, c )
4345
@endcode
4446
We would be defining a BGR color such as: *Blue = a*, *Green = b* and *Red = c*
47+
@end_toggle
48+
49+
@add_toggle_java
50+
OpenCV Theory
51+
-------------
52+
53+
For this tutorial, we will heavily use two structures: @ref cv::Point and @ref cv::Scalar :
54+
55+
### Point
56+
57+
It represents a 2D point, specified by its image coordinates \f$x\f$ and \f$y\f$. We can define it as:
58+
@code{.java}
59+
Point pt = new Point();
60+
pt.x = 10;
61+
pt.y = 8;
62+
@endcode
63+
or
64+
@code{.java}
65+
Point pt = new Point(10, 8);
66+
@endcode
67+
### Scalar
68+
69+
- Represents a 4-element vector. The type Scalar is widely used in OpenCV for passing pixel
70+
values.
71+
- In this tutorial, we will use it extensively to represent BGR color values (3 parameters). It is
72+
not necessary to define the last argument if it is not going to be used.
73+
- Let's see an example, if we are asked for a color argument and we give:
74+
@code{.java}
75+
Scalar( a, b, c )
76+
@endcode
77+
We would be defining a BGR color such as: *Blue = a*, *Green = b* and *Red = c*
78+
@end_toggle
4579

4680
Code
4781
----
4882

83+
@add_toggle_cpp
4984
- This code is in your OpenCV sample folder. Otherwise you can grab it from
50-
[here](https://github.com/opencv/opencv/tree/master/samples/cpp/tutorial_code/core/Matrix/Drawing_1.cpp)
85+
[here](https://raw.githubusercontent.com/opencv/opencv/master/samples/cpp/tutorial_code/core/Matrix/Drawing_1.cpp)
5186
@include samples/cpp/tutorial_code/core/Matrix/Drawing_1.cpp
87+
@end_toggle
88+
89+
@add_toggle_java
90+
- This code is in your OpenCV sample folder. Otherwise you can grab it from
91+
[here](https://raw.githubusercontent.com/opencv/opencv/master/samples/java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java)
92+
@include samples/java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java
93+
@end_toggle
94+
95+
@add_toggle_python
96+
- This code is in your OpenCV sample folder. Otherwise you can grab it from
97+
[here](https://raw.githubusercontent.com/opencv/opencv/master/samples/python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py)
98+
@include samples/python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py
99+
@end_toggle
52100

53101
Explanation
54102
-----------
55103

56-
-# Since we plan to draw two examples (an atom and a rook), we have to create two images and two
57-
windows to display them.
58-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp create_images
59-
60-
-# We created functions to draw different geometric shapes. For instance, to draw the atom we used
61-
*MyEllipse* and *MyFilledCircle*:
62-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp draw_atom
63-
64-
-# And to draw the rook we employed *MyLine*, *rectangle* and a *MyPolygon*:
65-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp draw_rook
66-
67-
-# Let's check what is inside each of these functions:
68-
- *MyLine*
69-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp myline
70-
71-
As we can see, *MyLine* just call the function @ref cv::line , which does the following:
72-
73-
- Draw a line from Point **start** to Point **end**
74-
- The line is displayed in the image **img**
75-
- The line color is defined by **Scalar( 0, 0, 0)** which is the RGB value correspondent
76-
to **Black**
77-
- The line thickness is set to **thickness** (in this case 2)
78-
- The line is a 8-connected one (**lineType** = 8)
79-
- *MyEllipse*
80-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp myellipse
81-
82-
From the code above, we can observe that the function @ref cv::ellipse draws an ellipse such
83-
that:
84-
85-
- The ellipse is displayed in the image **img**
86-
- The ellipse center is located in the point **(w/2, w/2)** and is enclosed in a box
87-
of size **(w/4, w/16)**
88-
- The ellipse is rotated **angle** degrees
89-
- The ellipse extends an arc between **0** and **360** degrees
90-
- The color of the figure will be **Scalar( 255, 0, 0)** which means blue in BGR value.
91-
- The ellipse's **thickness** is 2.
92-
- *MyFilledCircle*
93-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp myfilledcircle
94-
95-
Similar to the ellipse function, we can observe that *circle* receives as arguments:
96-
97-
- The image where the circle will be displayed (**img**)
98-
- The center of the circle denoted as the Point **center**
99-
- The radius of the circle: **w/32**
100-
- The color of the circle: **Scalar(0, 0, 255)** which means *Red* in BGR
101-
- Since **thickness** = -1, the circle will be drawn filled.
102-
- *MyPolygon*
103-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp mypolygon
104-
105-
To draw a filled polygon we use the function @ref cv::fillPoly . We note that:
106-
107-
- The polygon will be drawn on **img**
108-
- The vertices of the polygon are the set of points in **ppt**
109-
- The total number of vertices to be drawn are **npt**
110-
- The number of polygons to be drawn is only **1**
111-
- The color of the polygon is defined by **Scalar( 255, 255, 255)**, which is the BGR
112-
value for *white*
113-
- *rectangle*
114-
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp rectangle
115-
116-
Finally we have the @ref cv::rectangle function (we did not create a special function for
117-
this guy). We note that:
118-
119-
- The rectangle will be drawn on **rook_image**
120-
- Two opposite vertices of the rectangle are defined by *\* Point( 0, 7*w/8 )*\*
121-
andPoint( w, w)*\*
122-
- The color of the rectangle is given by **Scalar(0, 255, 255)** which is the BGR value
123-
for *yellow*
124-
- Since the thickness value is given by **FILLED (-1)**, the rectangle will be filled.
104+
Since we plan to draw two examples (an atom and a rook), we have to create two images and two
105+
windows to display them.
106+
@add_toggle_cpp
107+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp create_images
108+
@end_toggle
109+
110+
@add_toggle_java
111+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java create_images
112+
@end_toggle
113+
114+
@add_toggle_python
115+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py create_images
116+
@end_toggle
117+
118+
We created functions to draw different geometric shapes. For instance, to draw the atom we used
119+
**MyEllipse** and **MyFilledCircle**:
120+
@add_toggle_cpp
121+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp draw_atom
122+
@end_toggle
123+
124+
@add_toggle_java
125+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java draw_atom
126+
@end_toggle
127+
128+
@add_toggle_python
129+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py draw_atom
130+
@end_toggle
131+
132+
And to draw the rook we employed **MyLine**, **rectangle** and a **MyPolygon**:
133+
@add_toggle_cpp
134+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp draw_rook
135+
@end_toggle
136+
137+
@add_toggle_java
138+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java draw_rook
139+
@end_toggle
140+
141+
@add_toggle_python
142+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py draw_rook
143+
@end_toggle
144+
145+
146+
Let's check what is inside each of these functions:
147+
@add_toggle_cpp
148+
@end_toggle
149+
150+
<H4>MyLine</H4>
151+
@add_toggle_cpp
152+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp my_line
153+
@end_toggle
154+
155+
@add_toggle_java
156+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java my_line
157+
@end_toggle
158+
159+
@add_toggle_python
160+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py my_line
161+
@end_toggle
162+
163+
- As we can see, **MyLine** just call the function **line()** , which does the following:
164+
- Draw a line from Point **start** to Point **end**
165+
- The line is displayed in the image **img**
166+
- The line color is defined by <B>( 0, 0, 0 )</B> which is the RGB value correspondent
167+
to **Black**
168+
- The line thickness is set to **thickness** (in this case 2)
169+
- The line is a 8-connected one (**lineType** = 8)
170+
171+
<H4>MyEllipse</H4>
172+
@add_toggle_cpp
173+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp my_ellipse
174+
@end_toggle
175+
176+
@add_toggle_java
177+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java my_ellipse
178+
@end_toggle
179+
180+
@add_toggle_python
181+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py my_ellipse
182+
@end_toggle
183+
184+
- From the code above, we can observe that the function **ellipse()** draws an ellipse such
185+
that:
186+
187+
- The ellipse is displayed in the image **img**
188+
- The ellipse center is located in the point <B>(w/2, w/2)</B> and is enclosed in a box
189+
of size <B>(w/4, w/16)</B>
190+
- The ellipse is rotated **angle** degrees
191+
- The ellipse extends an arc between **0** and **360** degrees
192+
- The color of the figure will be <B>( 255, 0, 0 )</B> which means blue in BGR value.
193+
- The ellipse's **thickness** is 2.
194+
195+
<H4>MyFilledCircle</H4>
196+
@add_toggle_cpp
197+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp my_filled_circle
198+
@end_toggle
199+
200+
@add_toggle_java
201+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java my_filled_circle
202+
@end_toggle
203+
204+
@add_toggle_python
205+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py my_filled_circle
206+
@end_toggle
207+
208+
- Similar to the ellipse function, we can observe that *circle* receives as arguments:
209+
210+
- The image where the circle will be displayed (**img**)
211+
- The center of the circle denoted as the point **center**
212+
- The radius of the circle: **w/32**
213+
- The color of the circle: <B>( 0, 0, 255 )</B> which means *Red* in BGR
214+
- Since **thickness** = -1, the circle will be drawn filled.
215+
216+
<H4>MyPolygon</H4>
217+
@add_toggle_cpp
218+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp my_polygon
219+
@end_toggle
220+
221+
@add_toggle_java
222+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java my_polygon
223+
@end_toggle
224+
225+
@add_toggle_python
226+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py my_polygon
227+
@end_toggle
228+
229+
- To draw a filled polygon we use the function **fillPoly()** . We note that:
230+
231+
- The polygon will be drawn on **img**
232+
- The vertices of the polygon are the set of points in **ppt**
233+
- The color of the polygon is defined by <B>( 255, 255, 255 )</B>, which is the BGR
234+
value for *white*
235+
236+
<H4>rectangle</H4>
237+
@add_toggle_cpp
238+
@snippet cpp/tutorial_code/core/Matrix/Drawing_1.cpp rectangle
239+
@end_toggle
240+
241+
@add_toggle_java
242+
@snippet java/tutorial_code/core/BasicGeometricDrawing/BasicGeometricDrawing.java rectangle
243+
@end_toggle
244+
245+
@add_toggle_python
246+
@snippet python/tutorial_code/core/BasicGeometricDrawing/basic_geometric_drawing.py rectangle
247+
@end_toggle
248+
249+
- Finally we have the @ref cv::rectangle function (we did not create a special function for
250+
this guy). We note that:
251+
252+
- The rectangle will be drawn on **rook_image**
253+
- Two opposite vertices of the rectangle are defined by <B>( 0, 7*w/8 )</B>
254+
and <B>( w, w )</B>
255+
- The color of the rectangle is given by <B>( 0, 255, 255 )</B> which is the BGR value
256+
for *yellow*
257+
- Since the thickness value is given by **FILLED (-1)**, the rectangle will be filled.
125258

126259
Result
127260
------

‎doc/tutorials/core/table_of_content_core.markdown

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ understanding how to manipulate the images on a pixel level.
5858

5959
- @subpage tutorial_basic_geometric_drawing
6060

61+
*Languages:* C++, Java, Python
62+
6163
*Compatibility:* \> OpenCV 2.0
6264

6365
*Author:* Ana Huamán

0 commit comments

Comments
 (0)