<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drawing Images</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="sec-drawing-text.html" title="Drawing Text">
<link rel="next" href="sec-drawing-clock-example.html" title="Example Application: Creating a Clock with Cairo">
</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 Images</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="sec-drawing-text.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-drawing-clock-example.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
</table>
<hr>
</div>
<div class="sect1" title="Drawing Images">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="sec-draw-images"></a>Drawing Images</h2></div></div></div>
<div class="sect2" title="Drawing Images with Gdk">
<div class="titlepage"><div><div><h3 class="title">
<a name="drawing-images-gdk"></a>Drawing Images with Gdk</h3></div></div></div>
<p>
There are a couple of drawing methods for putting image data into
a drawing area. <code class="methodname">draw_pixmap()</code> can copy the
contents of a <code class="classname">Gdk::Drawable</code> (the window of
a drawing area is one) into the drawing area. There is also
<code class="methodname">draw_bitmap()</code> for drawing a two-color image
into the drawing area, and <code class="methodname">draw_image()</code> for
drawing an image with more than two colors.
</p>
<p>
For all of these methods, the first argument is the
<code class="classname">Gdk::GC</code>. The second argument is the object
of the appropriate type to copy in:
<code class="classname">Gdk::Drawable</code>,
<code class="classname">Gdk::Bitmap</code>,
<code class="classname">Gdk::Image</code>. The next two arguments are the
x and y points in the image to begin copying from. Then come the
x and y points in the drawing area to copy to. The final two
arguments are the width and height of the area to copy.
</p>
<p>
There is also a method for drawing from a
<code class="classname">Gdk::Pixbuf</code>. A
<code class="classname">Gdk::Pixbuf</code> buffer is a useful wrapper
around a collection of pixels, which can be read from files, and
manipulated in various ways.
</p>
<p>
Probably the most common way of creating
<code class="classname">Gdk::Pixbuf</code>s is to use
<code class="methodname">Gdk::Pixbuf::create_from_file()</code>, which can
read an image file, such as a png file into a pixbuf ready for
rendering.
</p>
<p>
The <code class="classname">Gdk::Pixbuf</code> can be rendered with
<code class="methodname">render_to_drawable</code>, which takes quite a few
parameters. The <code class="methodname">render_to_drawable</code> is a
member of <code class="classname">Gdk::Pixbuf</code> rather than
<code class="classname">Gdk::Drawable</code>, which is unlike the
<code class="methodname">draw_*</code> functions described earlier. As such,
its first parameter is the drawable to render to. The second
parameter is still the <code class="classname">Gdk::GC</code>. The next
two parameters are the point in the pixbuf to start drawing from.
This is followed by the point in the drawable to draw it at, and
by the width and height to actually draw (which may not be the
whole image, especially if you're only responding to an expose
event for part of the window). Finally, there are the dithering
parameters. If you use Gdk::RGB_DITHER_NONE as the dither type,
then the dither offset parameters can both be 0.
</p>
<p>
Here is a small bit of code to tie it all together: (Note that
usually you wouldn't load the image every time in the expose
event handler! It's just shown here to keep it all together)
</p>
<pre class="programlisting">bool myarea::on_expose_event(GdkEventExpose* ev)
{
Glib::RefPtr<Gdk::Pixbuf> image = Gdk::Pixbuf::create_from_file("myimage.png");
image->render_to_drawable(get_window(), get_style()->get_black_gc(),
0, 0, 100, 80, image->get_width(), image->get_height(), // draw the whole image (from 0,0 to the full width,height) at 100,80 in the window
Gdk::RGB_DITHER_NONE, 0, 0);
return true;
}</pre>
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="sec-drawing-text.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-drawing-clock-example.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">Drawing Text </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"> Example Application: Creating a Clock with Cairo</td>
</tr>
</table>
</div>
</body>
</html>
