Уроки 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.
«Дом и солнце»: пара рисует дом, дверь и солнце со своими координатами; они заранее вычисляют ширину и высоту стены и сравнивают их с размерами на картинке.
Упражнения
1
От чего отсчитываются координаты Canvas?
От левого верхнего угла
2
Каковы ширина и высота Rectangle(30, 50, 130, 150)?
100 и 100
3
Каковы полуоси Ellipse(10, 20, 90, 60)?
40 и 20
4
Почему рисовать на Image надёжнее, чем на Form1.Canvas?
Image сам хранит картинку; рисунок не теряется, когда окно закрывают и открывают снова.