<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drawing Straight Lines</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="generator" content="DocBook XSL Stylesheets V1.75.1">
<link rel="home" href="index.html" title="Programming with gtkmm">
<link rel="up" href="chapter-drawingarea.html" title="Chapter 15. The Drawing Area Widget">
<link rel="prev" href="chapter-drawingarea.html" title="Chapter 15. The Drawing Area Widget">
<link rel="next" href="sec-cairo-curved-lines.html" title="Drawing Curved Lines">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">Drawing Straight Lines</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="chapter-drawingarea.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<th width="60%" align="center">Chapter 15. The Drawing Area Widget</th>
<td width="20%" align="right"> <a accesskey="n" href="sec-cairo-curved-lines.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
</table>
<hr>
</div>
<div class="sect1" title="Drawing Straight Lines">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="sec-cairo-drawing-lines"></a>Drawing Straight Lines</h2></div></div></div>
<p>
Now that we understand the basics of the Cairo graphics library, we're
almost ready to start drawing. We'll start with the simplest of
drawing elements: the straight line. But first you need to know a
little bit about Cairo's coordinate system. The origin of the Cairo
coordinate system is located in the upper-left corner of the window
with positive x values to the right and positive y values going down.
</p>
<div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><table border="0" summary="Tip">
<tr>
<td rowspan="2" align="center" valign="top" width="25"><img alt="[Tip]" src="icons/tip.png"></td>
<th align="left">Tip</th>
</tr>
<tr><td align="left" valign="top"><p>Since the Cairo graphics library was written with support for
multiple output targets (the X window system, PNG images, OpenGL,
etc), there is a distinction between user-space and device-space
coordinates. The mapping between these two coordinate systems
defaults to one-to-one so that integer values map roughly to pixels
on the screen, but this setting can be adjusted if desired.
Sometimes it may be useful to scale the coordinates so that the
full width and height of a window both range from 0 to 1 (the 'unit
square') or some other mapping that works for your application.
this can be done with the
<code class="methodname">Cairo::Context::scale()</code> function.</p></td></tr>
</table></div>
<p>
</p>
<div class="sect2" title="Example">
<div class="titlepage"><div><div><h3 class="title">
<a name="cairo-example-lines"></a>Example</h3></div></div></div>
<p>
In this example, we'll construct a small but fully functional <span class="application">gtkmm</span>
program and draw some lines into the window. The lines are drawn by
creating a path and then stroking it. A path is created using the
functions <code class="methodname">Cairo::Context::move_to()</code> and
<code class="methodname">Cairo::Context::line_to()</code>. The function
<code class="methodname">move_to()</code> is similar to the act of lifting your
pen off of the paper and placing it somewhere else -- no line is drawn
between the point you were at and the point you moved to. To draw a
line between two points, use the <code class="methodname">line_to()</code>
function.
</p>
<p>
After you've finished creating your path, you still haven't
drawn anything visible yet. To make the path visible, you must use the
function <code class="methodname">stroke()</code> which will stroke the current
path with the line width and style specified in your
<code class="classname">Cairo::Context</code> object. After stroking, the
current path will be cleared so that you can start on your next path.
</p>
<div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><table border="0" summary="Tip">
<tr>
<td rowspan="2" align="center" valign="top" width="25"><img alt="[Tip]" src="icons/tip.png"></td>
<th align="left">Tip</th>
</tr>
<tr><td align="left" valign="top"><p>Many Cairo drawing functions have a <code class="methodname">_preserve()</code>
variant. Normally drawing functions such as
<code class="methodname">clip()</code>, <code class="methodname">fill()</code>, or
<code class="methodname">stroke()</code> will clear the current path. If you
use the <code class="methodname">_preserve()</code> variant, the current path
will be retained so that you can use the same path with the next
drawing function.</p></td></tr>
</table></div>
<div class="figure">
<a name="figure-drawingarea-lines"></a><p class="title"><b>Figure 15.1. Drawing Area - Lines</b></p>
<div class="figure-contents"><div class="screenshot"><div><img src="figures/drawingarea_lines.png" alt="Drawing Area - Lines"></div></div></div>
</div>
<br class="figure-break"><p><a class="ulink" href="http://git.gnome.org/cgit/gtkmm-documentation/tree/examples/book/drawingarea/simple" target="_top">Source Code</a></p>
<p>File: <code class="filename">myarea.h</code>
</p>
<pre class="programlisting">
#ifndef GTKMM_EXAMPLE_MYAREA_H
#define GTKMM_EXAMPLE_MYAREA_H
#include <gtkmm/drawingarea.h>
class MyArea : public Gtk::DrawingArea
{
public:
MyArea();
virtual ~MyArea();
protected:
//Override default signal handler:
virtual bool on_expose_event(GdkEventExpose* event);
};
#endif // GTKMM_EXAMPLE_MYAREA_H
</pre>
<p>File: <code class="filename">myarea.cc</code>
</p>
<pre class="programlisting">
#include "myarea.h"
#include <cairomm/context.h>
MyArea::MyArea()
{
}
MyArea::~MyArea()
{
}
bool MyArea::on_expose_event(GdkEventExpose* event)
{
// This is where we draw on the window
Glib::RefPtr<Gdk::Window> window = get_window();
if(window)
{
Gtk::Allocation allocation = get_allocation();
const int width = allocation.get_width();
const int height = allocation.get_height();
// coordinates for the center of the window
int xc, yc;
xc = width / 2;
yc = height / 2;
Cairo::RefPtr<Cairo::Context> cr = window->create_cairo_context();
cr->set_line_width(10.0);
// clip to the area indicated by the expose event so that we only redraw
// the portion of the window that needs to be redrawn
cr->rectangle(event->area.x, event->area.y,
event->area.width, event->area.height);
cr->clip();
// draw red lines out from the center of the window
cr->set_source_rgb(0.8, 0.0, 0.0);
cr->move_to(0, 0);
cr->line_to(xc, yc);
cr->line_to(0, height);
cr->move_to(xc, yc);
cr->line_to(width, yc);
cr->stroke();
}
return true;
}
</pre>
<p>File: <code class="filename">main.cc</code>
</p>
<pre class="programlisting">
#include "myarea.h"
#include <gtkmm/main.h>
#include <gtkmm/window.h>
int main(int argc, char** argv)
{
Gtk::Main kit(argc, argv);
Gtk::Window win;
win.set_title("DrawingArea");
MyArea area;
win.add(area);
area.show();
Gtk::Main::run(win);
return 0;
}
</pre>
<p>
This program contains a single class, <code class="classname">MyArea</code>,
which is a subclass of <code class="classname">Gtk::DrawingArea</code> and
contains an <code class="methodname">on_expose_event()</code> member function.
This method is called whenever the image in the drawing area needs to
be redrawn. This function is passed a pointer to a
<code class="classname">GdkEventExpose</code> structure which defines the area
that needs to be redrawn. We use these values to create a rectangle
path in Cairo (using the <code class="methodname">rectangle()</code> function) and
then <code class="methodname">clip()</code> to this path. The
<code class="methodname">clip()</code> function sets a clip region. The current
clip region affects all drawing operations by effectively masking out
any changes to the surface that are outside the current clip region.
This allows us to limit our redrawing to only the area that needs to be
redrawn.
The actual drawing code sets the color we want to use for drawing by
using <code class="methodname">set_source_rgb()</code> which takes arguments
defining the Red, Green, and Blue components of the desired color
(valid values are between 0 and 1). After setting the color, we
created a new path using the functions <code class="methodname">move_to()</code>
and <code class="methodname">line_to()</code>, and then stroked this path with
<code class="methodname">stroke()</code>.
</p>
<div class="tip" title="Drawing with relative coordinates" style="margin-left: 0.5in; margin-right: 0.5in;"><table border="0" summary="Tip: Drawing with relative coordinates">
<tr>
<td rowspan="2" align="center" valign="top" width="25"><img alt="[Tip]" src="icons/tip.png"></td>
<th align="left">Drawing with relative coordinates</th>
</tr>
<tr><td align="left" valign="top"><p>In the example above we drew everything using absolute coordinates. You can also draw using
relative coordinates. For a straight line, this is done with the
function <code class="methodname">Cairo::Context::rel_line_to()</code>.</p></td></tr>
</table></div>
</div>
<div class="sect2" title="Line styles">
<div class="titlepage"><div><div><h3 class="title">
<a name="cairo-line-styles"></a>Line styles</h3></div></div></div>
<p>
In addition to drawing basic straight lines, there are a number of
things that you can customize about a line. You've already seen
examples of setting a line's color and width, but there are others
as well.
</p>
<p>
If you've drawn a series of lines that form a path, you may
want them to join together in a certain way. Cairo offers
three different ways to join lines together: Miter, Bevel, and
Round. These are show below:
</p>
<div class="figure">
<a name="figure-cairo-joins"></a><p class="title"><b>Figure 15.2. Different join types in Cairo</b></p>
<div class="figure-contents"><div class="screenshot"><div><img src="figures/cairo_joins.png" alt="Different join types in Cairo"></div></div></div>
</div>
<br class="figure-break"><p>
The line join style is set using the function
<code class="methodname">Cairo::Context::set_line_join()</code>.
</p>
<p>
Line ends can have different styles as well. The default style
is for the line to start and stop exactly at the destination
points of the line. This is called a Butt cap. The other
options are Round (uses a round ending, with the center of the
circle at the end point) or Square (uses a squared ending, with
the center of the square at the end point). This setting is set
using the function
<code class="methodname">Cairo::Context::set_line_cap()</code>.
</p>
<p>
There are other things you can customize as well, including
creating dashed lines and other things. For more information , see
the Cairo API documentation.
</p>
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="chapter-drawingarea.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<td width="20%" align="center"><a accesskey="u" href="chapter-drawingarea.html"><img src="icons/up.png" alt="Up"></a></td>
<td width="40%" align="right"> <a accesskey="n" href="sec-cairo-curved-lines.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">Chapter 15. The Drawing Area Widget </td>
<td width="20%" align="center"><a accesskey="h" href="index.html"><img src="icons/home.png" alt="Home"></a></td>
<td width="40%" align="right" valign="top"> Drawing Curved Lines</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
345aa895e80053137c21f8693106c3a0
>
files
>
128
