☰ Содержание · Информатика

Графика в Delphi

Уроки 59–60 · 2 урока · Н. И. Тайлаков (общий редактор), А. Б. Ахмедов, М. Д. Пардаева, А. А. Абдуганиев, У. М. Мирсанов. Информатика и информационные технологии, 10 класс, 1-е издание. «Extremum-Press», Ташкент, 2017
59

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

Учебник: с. 132–137
ЦельРисует на объекте Image с помощью Canvas: использует свойства Pen и Brush, методы Rectangle, Ellipse, MoveTo и LineTo, свойство Pixels и цвета (названия cl, RGB, $BBGGRR).
Новые слова
Canvas: поверхность для рисования объекта, например Image · CanvasPen / Brush: перо рисует линии, кисть заливает области · Pen / BrushRGB: функция, создающая цвет из значений красного, зелёного и синего от 0 до 255 · RGBPixels: цвета отдельных точек холста, задаваемые двумя координатами · Pixels
Объяснение

У многих объектов есть свойство Canvas: на нём рисуют фигуры. Для рисования удобно использовать объект Image с вкладки Additional, потому что нарисованная на нём фигура не теряется, когда окно закрывают и снова показывают (фигура, нарисованная прямо на Form1.Canvas, может исчезнуть, если окно закрыто другим). Координаты отсчитываются от левого верхнего угла холста: x – вправо, y – вниз. Rectangle(x1, y1, x2, y2) рисует прямоугольник, а Ellipse(x1, y1, x2, y2) – эллипс, вписанный в этот прямоугольник; эллипс в квадрате – это круг. MoveTo(x, y) перемещает перо в точку, а LineTo(x, y) проводит отрезок от текущей точки до заданной. Pen (Color, Width, Style) рисует линии, а Brush (Color, Style) заливает внутреннюю область. Цвет задают названиями cl (clRed, clBlue, clYellow) или функцией RGB(red, green, blue), в которой каждое значение от 0 до 255, поэтому всего 256·256·256 = 16777216 цветов. Одну точку можно закрасить так: Canvas.Pixels[x, y] := RGB(255, 0, 0); В Lazarus вместо RGB используйте RGBToColor(r, g, b).

Примеры
Дом: Image1 (300×200). procedure TForm1.Button1Click(Sender: TObject); ⏎ begin ⏎  Image1.Canvas.Rectangle(40, 80, 140, 160); ⏎  Image1.Canvas.MoveTo(40, 80); ⏎  Image1.Canvas.LineTo(90, 40); ⏎  Image1.Canvas.LineTo(140, 80); ⏎ end; Стена имеет ширину 140–40 = 100 пикселей и высоту 160–80 = 80; вершина крыши находится в x = (40+140)/2 = 90.
Полуоси Ellipse(10, 40, 70, 120) равны (70–10)/2 = 30 и (120–40)/2 = 40. Солнце: Image1.Canvas.Brush.Color := clYellow; Image1.Canvas.Ellipse(220, 20, 260, 60); – круг в квадрате 40×40. RGB(255, 255, 0) – жёлтый, RGB(0, 0, 255) – синий, RGB(0, 0, 0) – чёрный, а RGB(255, 255, 255) – белый.
Работа в классе

«Дом и солнце»: пара рисует дом, дверь и солнце со своими координатами; они заранее вычисляют ширину и высоту стены и сравнивают их с размерами на картинке.

Упражнения
1
От чего отсчитываются координаты Canvas?
2
Каковы ширина и высота Rectangle(30, 50, 130, 150)?
3
Каковы полуоси Ellipse(10, 20, 90, 60)?
4
Почему рисовать на Image надёжнее, чем на Form1.Canvas?