Итак, основные навыки для написания эмулятора телефона мы получили, самое время вернуться к нашей давно нарисованной оболочке. Давайте посмотрим, как работать с графическими элементами в Small basic.

Программа Small Basic формирует графику на поверхности графического окна (Graphics Window). Для того чтобы графическое окно появилось на экране и внутри него был нарисован, например, прямоугольник, в программу надо поместить инструкцию вызова метода, рисующего прямоугольник. Так в результате выполнения инструкции

GraphicsWindow.DrawRectangle(10,10,50,30)

будет нарисован прямоугольник шириной в 50 и высотой в 30 пикселей, левый верхний угол которого будет находиться в точке с координатами (10, 10).

Методы, рисующие графические примитивы внутри графического окна, рассматривают его поверхность как холст, состоящий из отдельных точек — пикселов. Положение пиксела характеризуется его горизонтальной (x) и вертикальной (y) координатами. Координаты отсчитываются от левого верхнего угла и возрастают слева направо (x) и сверху вниз (y). Точка, находящаяся в левом верхнем углу поверхности, имеет координаты (0, 0).

Свойства графического окна GraphicsWindow (табл. 8.1) определяют вид графических примитивов, рисуемых на графической поверхности соответствующими методами. Так, например, свойство PenColor (Цвет пера) задает цвет линий и границ фигур, а свойство BrushColor (Цвет кисти) — цвет закраски областей.

Свойство Описание

PenColor Задает цвет линий и границ геометрических фигур

PenWidth Задает толщину линий и границ геометрических фигур, рисуемых пером

BrushColor Задает цвет закраски внутренних областей геометрических фигур

FontName Задает шрифт, используемый для вывода текста на графическую поверхность

FontSize Задает размер шрифта, используемого для вывода текста на графическую поверхность

FontItalic Устанавливает, что шрифт, используемый для вывода текста на графическую поверхность, должен быть курсивный (italic)

FontBold Устанавливает, что шрифт, используемый для вывода текста на графическую поверхность, должен быть полужирным (bold)

Width Ширина окна

Height Высота окна

CanResize Устанавливает вид границы окна. Если свойству присвоить значение False, то граница станет тонкой, поэтому у пользователя не будет возможности изменить размер окна

Цвет линий и областей задается путем изменения соответственно значений свойств PenWidth и PenColor. В качестве значения свойства, определяющего цвет, следует использовать название цвета, например, "Red", "DarkRed", "Green", "YellowGreen", "Gold", "SkyBlue". Всего в Small Basic определены 142 цвета.

Константа Цвет

"Red" Красный

"DarkRed" Темно-красный

"Pink" Розовый

"LightPink" Светло-розовый

"DeepPink" Темно-розовый

"Orange" Оранжевый

"DarkOrange" Темно-оранжевый

"OrangeRed" Оранжево-красный

"Yellow" Желтый

"LightYellow" Светло-желтый

"Gold" Золотой

"Fuchsia" Фуксия

"Magenta" Маджента

"DarkViolet" Темно-фиолетовый

"Purple" Фиолетовый

"GreenYellow" Зелено-желтый

"Lime" Лайм

"SpringGreen" Весенняя зелень

"SeaGreen" Морская зелень

"ForestGreen" Зеленый лес

"DarkGreen" Темно-зеленый

"YellowGreen" Желто-зеленый

"Olive" Оливковый

"Aqua" Морская волна

"SteelBlue" Синяя сталь

"SkyBlue" Небесно-синий

"Blue" Синий

"DarkBlue" Темно-синий

"Chocolate" Шоколадный

"Brown" Коричневый

"White" Белый

"Snow" Снег

"LightGray" Светло-серый

"Silver" Серебро

"Gray" Серый

"Black" Черный

Так как фон для нашего «телефона» является графическим файлом, давайте рассмотрим, как отобразить его в графическом окне.

Отображение иллюстрации в графическом окне обеспечивают методы DrawImage и DrawResizedImage. Они позволяют вывести в графическое окно иллюстрацию формата JPG, GIF, PNG, BMP, ICO. Различие методов состоит в том, что DrawImage выводит иллюстрацию "как есть", а DrawResizedImage позволяет выполнить ее масштабирование.

Инструкция вызова метода DrawImage в общем случае выглядит так:

GraphicsWindow.DrawImage(img, x, y)

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

Давайте отобразим наш интерфейс в графическом окне. Для этого в свойствах файла посмотрим ширину и длину картинки в пикселях.

В результате у нас получится следующее:

Инструкциями GraphicWindow.Left и Top мы задаем положение графического окна относительно правого верхнего угла экрана. Свойства Width и Height регулируют ширину и высоту этого окна соответственно. Filename – это переменная, в которой находится адрес картинки, загружаемой в графическое окно.