Аналоговые часы SFML C++

Мультимедийная библиотека SFML лечит головную боль не только новичкам в игровой индустрии, но и преподавателям информатики в школе. Основная задача которых состоит в том, чтобы не только научить ребёнка программировать, но и привить любовь к разработке приложений. Используя простые графические объекты и их методы можно за короткое время создать прототип игры или симулятор физико-математических процессов. В этой статье мы рассмотрим разработку аналоговых часов на C++ используя библиотеку SFML.

Инструменты для разработки

Visual Studio c установленным пакетом «Разработка классических приложений на С++».
Мультимедийная библиотека SFML.
Подключаемый файл заголовка SFMLWorldTime.
Шрифты и программный код для самостоятельной разработки или репозиторий.

Подготовительная работа

Подключаем к Visual Studio библиотеку SFML и копируем шаблон кода библиотеки SFML в редактор кода.

#include <SFML/Graphics.hpp> #include"SFMLWorldTime.h"  using namespace sf;  int main() {     // Создаём графическое окно размером 900х900      RenderWindow window(VideoMode(900, 900), L"Аналоговые часы", Style::Default);          window.setVerticalSyncEnabled(true);  // Вертикальная синхронизация          SFMLWorldTime etm(50, 50, 4, Color::Yellow); // Объект электронные часы                     while (window.isOpen())     {         Event event;         while (window.pollEvent(event))         {             if (event.type == Event::Closed)                 window.close();         }                  window.clear(Color::Blue); // Очищаем графическое окно и закрашиваем в синий цвет         etm.drawTime(window);  // Рисуем электронные часы в графическом окне         window.display();     }     return 0; }

Добавляем в папку проекта файлы SFMLWorldTime.h и SFMLWorldTime.cpp и папку со шрифтами lib.

Добавляем в проект файлы SFMLWorldTime.h и SFMLWorldTime.cpp.

В код шаблона программы прописываем вызов заголовочного файла SFMLWorldTime.h.

#include"SFMLWorldTime.h"

Создаём объект электронные часы и рисуем их в графическом окне.

SFMLWorldTime etm(50, 50, 4, Color::Yellow);  etm.drawTime(window);

Часовых дел мастер

#define _USE_MATH_DEFINES #include <SFML/Graphics.hpp> #include"SFMLWorldTime.h" #include<math.h>   using namespace sf; using namespace std;  int main() {          RenderWindow window(VideoMode(900, 900), L"Аналоговые часы", Style::Default);          window.setVerticalSyncEnabled(true);      SFMLWorldTime etm(50, 50, 4, Color::Yellow);      // Корпус аналоговых часов     CircleShape circleTime(300.f);     circleTime.setOrigin(150, 150);     circleTime.setPosition(303, 303);     circleTime.setFillColor(Color::Blue);     circleTime.setOutlineThickness(10);     circleTime.setOutlineColor(Color::Yellow);      // Риски аналоговых часов объявление переменных     CircleShape PointMin;     PointMin.setFillColor(Color::Yellow);     float radiusNum = 280; // радиус расположения рисок     float radiusPoint;     float CenterClockX = 450;     float CenterClockY = 450;     float xPoint, yPoint;      // Оцифровка циферблата аналоговых часов объявление переменных     Font fontTime;     if (!fontTime.loadFromFile("lib/dockerthree.ttf")) return 777;     Text TimeText;     TimeText.setFont(fontTime);     TimeText.setCharacterSize(30);     TimeText.setFillColor(Color::Yellow);     float numx, numy;      // Рисуем стрелки аналоговых часов     RectangleShape secArrow(Vector2f(2, 280));                //секундная     InitRect(secArrow, 453, 453, 1, 280, Color::Red);     RectangleShape minArrow(Vector2f(8, 260));               //минутная     InitRect(minArrow, 455, 455, 4, 260, Color::Yellow);     RectangleShape hourArrow(Vector2f(12, 180));             //часовая     InitRect(hourArrow, 455, 455, 6, 180, Color::Yellow);                      while (window.isOpen())     {         Event event;         while (window.pollEvent(event))         {             if (event.type == Event::Closed)                 window.close();         }                  window.clear(Color::Blue);         etm.drawTime(window);     // электронные часы         window.draw(circleTime);  // корпус аналоговых часов          // Риски аналоговых часов          for (int a = 0; a < 60; a++) {             if (a % 5 == 0)  radiusPoint = 8; else  radiusPoint = 4;             xPoint = CenterClockX + radiusNum * cos(-6 * a * (M_PI / 180) + M_PI / 2);             yPoint = CenterClockY - radiusNum * sin(-6 * a * (M_PI / 180) + M_PI / 2);             PointMin.setRadius(radiusPoint);             PointMin.setOrigin(radiusPoint / 2, radiusPoint / 2);             PointMin.setPosition(xPoint, yPoint);             window.draw(PointMin);         }          // Оцифровка циферблата аналоговых часов         for (int i = 1; i <= 12; i++)         {             numx = CenterClockX + (radiusNum - 30) * cos(-30 * i * (M_PI / 180) + M_PI / 2);             numy = CenterClockX - (radiusNum - 30) * sin(-30 * i * (M_PI / 180) + M_PI / 2);              if (i <= 5) TimeText.setPosition(numx - 10, numy - 17);             else  TimeText.setPosition(numx - 8, numy - 15);             TimeText.setString(to_string(i));             window.draw(TimeText);          }         secArrow.setRotation(6 * etm.getsec());                         // вращение секундной стрелки          minArrow.setRotation(6 * etm.getmin() + etm.getsec() * 0.1);    // вращение минутной стрелки          hourArrow.setRotation(30 * etm.gethour() + etm.getmin() * 0.5); // вращение часовой стрелки           window.draw(hourArrow); // часовая стрелка         window.draw(minArrow);  // минутная стрелка         window.draw(secArrow);  // секундная          window.display();     }     return 0; }

Рисуем окружность т.е. контур будущих часов

// Блок объявления и установки параметров объектов     CircleShape circleTime(300.f);     circleTime.setOrigin(150, 150);     circleTime.setPosition(303, 303);     circleTime.setFillColor(Color::Blue);     circleTime.setOutlineThickness(10);     circleTime.setOutlineColor(Color::Yellow);  // Блок отрисовки графических объектов     window.draw(circleTime);

Подключаем макрос математических констант

#define _USE_MATH_DEFINES

Подключаем заголовочный файл математических функций

#include<math.h>

Объявляем объекты и переменные для рисования рисок часов.

Создаём объект круга, который и будет отображать окружность в виде рисок.

    // Блок объявления и установки параметров объектов     CircleShape PointMin;                  // объект круга     PointMin.setFillColor(Color::Yellow);  // цвет круга жёлтый

Объявим и инициализируем вещественную переменную значением расстояния от центра часов до расположения рисок.

float radiusNum = 280;

Создадим вещественную переменную размера рисок т.е. радиуса объекта круга PointMin

float radiusPoint;

Обозначим переменными координаты центра окружности

float CenterClockX = 450; float CenterClockY = 450;

Объявим переменные координат рисок

float xPoint, yPoint;

Рисуем риски в графическом окне

for (int a = 0; a < 60; a++)  {             // каждой пятой риски увеличиваем радиус             if (a % 5 == 0)  radiusPoint = 8; else  radiusPoint = 4;             // вычисляем координаты риски             xPoint = CenterClockX + radiusNum * cos(-6 * a * (M_PI / 180) + M_PI / 2);             yPoint = CenterClockY - radiusNum * sin(-6 * a * (M_PI / 180) + M_PI / 2);             // задаём координаты и параметры риски т.е. объекту круга  PointMin             PointMin.setRadius(radiusPoint);             PointMin.setOrigin(radiusPoint / 2, radiusPoint / 2);             PointMin.setPosition(xPoint, yPoint);             // рисуем риску в графическом окне             window.draw(PointMin); }

В формуле вычисления координат рисок, используем математическую константу числа Пи — M_PI.

Объявим объекты и переменные для отображения циферблата часов

Загрузим шрифт для отображения цифр, создаём объект шрифта fontTime и загружаем в него шрифт dockerthree.ttf

Font fontTime; if (!fontTime.loadFromFile("lib/dockerthree.ttf")) return 777;

Создаём объект текста и задаём ему параметры: шрифта, размера и цвета.

    Text TimeText;     TimeText.setFont(fontTime);     TimeText.setCharacterSize(30);     TimeText.setFillColor(Color::Yellow);

Объявляем переменные координат текстового объекта, для отображения цифр.

float numx, numy;

Рисуем циферблат в графическом окне

for (int i = 1; i <= 12; i++)         {             // вычисляем координаты для текстового объекта с цифрами             numx = CenterClockX + (radiusNum - 30) * cos(-30 * i * (M_PI / 180) + M_PI / 2);             numy = CenterClockX - (radiusNum - 30) * sin(-30 * i * (M_PI / 180) + M_PI / 2);             // Корректируем координаты расположения цифр              if (i <= 5) TimeText.setPosition(numx - 10, numy - 17);             else  TimeText.setPosition(numx - 8, numy - 15);             // заносим значение цифры в текстовый объект             TimeText.setString(to_string(i));             // рисуем текстовый объект             window.draw(TimeText);          }

Объявляем объекты для стрелок часов и настраиваем их.

    RectangleShape secArrow(Vector2f(2, 280));               // Секундная стрелка     InitRect(secArrow, 453, 453, 1, 280, Color::Red);     RectangleShape minArrow(Vector2f(8, 260));               // Минутная стрелка     InitRect(minArrow, 455, 455, 4, 260, Color::Yellow);     RectangleShape hourArrow(Vector2f(12, 180));             // Часовая стрелка     InitRect(hourArrow, 455, 455, 6, 180, Color::Yellow);

Графическое отображение стрелок базируются на объекте формы прямоугольника RectangleShape. Настраиваем объекты с помощью функции InitRect (), которая находится в заголовочном файле SFMLWorldTime.h.

Рисуем стрелки часов

// Изменение угла положения прямоугольников т.е. стрелок secArrow.setRotation(6 * etm.getsec());                         // Вращение секундной стрелки  minArrow.setRotation(6 * etm.getmin() + etm.getsec() * 0.1);    // Вращение минутной стрелки  hourArrow.setRotation(30 * etm.gethour() + etm.getmin() * 0.5); // Вращение часовой стрелки   // Рисование стрелок в графическом окне window.draw(hourArrow); // часовая стрелка window.draw(minArrow);  // минутная стрелка window.draw(secArrow);  // секундная

Метод setRotation вращает объект вокруг заданной оси, согласно установленному углу поворота в параметрах метода.

Рассчитаем угол поворота стрелок.

Секундная стрелка повернется на угол равный 360 °/60 сек = 6 ° (вся окружность 360 ° по ней распределяем 60 секунд) и умножаем на текущее значение времени секунд.

Минутная стрелка за это время повернется на 360 °/60 мин = 6 ° умноженных на текущее значение времени минут и добавляем 6 °/60сек=0.1 ° умноженный на количество пройденного времени секунд.

Часовая стрелка за это время повернётся на 360°/12 часов = 30 ° умноженных на текущее время часов и добавляем 30 °/60мин=0,5° умноженным на пройденное время минут.