2 Работа с графикой с использованием классов, свойств и функций компонент Borland C++ Builder

Видео:Как САМОМУ понимать С++ Builder #1 | Компоненты Label и EditСкачать

Основные понятия

В среде C++Builder существует три рода объектов, которые имеют отношение к графике:

Канва — предоставляет битовую карту поверхности окна приложения, компоненты, принтера и т.п., которая может быть использована для вывода графики. Канва не самостоятельный объект, она всегда является свойством какого-то другого графического объекта.

Графика — представляет растровое изображение некоторого файла или ресурса (битового образа, пиктограммы или метафайла).

C++Builder определяет производные от базового класса TGraphic объектные классы:

Рисунок (TPicture) представляет собой контейнер для графики, который может содержать любые классы графических объектов. Таким образом, контейнерный класс TPicture может содержать битовый образ, пиктограмму, метафайл или некоторый другой графический тип, определенный пользователем, а приложение может стандартно обращаться ко всем объектам контейнера посредством объекта TPicture.

Отметим, что графические объекты Windows взаимосвязаны. Так — объект TPicture всегда содержит некоторую графику, которой в свою очередь, может потребоваться для отображения канва, а единственный стандартный графический класс канвы — это TBitmap.

Как отмечалось выше, Borland С++ Builder инкапсулирует функции Windows GDI на разных уровнях. Наиболее завершенным является интерфейс, предоставляемый свойством Canvas (канва), объектного класса канвы, его графических компонент. Использование канвы снимает с программиста заботу при выводе изображений об инициализации контекста устройства и его освобождении. Наличия вложенных свойств (характеристик пера, кисти, шрифтов, растровых изображений) также не требует слежения за состояниями ресурсов — основная задача — это определение характеристик для этих графических объектов и грамотное их использование. Речь об этом в следующем параграфе.

Видео:C# Builder Строитель | Design PatternsСкачать

Объектный класс канвы

Инкапсулированные и перегруженные функции GDI и WinApi объектного класса канвы многие авторы относят к трем различным уровням. В этой условной классификации функции высокого уровня обеспечивают возможность рисования линий, фигур и текста. Определение свойств и методов манипулирования графическими примитивами канвы отнесены к среднему уровню. Нижний уровень обеспечивается доступ к самим функциям Windows GDI. Классификация не бесспорна, но она позволяет ориентироваться в достаточно большом колличестве свойств и методов канвы и, поэтому, приведем эту классификацию.

Видео:Язык Си: компиляция в C++ Builder ПРОСТОСкачать

Примеры использования функций канвы для рисования приметивов

Основы рисования примитивов рассмотрены выше при рассмотрении функций GDI, здесь, на примерах, не повторяя уже описанные ранее приемы вывода примитивов, показаны лишь некоторые особенности их отображения с использованием функций канвы.

Прстейший пример относится к рисованию линий, кроме того показано как можно задавать параметры пера:

Пример рисования дуги и секторов:

Пример рисования ломаных линий (перо, при желании, можно задать как и ранее):

Пример рисования кривых Блейзера:

Пример отображения прямоугольников и эллипсов различными способами и использования кистей:

Использование кисти для заливки фигур:

И интересный эффект заполнения канвы цветом кисти:

Рисование рамки вокруг прямоугольника:

Из примеров видно, что (с учетом некоторой модификации параметров функций) рисование графических примитивов аналогично интерфейсу GDI. Однако, так как не требуется следить за состоянием контекста и его графических объектов, написание кода значительно упрощается.

Видео:(Урок_11) Первое оконное приложение (TForm)(ч.1/3) (C/C++)Скачать

Вывод текста на канву

Вывод текста на канву предельно прост. Требуется только задать характеристики шрифта (свойство Font канвы), текст в формате AnsiString и использовать метод TextOutA() канвы. Следующий пример показывает как это делается и, также, демонстрирует то, что канва сохраняет заданные свойства — нажатие кнопки Button2, в обработчике нажатия которой изменен лишь цвет, не изменяет остальных свойств шрифта, заданных в обработчике нажатия кнопки Button1.

Рис 1. Пример работы со шрифтами.

Полезные функции для работы с текстом:

TextWidth(AnsiString vasS); — возвращает ширину текста в пикселях, необходимую для отображения строки vasS заданным шрифтом канвы;

TextHeight(AnsiString vasS); — возвращает высоту текста в пикселях, необходимую для отображения строки vasS заданным шрифтом канвы.

Эти функции полезны когда надо быть уверенным, что при езменении размера шрифта текст не выдет за грани компонента.

В следующем примере показано изменение ширины компонента TListBox, при выводе на его канву текста у которого заранее изменен шпифт. В обработчик нажатия кнопки Button1 поместить функцию TextWidth() и за ней функцию TextOutA() нельзя, так как перирисовка компонента происходит после завершения обработчика и часть текста будет утеряна. В примере, кроме того, показано задание цвета в виде 16ти ричного числа и высоты шрифта в пикселях.

Каждый шрифт поддерживает один или больше наборов символов, которые и определяют их написание. Следующий пример хотя и выводит абракадабру первые две строки, но показывает как, используя свойство Charset, сменить набор символов шрифта установленный по умолчанию. Кроме того можно отметить разницу набора символов RUSSIAN_CHARSET и DEFAULT_CHARSET — как правило они разные. Пятая функция показывает использование еще одного свойства — Pitch. Символы в шрифтах с переменным шагом отличаются по ширине (значения fpDefault, fpVariable), но если установить значение свойства равным fpFixed, ширина символов будет одинаковой.

Следущее свойство шрифта PixelsPerInch относится к отображению текста и графики при печати, о чем речь будет вестись отдельно, но кратко рассмотрено здесь, чтобы позже при возврате к свойствам шрифтов вновь не повторяться. Принтер, о чем уже говорилось, также имеет канву. Вывод на печать в Borland C++ Builder — это вывод на канву принтера. При смене принтера, размер шрифтов может отмасштабироваться не правильно. Чтобы сделать правильное масштабирование, необходимо установить свойство PixelsPerInch шрифта. Свойство PixelsPerInch определяет количество пикселей в 1 дюйме. Для его установки можно воспользоваться следующим кодом:

Отметим также, что свойство PixelsPerInch имеют не только шрифты, но и, например Экран (Screen) и может быть исрользовано при установке фиксированных размеров компонент (1 сантиметр равен 1 * (Screen->PixelsPerInch/2.54, 1 дюйм = 25.4 мм).

И песледнее — шрифт также имеет свойство Handle, которое может быть использовано для быстрого восстановления характеристик шрифта канвы по умолчанию (за исключением цвета).

Далее рассмотрим работу с изображения в Borland C++ Builder.

Видео:C# .NET Windows Form | СОЗДАЁМ PAINT НА C#Скачать

w3.org.ua

Видео:C++. Паттерн проектирования программ "Одиночка (Singleton)".Скачать

уроки front-end и back-end

Рубрики

Видео:Лекция 22. Графические возможности C++ Builder.Скачать

Canvas. Рисуем окружность и дугу

Рисуем окружность и дугу

Давайте разберемся как рисуется примитив дуга и ее производная — окружность.

Дуга рисуется следующей командой:

Давайте рассмотрим аргументы данной функции:

• x, y — координаты центра, вокруг которого будет рисоваться окружность.
• radius — радиус окружности, безразмерная величина.
• startAngle — начальный угол, начало отсчета. Задается в радианах. Счет идет по часовой стрелке с правой части окружности. На рисунке начало отсчета показано «0».
• endAngle — конечный угол. В радианах. Так, полной окружности соответствует угол 2pi.
• anticlockwise — направление рисования. По-умолчанию рисуем против часовой стрелки, значение true. Если мы хотим рисовать по часовой стрелке — false.

Углы при работе в canvas измеряются в радианах. Углу 90° соотвествует значение Pi/2, углу 180° — Pi, а полной окружности — 2*Pi. Для получения числа Pi можно воспользоваться функцией Math.PI.

Для удобства, на рисунке приведено вычисленное значение числа Pi.

Как рисовать линии в canvas читайте в предыдущем уроке.

Выполнить

Задание 1. Нарисуйте дугу от 0° до 270°.Выполните рисование по часовой и против часовой стрелки.

Задание 2. Разработайте интерфейс, в котором пользователь может задать радиус дуги, начальный и конечный угол, с помощью checkbox задается направление рисования и дополнительный checkbox определяет залита ли фигура или нет. Скрипт должен на основе вводимых данных строить дугу.

Задание 3. Анимируйте процесс рисования фигуры.

Видео:программирование C++: рисование кругаСкачать

Круглый график на Canvas

Приветствую!

Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?). И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется). Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.

Сперва я смотрел в сторону css, ну сами посудите — круг делаем через border-radius, а border-color покажет сколько процентов… Разумеется это применимо к 0%, 25%, 50%, 75% и 100%:

Если рассуждать в этом ключе дальше то можно задействовать псевдоэлементы, и рисовать один круг над другим. т.е если нам нужно показать 33% то мы рисуем 2 круга по 25%, просто второй круг поворачиваем так что бы при наложении закрашенным оказалось 33% border, для этого нужно просто рассчитать на сколько градусов повернуть псевдоэлемент:

Разумеется если нужно будет показать график 51% и больше то нужно будет закрасить border-bottom. Загвоздка остаётся в том что проценты в моём графике не статичны, а рисовать для каждого графика свой стиль — мягко говоря не правильно, а ведь возможны дробные значения… Тут то нам и понадобится JavaScript, правда доступа к псевдоэлементам в джаве нет ибо находятся они вне DOM-дерева и к ним нельзя обратиться как к простым HTML-элементам. Конечно можно ::before заменить на span и крутить его… Но если пришлось использовать JavaScript то тогда можно рисовать график на canvas, тем более что в canvas есть специальная функция arc — которая рисует окружности.

Всё что я писал выше, лишь для того что бы показать ход моих мыслей

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

На счёт x,y — всё понятно, r(радиус) тоже не вызывает вопросов, необязательная опция counterclockwise — говорит направление в котором рисовать окружность, по умолчанию false = по часовой, true = против часовой.

sAngle и eAngle это начальная и конечная точка на окружности в радианах, более понятно что такое радианы объяснит гифка:

Собственно это и всё что нужно для того что бы нарисовать график.

Чтобы добавить круглый график(?) нужно добавить на страницу:

В качестве атрибутов можно добавить:

data-width — диаметр (по умолчанию 80)
data-lineWidth — ширина линии (по умолчанию 1/10 от диаметра)
* размер графика равен data-width + data-lineWidth
data-lineRound — округлять края отрезка.

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

Цвета графика я решил не добавлять в атрибуты, а записывать их в стили:

— на мой взгляд так удобнее, но всегда остаётся возможность указать цвет в style=«border-color: ***; color: ***»

📹 Видео

JS Canvas 04: Кривая БезьеСкачать

Первое знакомство с Borland C++ Builder 6 (урок_1)Скачать

JS Canvas 02: Прямые и кривые линииСкачать

Уроки по С++ | Из первой формы открыть вторую форму | C++ Builder 10Скачать

C++. Паттерн проектирования программ "Строитель (Builder)".Скачать

ты C++ РАЗРАБОТЧИК?) агаСкачать

C#. Паттерн проектирования программ "Строитель (Builder)".Скачать