Работа с графикой

Итак, основные навыки для написания эмулятора телефона мы получили, самое время вернуться к нашей давно нарисованной оболочке. Давайте посмотрим, как работать с графическими элементами в 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 (Цвет кисти) — цвет закраски областей.

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

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

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

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

GraphicsWindow.DrawImage(img, x, y)

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

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

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

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