Σχεδίαση ευθειών γραμμών
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.
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.
- 17.2.1. Παράδειγμα
- 17.2.2. Τεχνοτροπίες γραμμής
- 17.2.3. Σχεδίαση λεπτών γραμμών
17.2.1. Παράδειγμα
Σε αυτό το παράδειγμα, θα κατασκευάσουμε ένα μικρό, αλλά πλήρως λειτουργικό πρόγραμμα της gtkmm και θα σχεδιάσουμε μερικές γραμμές στο παράθυρο. Οι γραμμές σχεδιάζονται δημιουργώντας ένα μονοπάτι και έπειτα βάφοντας το. Το μονοπάτι δημιουργείται χρησιμοποιώντας τις συναρτήσεις Cairo::Context::move_to() και Cairo::Context::line_to(). Η συνάρτηση move_to() είναι παρόμοια με την πράξη της ανύψωσης του στυλού σας από το χαρτί και της τοποθέτησης του κάπου αλλού -- καμιά γραμμή δεν σχεδιάζεται μεταξύ του σημείου που ήσασταν και του σημείου που πήγατε. Για τη σχεδίαση μιας γραμμής μεταξύ δύο σημείων, χρησιμοποιήστε τη συνάρτηση line_to().
Αφού έχετε τελειώσει τη δημιουργία του μονοπατιού σας, δεν έχετε σχεδιάσει ακόμα τίποτα ορατό ακόμα. Για να κάνετε ορατό το μονοπάτι, πρέπει να χρησιμοποιήσετε τη συνάρτηση stroke() που θα βάψει το τρέχον μονοπάτι με το πλάτος της γραμμής και την τεχνοτροπία που ορίζεται στο αντικείμενό σας Cairo::Context. Μετά την πινελιά, το τρέχον μονοπάτι θα καθαριστεί έτσι ώστε να μπορείτε να ξεκινήσετε με το επόμενο μονοπάτι σας.
Πολλές συναρτήσεις σχεδίασης Cairo έχουν μια παραλλαγή _preserve(). Κανονικά οι συναρτήσεις σχεδίασης όπως clip(), fill(), ή stroke() θα καθαρίσουν την τρέχουσα διαδρομή. Αν χρησιμοποιήσετε την παραλλαγή _preserve(), η τρέχουσα διαδρομή θα διατηρηθεί, έτσι ώστε να μπορείτε να χρησιμοποιήσετε την ίδια διαδρομή με την επόμενη συνάρτηση σχεδίασης.
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::Context::rel_line_to().
17.2.2. Τεχνοτροπίες γραμμής
Πέρα από τη σχεδίαση βασικών ευθειών γραμμών, υπάρχει ένας αριθμός από πράγματα που μπορείτε να προσαρμόσετε σε μια γραμμή. Έχετε ήδη δει παραδείγματα ρύθμισης χρώματος και πλάτους γραμμής, αλλά υπάρχουν κι άλλα.
Αν έχετε σχεδιάσει μια σειρά γραμμών που σχηματίζουν μια διαδρομή, μπορεί να θελήσετε να τις ενώσετε μαζί με έναν συγκεκριμένο τρόπο. Το Cairo προσφέρει τρεις διαφορετικούς τρόπους για ένωση γραμμών μεταξύ τους: μύτη, λοξότμηση και στρογγυλό. Αυτά εμφανίζονται παρακάτω:
Η τεχνοτροπία ένωσης γραμμής ορίζεται χρησιμοποιώντας τη συνάρτηση Cairo::Context::set_line_join().
Τα άκρα της γραμμής μπορούν να έχουν διαφορετικές τεχνοτροπίες επίσης. Η προεπιλεγμένη τεχνοτροπία είναι να αρχίζει και να σταματά η γραμμή ακριβώς στα σημεία προορισμού της γραμμής. Αυτό λέγεται ένα κουτσουρεμένο άκρο. Οι άλλες επιλογές είναι στρογγυλή (χρησιμοποιεί ένα στρογγυλό τέλος, με το κέντρο του κύκλου στο τελικό σημείο) ή τετράγωνη (χρησιμοποιεί ένα τετραγωνισμένο τέλος, με το κέντρο του τετραγώνου στο τελικό σημείο). Αυτή η ρύθμιση ορίζεται χρησιμοποιώντας τη συνάρτηση Cairo::Context::set_line_cap().
Υπάρχουν άλλα πράγματα που μπορείτε να προσαρμόσετε επίσης, συμπεριλαμβανομένων της δημιουργίας γραμμών με παύλες και άλλα. Για περισσότερες πληροφορίες, δείτε την τεκμηρίωση API Cairo.
17.2.3. Σχεδίαση λεπτών γραμμών
Αν δοκιμάσετε να σχεδιάσετε γραμμές πλάτους ενός εικονοστοιχείου, μπορεί να σημειώσετε ότι η γραμμή μερικές φορές παρουσιάζεται θολωμένη και πλατύτερη από όσο θα έπρεπε να είναι. Αυτό συμβαίνει επειδή το Cairo θα προσπαθήσει να σχεδιάσει από την επιλεγμένη θέση και στις δυο πλευρές (μισή σε καθεμιά), έτσι αν είσαστε τοποθετημένοι ακριβώς στην τομή των εικονοστοιχείων και θέλετε μια γραμμή με πλάτος ένα εικονοστοιχείο, το Cairo θα προσπαθήσει να χρησιμοποιήσει το μισό κάθε γειτονικού εικονοστοιχείου, που δεν είναι δυνατό (ένα εικονοστοιχείο είναι η μικρότερη δυνατή μονάδα). Αυτό συμβαίνει όταν το πλάτος της γραμμής είναι ένας περιττός αριθμός εικονοστοιχείων (όχι μόνο ένα εικονοστοιχείο).
Το τέχνασμα είναι η τοποθέτηση στη μέση του εικονοστοιχείου όπου θέλετε η γραμμή να σχεδιαστεί και έτσι εγγυάται ότι παίρνετε τα επιθυμητά αποτελέσματα. Δείτε Συχνές ερωτήσεις Cairo.
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); }