Σχεδίαση ευθειών γραμμών

Σε αυτό το παράδειγμα, θα κατασκευάσουμε ένα μικρό, αλλά πλήρως λειτουργικό πρόγραμμα της gtkmm και θα σχεδιάσουμε μερικές γραμμές στο παράθυρο. Οι γραμμές σχεδιάζονται δημιουργώντας ένα μονοπάτι και έπειτα βάφοντας το. Το μονοπάτι δημιουργείται χρησιμοποιώντας τις συναρτήσεις Cairo::Context::move_to() και Cairo::Context::line_to(). Η συνάρτηση move_to() είναι παρόμοια με την πράξη της ανύψωσης του στυλού σας από το χαρτί και της τοποθέτησης του κάπου αλλού -- καμιά γραμμή δεν σχεδιάζεται μεταξύ του σημείου που ήσασταν και του σημείου που πήγατε. Για τη σχεδίαση μιας γραμμής μεταξύ δύο σημείων, χρησιμοποιήστε τη συνάρτηση line_to().

Αφού έχετε τελειώσει τη δημιουργία του μονοπατιού σας, δεν έχετε σχεδιάσει ακόμα τίποτα ορατό ακόμα. Για να κάνετε ορατό το μονοπάτι, πρέπει να χρησιμοποιήσετε τη συνάρτηση stroke() που θα βάψει το τρέχον μονοπάτι με το πλάτος της γραμμής και την τεχνοτροπία που ορίζεται στο αντικείμενό σας Cairo::Context. Μετά την πινελιά, το τρέχον μονοπάτι θα καθαριστεί έτσι ώστε να μπορείτε να ξεκινήσετε με το επόμενο μονοπάτι σας.

Φιγούρα 17-1 Περιοχή σχεδίασης - Γραμμές

Source Code

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

Αυτό το πρόγραμμα περιέχει μια μοναδική κλάση, MyArea, που είναι υποκλάση της Gtk::DrawingArea και περιέχει μια συνάρτηση μέλους on_draw(). Αυτή η συνάρτηση καλείται όποτε η εικόνα στην περιοχή σχεδίασης χρειάζεται ανασχεδιασμό. Περνιέται ένας δείκτης Cairo::RefPtr στην Cairo::Context που χρησιμοποιούμε για τη σχεδίαση. Ο ενεργός κώδικας σχεδίασης ορίζει το χρώμα που θέλουμε να χρησιμοποιήσουμε για σχεδίαση χρησιμοποιώντας την set_source_rgb() που παίρνει ορίσματα ορίζοντας τα συστατικά κόκκινο, πράσινο και γαλάζιο του επιθυμητού χρώματος (έγκυρες τιμές είναι μεταξύ 0 και 1). Μετά τον ορισμό του χρώματος, δημιουργούμε μια νέα διαδρομή χρησιμοποιώντας τις συναρτήσεις move_to() και line_to() και έπειτα βάφουμε αυτήν τη διαδρομή με stroke().

Πέρα από τη σχεδίαση βασικών ευθειών γραμμών, υπάρχει ένας αριθμός από πράγματα που μπορείτε να προσαρμόσετε σε μια γραμμή. Έχετε ήδη δει παραδείγματα ρύθμισης χρώματος και πλάτους γραμμής, αλλά υπάρχουν κι άλλα.

Αν έχετε σχεδιάσει μια σειρά γραμμών που σχηματίζουν μια διαδρομή, μπορεί να θελήσετε να τις ενώσετε μαζί με έναν συγκεκριμένο τρόπο. Το Cairo προσφέρει τρεις διαφορετικούς τρόπους για ένωση γραμμών μεταξύ τους: μύτη, λοξότμηση και στρογγυλό. Αυτά εμφανίζονται παρακάτω:

Φιγούρα 17-2 Διαφορετικοί τύποι ένωσης στο Cairo

Η τεχνοτροπία ένωσης γραμμής ορίζεται χρησιμοποιώντας τη συνάρτηση Cairo::Context::set_line_join().

Τα άκρα της γραμμής μπορούν να έχουν διαφορετικές τεχνοτροπίες επίσης. Η προεπιλεγμένη τεχνοτροπία είναι να αρχίζει και να σταματά η γραμμή ακριβώς στα σημεία προορισμού της γραμμής. Αυτό λέγεται ένα κουτσουρεμένο άκρο. Οι άλλες επιλογές είναι στρογγυλή (χρησιμοποιεί ένα στρογγυλό τέλος, με το κέντρο του κύκλου στο τελικό σημείο) ή τετράγωνη (χρησιμοποιεί ένα τετραγωνισμένο τέλος, με το κέντρο του τετραγώνου στο τελικό σημείο). Αυτή η ρύθμιση ορίζεται χρησιμοποιώντας τη συνάρτηση Cairo::Context::set_line_cap().

Υπάρχουν άλλα πράγματα που μπορείτε να προσαρμόσετε επίσης, συμπεριλαμβανομένων της δημιουργίας γραμμών με παύλες και άλλα. Για περισσότερες πληροφορίες, δείτε την τεκμηρίωση API Cairo.

Αν δοκιμάσετε να σχεδιάσετε γραμμές πλάτους ενός εικονοστοιχείου, μπορεί να σημειώσετε ότι η γραμμή μερικές φορές παρουσιάζεται θολωμένη και πλατύτερη από όσο θα έπρεπε να είναι. Αυτό συμβαίνει επειδή το Cairo θα προσπαθήσει να σχεδιάσει από την επιλεγμένη θέση και στις δυο πλευρές (μισή σε καθεμιά), έτσι αν είσαστε τοποθετημένοι ακριβώς στην τομή των εικονοστοιχείων και θέλετε μια γραμμή με πλάτος ένα εικονοστοιχείο, το Cairo θα προσπαθήσει να χρησιμοποιήσει το μισό κάθε γειτονικού εικονοστοιχείου, που δεν είναι δυνατό (ένα εικονοστοιχείο είναι η μικρότερη δυνατή μονάδα). Αυτό συμβαίνει όταν το πλάτος της γραμμής είναι ένας περιττός αριθμός εικονοστοιχείων (όχι μόνο ένα εικονοστοιχείο).

Το τέχνασμα είναι η τοποθέτηση στη μέση του εικονοστοιχείου όπου θέλετε η γραμμή να σχεδιαστεί και έτσι εγγυάται ότι παίρνετε τα επιθυμητά αποτελέσματα. Δείτε Συχνές ερωτήσεις Cairo.

Φιγούρα 17-3 Περιοχή σχεδίασης - Λεπτές γραμμές

Source Code

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.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.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: 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: 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);
}