Графика и рисование в Small Basic
Итак, основные навыки для написания эмулятора телефона мы получили, самое время вернуться к нашей давно нарисованной оболочке. Давайте посмотрим, как работать с графическими элементами в Small basic.
Программа Small Basic формирует графику на поверхности графического окна (Graphics Window). Для того чтобы графическое окно появилось на экране и внутри него был нарисован, например, прямоугольник, в программу надо поместить инструкцию вызова метода, рисующего прямоугольник. Так в результате выполнения инструкции
GraphicsWindow.DrawRectangle(10,10,50,30)
будет нарисован прямоугольник шириной в 50 и высотой в 30 пикселей, левый верхний угол которого будет находиться в точке с координатами (10, 10).
Операторы рисования графических примитивов внутри графического окна, рассматривают его поверхность как холст, состоящий из отдельных точек — пикселов. Положение пиксела характеризуется его горизонтальной (x) и вертикальной (y) координатами. Координаты отсчитываются от левого верхнего угла и возрастают слева направо (x) и сверху вниз (y). Точка, находящаяся в левом верхнем углу поверхности, имеет координаты (0, 0).
Свойства графического окна GraphicsWindow определяют вид графических примитивов, рисуемых на графической поверхности соответствующими методами. Так, например, свойство 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
– это переменная, в которой находится адрес картинки, загружаемой в графическое окно.