Tracé de droites

Maintenant que nous connaissons les bases de la bibliothèque graphique Cairo, nous voilà prêts pour débuter un tracé. Commençons par le plus simple des éléments de tracé : la droite. Mais d'abord, il est nécessaire d'en savoir un peu plus sur le système de coordonnées de Cairo. L'origine du système de coordonnées de Cairo se situe dans l'angle supérieur gauche de la fenêtre avec les valeurs positives de x vers la droite et de y vers le bas.

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 Cairo::Context::scale() function.

XVII.II.I. Exemple

Dans cet exemple, nous allons écrire un programme gtkmm petit, mais pleinement fonctionnel, et tracer quelques lignes dans la fenêtre. Les lignes sont dessinées en créant un chemin, puis en le traçant. Un tracé est créé avec les fonctions Cairo::Context::move_to() et Cairo::Context::line_to(). La fonction move_to() est semblable à l'action de lever la pointe de votre crayon au dessus du papier et de la placer quelque part ailleurs — aucune ligne n'est tracée entre le point où vous étiez et celui où vous vous êtes déplacé. Pour tracer une ligne entre deux points, utilisez la fonction line_to().

Après avoir terminé la création de votre chemin, vous n'avez encore dessiné rien de visible. Pour rendre le chemin visible, il faut utiliser la fonction stroke() qui dessine le tracé actuel avec une ligne d'épaisseur et de style précisés dans l'objet Cairo::Context. Après le traçage, le chemin actuel est effacé ; vous pouvez donc en débuter un nouveau.

Beaucoup de fonctions de dessin de Cairo disposent d'une variante _preserve(). Normalement, les fonctions de dessin telles que clip(), fill() ou stroke() effacent le chemin actuel. Si vous utilisez la variante _preserve(), le chemin actuel sera préservé de sorte que vous pouvez à nouveau l'utiliser avec une autre fonction de dessin.

Figure XVII.1 Zone de dessin ‑ Lignes

Code source

File: myarea.h (For use with gtkmm 3, not gtkmm 2) 

#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_draw(const Cairo::RefPtr<Cairo::Context>& cr);
};

#endif // GTKMM_EXAMPLE_MYAREA_H

File: myarea.cc (For use with gtkmm 3, not gtkmm 2) 

#include "myarea.h"
#include <cairomm/context.h>

MyArea::MyArea()
{
}

MyArea::~MyArea()
{
}

bool MyArea::on_draw(const Cairo::RefPtr<Cairo::Context>& cr)
{
  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;

  cr->set_line_width(10.0);

  // 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;
}

File: main.cc (For use with gtkmm 3, not gtkmm 2) 

#include "myarea.h"
#include <gtkmm/application.h>
#include <gtkmm/window.h>

int main(int argc, char** argv)
{
   Glib::RefPtr<Gtk::Application> app = Gtk::Application::create(argc, argv, "org.gtkmm.example");

   Gtk::Window win;
   win.set_title("DrawingArea");

   MyArea area;
   win.add(area);
   area.show();

   return app->run(win);
}

This program contains a single class, MyArea, which is a subclass of Gtk::DrawingArea and contains an on_draw() member function. This function is called whenever the image in the drawing area needs to be redrawn. It is passed a Cairo::RefPtr pointer to a Cairo::Context that we use for the drawing. The actual drawing code sets the color we want to use for drawing by using set_source_rgb() 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 move_to() and line_to(), and then stroked this path with stroke().

Tracé en coordonnées relatives

Dans l'exemple ci-dessus nous avons tout tracé en utilisant des coordonnées absolues. Nous pouvons également tracer en coordonnées relatives. Pour une droite, on utilise la fonction Cairo::Context::rel_line_to().

XVII.II.II. Styles de trait

En plus du tracé élémentaire de droites, vous pouvez personnaliser un certain nombre de choses dans les tracés de lignes. Nous avons déjà vu des exemples de paramétrage de couleur et d'épaisseur de trait, mais il en existe bien d'autres.

Si vous avez tiré une série de traits formant un chemin, vous pouvez vouloir les raccorder d'une certaine façon. Cairo offre trois façons différentes de raccorder les lignes entre elles : l'onglet, le biseau et l'arrondi. Voyez-les ci-dessous :

Figure XVII.2 Différents types de raccord dans Cairo

Le type de raccord est défini avec la fonction Cairo::Context::set_line_join().

Les fins de ligne peuvent avoir différents styles également. Le style par défaut est de débuter et arrêter la ligne exactement aux points de définition. On nomme cela la coupe droite. Les autres options sont l'arrondi (utilise une terminaison en demi-cercle, le centre du demi-cercle étant au point terminal de la ligne) ou le carré (utilise une terminaison carrée diagonale, le centre du carré étant au point terminal de la ligne). Ce paramétrage est défini avec la fonction Cairo::Context::set_line_cap().

There are other things you can customize as well, including creating dashed lines and other things. For more information, see the Cairo API documentation.

XVII.II.III. Drawing thin lines

If you try to draw one pixel wide lines, you may notice that the line sometimes comes up blurred and wider than it ought to be. This happens because Cairo will try to draw from the selected position, to both sides (half to each), so if you're positioned right on the intersection of the pixels, and want a one pixel wide line, Cairo will try to use half of each adjacent pixel, which isn't possible (a pixel is the smallest unit possible). This happens when the width of the line is an odd number of pixels (not just one pixel).

The trick is to position in the middle of the pixel where you want the line to be drawn, and thus guaranteeing you get the desired results. See Cairo FAQ.

Figure XVII.3 Drawing Area - Thin Lines

Code source

File: myarea.h (For use with gtkmm 3, not gtkmm 2) 

#ifndef GTKMM_EXAMPLE_MYAREA_H
#define GTKMM_EXAMPLE_MYAREA_H

#include <gtkmm/drawingarea.h>

class MyArea : public Gtk::DrawingArea
{
public:
  MyArea();
  virtual ~MyArea();

  void fix_lines(bool fix = true);
  void force_redraw();

protected:
  //Override default signal handler:
  virtual bool on_draw(const Cairo::RefPtr<Cairo::Context>& cr);

private:
  double m_fix;
};

#endif // GTKMM_EXAMPLE_MYAREA_H

File: examplewindow.h (For use with gtkmm 3, not gtkmm 2) 

#ifndef GTKMM_EXAMPLEWINDOW_H
#define GTKMM_EXAMPLEWINDOW_H

#include <gtkmm/window.h>
#include <gtkmm/grid.h>
#include <gtkmm/checkbutton.h>
#include "myarea.h"

class ExampleWindow : public Gtk::Window
{
public:
  ExampleWindow();
  virtual ~ExampleWindow();

protected:
  //Signal handlers:
  void on_button_toggled();

private:
  Gtk::Grid m_Container;
  MyArea m_Area_Lines;
  Gtk::CheckButton m_Button_FixLines;
};

#endif //GTKMM_EXAMPLEWINDOW_H

File: myarea.cc (For use with gtkmm 3, not gtkmm 2) 

#include "myarea.h"

MyArea::MyArea()
: m_fix (0)
{
  set_size_request (200, 100);
}

MyArea::~MyArea()
{
}

bool MyArea::on_draw(const Cairo::RefPtr<Cairo::Context>& cr)
{
  Gtk::Allocation allocation = get_allocation();
  const int width = allocation.get_width();
  const int height = allocation.get_height();

  cr->set_line_width(1.0);

  // draw one line, every two pixels
  // without the 'fix', you won't notice any space between the lines,
  // since each one will occupy two pixels (width)
  for (int i = 0; i < width; i += 2)
  {
    cr->move_to(i + m_fix, 0);
    cr->line_to(i + m_fix, height);
  }

  cr->stroke();

  return true;
}

// Toogle between both values (0 or 0.5)
void MyArea::fix_lines(bool fix)
{
  // to get the width right, we have to draw in the middle of the pixel
  m_fix = fix ? 0.5 : 0.0;

  force_redraw();
}

// force the redraw of the image
void MyArea::force_redraw()
{
  Glib::RefPtr<Gdk::Window> win = get_window();
  if (win)
  {
    Gdk::Rectangle r(0, 0, get_allocation().get_width(), get_allocation().get_height());
    win->invalidate_rect(r, false);
  }
}

File: examplewindow.cc (For use with gtkmm 3, not gtkmm 2) 

#include "examplewindow.h"

ExampleWindow::ExampleWindow()
: m_Button_FixLines("Fix lines")
{
  set_title("Thin lines example");

  m_Container.set_orientation(Gtk::ORIENTATION_HORIZONTAL);

  m_Container.add(m_Area_Lines);
  m_Container.add(m_Button_FixLines);

  add(m_Container);

  m_Button_FixLines.signal_toggled().connect(
    sigc::mem_fun(*this, &ExampleWindow::on_button_toggled));

  // Synchonize the drawing in m_Area_Lines with the state of the toggle button.
  on_button_toggled();

  show_all_children();
}

ExampleWindow::~ExampleWindow()
{
}

void ExampleWindow::on_button_toggled()
{
  m_Area_Lines.fix_lines(m_Button_FixLines.get_active());
}

File: main.cc (For use with gtkmm 3, not gtkmm 2) 

#include "examplewindow.h"
#include <gtkmm/application.h>

int main(int argc, char* argv[])
{
  Glib::RefPtr<Gtk::Application> app = Gtk::Application::create(argc, argv, "org.gtkmm.example");

  ExampleWindow window;

  //Shows the window and returns when it is closed.
  return app->run(window);
}
Le modèle de tracé Cairo Tracé de courbes

À propos