Наши партнеры

Библиотека сайта rus-linux.net

Программирование с использованием gtkmm 3. Виджет области рисования (DrawingArea)

Оригинал: Programming with gtkmm 3
Авторы: Murray Cumming, Bernhard Rieder, Jonathon Jongsma, Ole Laursen, Marko Anastasov, Daniel Elstner, Chris Vine, David King, Pedro Ferreira, Kjell Ahlstedt
Перевод: А.Панин

17.5. Вывод текста

17.5.1. Вывод текста с помощью библиотеки Pango

Вывод текста осуществляется с помощью областей вывода текста Pango (Pango Layouts). Простейшим способом создания экземпляра класса области вывода текста Pango Pango::Layout является вызов функции Gtk::Widget::create_pango_layout(). После создания область вывода текста Pango может использоваться для различных манипуляций с текстом, включая изменение текста, шрифта, и.т.д. Наконец, область вывода текста Pango может быть размещена в области рисования с помощью метода Pango::Layout::show_in_cairo_context().

17.5.2. Пример

Ниже приведен пример программы, которая с помощью области рисования выводит текст, часть которого является перевернутой. Глава "Печать" содержит другой пример вывода текста.

Рисунок 17-6: Область рисования - Текст

Исходный код

Файл: myarea.h (Для использования совместно с gtkmm 3, а не с gtkmm 2)

Файл: mayarea.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

#include "myarea.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();

const int rectangle_width = width;
  const int rectangle_height = height / 2;

// Прорисовка прямоугольника черного цвета
  cr->set_source_rgb(0.0, 0.0, 0.0);
  draw_rectangle(cr, rectangle_width, rectangle_height);

// и текста белого цвета
  cr->set_source_rgb(1.0, 1.0, 1.0);
  draw_text(cr, rectangle_width, rectangle_height);

// вертикальное зеркальное отображение изображения
  // обратитесь к справочной информации по адресу http://www.cairographics.org/documentation/cairomm/reference/classCairo_1_1Matrix.html
  // значение -1 соответствует параметру yy (параметру зеркального отображения)
  // параметр высоты является ключевым для преобразования (мы могли бы просто осуществить вызов метода cr->translate(0, height) вместо описанного вызова)
  // здесь используется height, а не height / 2, так как мы хотим разместить преобразованное изображение во второй части нашего изображения
  // (в противном случае оно было бы размещено поверх первой части)
  Cairo::Matrix matrix(1.0, 0.0, 0.0, -1.0, 0.0, height);

// применение матрицы преобразования
  cr->transform(matrix);

// прямоугольник белого цвета
  cr->set_source_rgb(1.0, 1.0, 1.0);
  draw_rectangle(cr, rectangle_width, rectangle_height);

// текст черного цвета
  cr->set_source_rgb(0.0, 0.0, 0.0);
  draw_text(cr, rectangle_width, rectangle_height);

return true;
}

void MyArea::draw_rectangle(const Cairo::RefPtr<Cairo::Context>& cr,
                            int width, int height)
{
  cr->rectangle(0, 0, width, height);
  cr->fill();
}

void MyArea::draw_text(const Cairo::RefPtr<Cairo::Context>& cr,
                       int rectangle_width, int rectangle_height)
{
  // http://developer.gnome.org/pangomm/unstable/classPango_1_1FontDescription.html
  Pango::FontDescription font;

font.set_family("Monospace");
  font.set_weight(Pango::WEIGHT_BOLD);

// http://developer.gnome.org/pangomm/unstable/classPango_1_1Layout.html
  Glib::RefPtr<Pango::Layout> layout = create_pango_layout("Привет!");

layout->set_font_description(font);

int text_width;
  int text_height;

//получение размеров текста (производится обновление значений переменных по ссылкам)
  layout->get_pixel_size(text_width, text_height);

// Размещение текста по центру прямоугольника
  cr->move_to((rectangle_width-text_width)/2, (rectangle_height-text_height)/2);

layout->show_in_cairo_context(cr);
}

Файл: main.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

17.6. Вывод существующих изображений

Существует метод для вывода объекта буфера пикселей на основе класса Gdk::Pixbuf с помощью контекста Cairo на основе класса Cairo::Context. Класс буфера пикселей Gdk::Pixbuf является удобной оберткой над набором пикселей, который может формироваться на основе прочитанных из файлов изображений данных и подвергаться различным модификациям впоследствии.

Самым часто используемым способом создания объектов на основе класса Gdk::Pixbuf, скорее всего, является вызов метода Gdk::Pixbuf::create_from_file(), который позволяет прочитать данные из файла изображения, такого, как файл формата PNG, в готовый для вывода буфер пикселей.

Данные буфера пикселей на основе класса Gdk::Pixbuf могут быть выведены с помощью контекста Cairo после объявления этого буфера источником данных шаблона изображения контекста Cairo путем вызова метода Gdk::Cairo::set_source_pixbuf(). После этого изображение может прорисовываться либо путем вызова метода Cairo::Context::paint() (для прорисовки всего изображения), либо путем вызова методов Cairo::Context::rectangle() и Cairo::Context:fill() (для прорисовки изображения в заданной прямоугольной области). Функция set_source_pixbuf() не является методом класса Cairo::Context. Она принимает экземпляр класса Cairo::Context в качестве первого параметра.

Ниже приведен простой фрагмент кода с реализацией всех описанных выше операций. (Учтите, что в большинстве случаев вам не придется загружать изображение каждый раз при обработке сигнала перерисовки! Данный фрагмент кода всего лишь является обобщением описанной выше методики вывода изображений.)

bool MyArea::on_draw(const Cairo::RefPtr<Cairo::Context>& cr)
{
  Glib::RefPtr<Gdk::Pixbuf> image = Gdk::Pixbuf::create_from_file("myimage.png");
  // Прорисовка изображения в точке с координатами 110, 90 за исключением 10 пикселей на внешних границах.
  Gdk::Cairo::set_source_pixbuf(cr, image, 100, 80);
  cr->rectangle(110, 90, image->get_width()-20, image->get_height()-20);
  cr->fill();
  return true;
}

17.6.1. Пример

Ниже приведен пример простой программы, предназначенной для вывода изображения в области рисования.

Рисунок 17-7: Область рисования - Изображение

Исходный код

Файл: myarea.h (Для использования совместно с gtkmm 3, а не с gtkmm 2)

Файл: myarea.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

#include "myarea.h"
#include <cairomm/context.h>
#include <gdkmm/general.h> // set_source_pixbuf()
#include <glibmm/fileutils.h>
#include <iostream>

MyArea::MyArea()
{
  try
  {
    // Изображение фрактала было создано с помощью программы XaoS.
    // http://xaos.sourceforge.net
    m_image = Gdk::Pixbuf::create_from_file("fractal_image.png");
  }
  catch(const Glib::FileError& ex)
  {
    std::cerr << "FileError: " << ex.what() << std::endl;
  }
  catch(const Gdk::PixbufError& ex)
  {
    std::cerr << "PixbufError: " << ex.what() << std::endl;
  }

// Показ как минимум четверти изображения.
  if (m_image)
    set_size_request(m_image->get_width()/2, m_image->get_height()/2);
}

MyArea::~MyArea()
{
}

bool MyArea::on_draw(const Cairo::RefPtr<Cairo::Context>& cr)
{
  if (!m_image)
    return false;

Gtk::Allocation allocation = get_allocation();
  const int width = allocation.get_width();
  const int height = allocation.get_height();

// Прорисовка изображения в центре области рисования или (в случае, если размер
  // изображения больше размера области рисования) прорисовка центральной части изображения.
  Gdk::Cairo::set_source_pixbuf(cr, m_image,
    (width - m_image->get_width())/2, (height - m_image->get_height())/2);
  cr->paint();

return true;
}

Файл: main.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

17.7. Пример приложения: часы на основе Cairo

После того, как мы рассмотрели основные методы рисования с помощью библиотеки Cairo, давайте попытаемся обобщить полученную информацию и создать простое приложение, которое выполняет полезную функцию. В примере библиотека Cairo используется для создания специального виджета часов. Часы имеют секундную, минутную и часовую стрелки и обновляют их положение каждую секунду.

Рисунок 17-8: Область рисования - Часы

Исходный код

Файл: clock.h (Для использования совместно с gtkmm 3, а не с gtkmm 2)

Файл: clock.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

#include <ctime>
#include <cmath>
#include <cairomm/context.h>
#include <glibmm/main.h>
#include "clock.h"

Clock::Clock()
: m_radius(0.42), m_line_width(0.05)
{
  Glib::signal_timeout().connect( sigc::mem_fun(*this, &Clock::on_timeout), 1000 );

#ifndef GLIBMM_DEFAULT_SIGNAL_HANDLERS_ENABLED
  //Установка обработчика сигналов в том случае, если не осуществлено перекрытие виртуального метода:
  signal_draw().connect(sigc::mem_fun(*this, &Clock::on_draw), false);
  #endif //GLIBMM_DEFAULT_SIGNAL_HANDLERS_ENABLED
}

Clock::~Clock()
{
}

bool Clock::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();

// масштабирование системы координат до единичного квадрата и перенос начала координат 
  // из точки (0, 0) в точку (0.5, 0.5), т.е. в центр окна
  cr->scale(width, height);
  cr->translate(0.5, 0.5);
  cr->set_line_width(m_line_width);

cr->save();
  cr->set_source_rgba(0.337, 0.612, 0.117, 0.9);   // зеленый цвет
  cr->paint();
  cr->restore();
  cr->arc(0, 0, m_radius, 0, 2 * M_PI);
  cr->save();
  cr->set_source_rgba(1.0, 1.0, 1.0, 0.8);
  cr->fill_preserve();
  cr->restore();
  cr->stroke_preserve();
  cr->clip();

//метки часов
  for (int i = 0; i < 12; i++)
  {
    double inset = 0.05;

cr->save();
    cr->set_line_cap(Cairo::LINE_CAP_ROUND);

if(i % 3 != 0)
    {
      inset *= 0.8;
      cr->set_line_width(0.03);
    }

cr->move_to(
      (m_radius - inset) * cos (i * M_PI / 6),
      (m_radius - inset) * sin (i * M_PI / 6));
    cr->line_to (
      m_radius * cos (i * M_PI / 6),
      m_radius * sin (i * M_PI / 6));
    cr->stroke();
    cr->restore(); /* восстановление ширины линии */
  }

// сохранение текущего времени
  time_t rawtime;
  time(&rawtime);
  struct tm * timeinfo = localtime (&rawtime);

// расчет углов стрелок наших часов
  double minutes = timeinfo->tm_min * M_PI / 30;
  double hours = timeinfo->tm_hour * M_PI / 6;
  double seconds= timeinfo->tm_sec * M_PI / 30;

cr->save();
  cr->set_line_cap(Cairo::LINE_CAP_ROUND);

// прорисовка секундной стрелки
  cr->save();
  cr->set_line_width(m_line_width / 3);
  cr->set_source_rgba(0.7, 0.7, 0.7, 0.8); // серый цвет
  cr->move_to(0, 0);
  cr->line_to(sin(seconds) * (m_radius * 0.9),
    -cos(seconds) * (m_radius * 0.9));
  cr->stroke();
  cr->restore();

// прорисовка минутной стрелки
  cr->set_source_rgba(0.117, 0.337, 0.612, 0.9);   // синий цвет
  cr->move_to(0, 0);
  cr->line_to(sin(minutes + seconds / 60) * (m_radius * 0.8),
    -cos(minutes + seconds / 60) * (m_radius * 0.8));
  cr->stroke();

// прорисовка часовой стрелки
  cr->set_source_rgba(0.337, 0.612, 0.117, 0.9);   // зеленый цвет
  cr->move_to(0, 0);
  cr->line_to(sin(hours + minutes / 12.0) * (m_radius * 0.5),
    -cos(hours + minutes / 12.0) * (m_radius * 0.5));
  cr->stroke();
  cr->restore();

// прорисовка небольшой токи в центре
  cr->arc(0, 0, m_line_width / 3.0, 0, 2 * M_PI);
  cr->fill();

return true;
}

bool Clock::on_timeout()
{
    // принудительная перерисовка всего изображения часов.
    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);
    }
    return true;
}

Файл: main.cc (Для использования совместно с gtkmm 3, а не с gtkmm 2)

Как и раньше, в данном случае практически все интересные вещи реализованы в рамках обработчика сигналов on_draw(). Перед тем, как мы будем исследовать обработчик сигналов перерисовки, следует обратить внимание на то, что конструктор класса виджета Clock устанавливает функцию обработчика on_timeout() для таймера с временем срабатывания в 1000 миллисекунд (или 1 секунду). Это означает, что функция on_timeout() будет вызываться один раз в секунду. Единственной задачей этой функции является установка флага устаревания изображения окна для того, чтобы принудить gtkmm перерисовать его.

Теперь давайте рассмотрим код, в рамках которого выполняются сами операции рисования. Первая часть функции on_draw() на данный момент должна быть достаточно знакомой. В данном примере снова производится масштабирование координатной системы до единичного квадрата с целью упрощения рисования часов с использованием процентного соотношения размеров окна, поэтому изображение будет автоматически масштабироваться при изменении размеров окна. Более того, впоследствии производится еще одно масштабирование координатной системы таким образом, что точка с координатами (0,0) находится в самом центре окна.

Функция Cairo::Context::paint() в данном случае используется для установки цвета фона окна. Эта функция не принимает аргументов и заполняет текущую поверхность (или ограниченную часть поверхности) активным на данный момент цветом. Выполнив установку цвета фона окна, мы рисуем внешнюю окружность циферблата часов и закрашиваем ее белым цветом с последующей обводкой этой окружности черным цветом. Обратите внимание на то, что при выполнении всех описанных действий используются варианты функций с суффиксами _preserve для сохранения текущего контура, причем впоследствии этот же контур используется для выравнивания будущих линий с гарантией того, что ни одна из этих линий не пересечет внешнюю окружность циферблата часов.

После изображения внешней окружности часов мы обходим циферблат и рисуем деления для каждого часа, причем деления для 12, 3, 6 и 9 часов имеют больший размер. Теперь мы наконец готовы к реализации функции отображения текущего времени наших часов, которая заключается в простом получении текущих значений часов, минут и секунд и рисовании стрелок под корректными углами.

Следующий раздел : Механизм захвата и перемещения данных (Drag and Drop).