Добавьте в форму компоненты Image и Button
1. Добавьте в форму компоненты Image и Button.
2. Создайте обработчик события нажатия. Важнейшим свойством компонента Image является свойство Canvas:TCanvas (холст). Это свойство само является объектом. У Canvas есть методы и свойства. Это свойства и методы рисования на холсте.
- Pen: Tpen (перо): рисование линий, границ фигур и т.п. производится пером. Важнейшие свойства пера – Color: Tcolor (цвет), Width: Integer (ширина), Style: TpenStyle (стиль).
- Brush: Tbrush (кисть): закраска фигур, заднего фона надписей и т.п. производится кистью. Важнейшие свойства кисти – Color: Tcolor (цвет), Style: TbrushStyle (стиль).
- Font: Tfont (шрифт): надписи на холсте выполняются с учетом значений его свойства Font. При этом задний фон за надписью закрашивается текущим значением кисти. Для того чтобы закраски не было, нужно установить прозрачный стиль кисти: Brush.Style := bsClear, но затем не забудьте сделать кисть непрозрачной: Brush.Style := bsSolid, иначе фигуры, которые вы будете в дальнейшем рисовать, тоже окажутся незакрашенными. Важнейшие свойства шрифта – Name: string (имя), Size: Integer (размер), Color: Tcolor (цвет). Вы также использовали два метода холста:
- Rectangle(X1, Y1, X2, Y2: Integer) (прямоугольник): рисует прямоугольник, закрашивая его кистью и обводя пером (в нашем случае, для того чтобы рамки не было видно, мы сделали цвет кисти и пера одинаковым). В качестве параметров задаются координаты верхнего левого X1, Y1 и нижнего правого X2, Y2 углов относительно верхнего левого угла холста.
- TextOut(X, Y: Integer; const Text: string) (вывести текст): рисует текст согласно заданному шрифту и закрашивая задний фон согласно заданной кисти (в нашем случае эта закраска незаметна, поскольку текст рисуется на том же фоне, что и текущее значение кисти). В качестве параметров задаются координаты верхнего левого угла текста X, Y относительно верхнего левого угла холста и текст надписи Text.
3. Нарисуйте градиентно закрашенное синее небо отдельными линиями, каждую следующую линию рисуя более светлой. Таким образом, рисование выполняется в цикле. Необходимо определить локальную переменную. В цикле меняются значения цветов, устанавливается перо в точку и чертится линия из этой точки в другую.
- MoveTo(X, Y: Integer) (передвинуть перо): передвигает позицию пера в точку холста в координаты X, Y. При этом на холсте ничего не рисуется;
- LineTo(X, Y: Integer) (чертить линию): чертит линию из точки, в которой находилось перо, в точку X, Y, используя текущее перо. При этом перо тоже перемещается в эту точку.
Местоположение пера хранится в свойстве холста PenPos: Tpoint. Запись в эту переменную полностью эквивалентна вызову метода MoveTo. Цвет можно задавать, используя константы цвета clBlack, clNavy, clGreen и т.д. – полный список констант находится в выпадающем списке свойства Color в Инспекторе Объектов. Цвет также можно задать, используя функцию RGB (Red, Green, Blue: byte), в параметрах Red, Green и Blue указываются значения интенсивности красной, зеленой и синей компоненты цвета (от 0 до 255 каждая).
4. Добавить на небо солнце. Нарисовать эллипс с линиями-лучами. Лучи нарисовать случайным образом, для этого необходимо использовать генератор случайных чисел.
- Круги и эллипсы рисуются с помощью метода холста Ellipse(X1, Y1, X2, Y2: Integer). Как и прямоугольник, эллипс закрашивается текущей кистью и обводится текущим пером. В качестве параметров X1, Y1, X2, Y2 необходимо указать левый верхний и нижний правый углы прямоугольника, в который «вписан» эллипс. Если Y2 – Y1 = X2 – X1 (то есть прямоугольник является квадратом), эллипс рисуется как круг.
- Датчик случайных чисел – функция random выдает число типа double в диапазоне от 0 до 1.
5. Нарисовать облака. Можно воспользоваться картинкой из файла. Нарисовать в стандартном редакторе Paint облако: а) установить атрибуты картинки – ширина 100, высота 50; б) закрасить картинку черным цветом – этот цвет в программе будет прозрачным; в) нарисовать облако, используя инструмент Распылитель и различные оттенки серого; г) проследите, чтобы левая нижняя точка картинки осталась черной (именно по этой точке автоматически определяется прозрачный цвет).
6. Сохранить картинку в файл.
7. Добавить в форму еще один Image, щелкнуть по нему мышкой и загрузить в него картинку. Сделать его прозрачным можно, установив свойство Transparent. Поскольку он вспомогательный, лучше, чтобы он не был виден во время работы программы, поэтому отключите ему свойство Visible.
8. Добавить компонент Timer. Установите его интервал 100.
9. На вкладке событий Инспектора Объектов напротив события OnTimer в выпадающем списке выберите имя обработчика события Button1Click. Таким образом устанавливается уже существующий обработчик для еще одного события.
10. В программе каждые сто миллисекунд будет вызываться событие и происходить перерисовка картинки, как если бы мы нажимали каждый раз кнопку. Замедлить интервал между перерисовкой картинки можно, увеличив интервал таймера.
11. При рисовании часто требуется использовать более сложные объекты, чем просто комбинации линий прямоугольников и эллипсов. Может возникнуть необходимость использования готового растрового изображения. Кроме того, может понадобиться копирование изображения из одного Image на другой. Для этого используется метод холста Draw(X, Y: Integer; Graphic: Tgraphic). Этот метод практически копирует графический объект на холст в область с координатами верхнего левого угла X,Y. Графическим объектом Graphic могут быть битовые картинки, иконки и метафайлы. Для нас важным является его применение к копированию картинок из одного Image в другой. Это делается следующим образом:
ImageA.Canvas.Draw(X, Y, ImageB.Picture.Bitmap)При этом все, что нарисовано на ImageB, будет скопировано на ImageA. Если ImageB.Transparent = true, то картинка копируется с прозрачным фоном.
Вместо ImageA и ImageB соответственно подставьте нужные вам имена компонентов, фигурирующие в вашей программе:
Image1.Canvas.Draw(130 + random(2), 20 + random(2), Image2.Picture.Bitmap);Image1.Canvas.Draw(100 + random(2), 50 + random(2), Image2.Picture.Bitmap);
Image1.Canvas.Draw(170 + random(2), 80 + random(2), Image2.Picture.Bitmap);
Таким образом, для рисования можно использовать любые картинки из файла – облака, домики, персонажей, логотипы и т.п.
Листинг программы
procedure Tform1.Button1Click(Sender: Tobject);
var i:integer;
begin
Image1.Canvas.Pen.Color := clGreen;
Image1.Canvas.Brush.Color := clGreen;
Image1.Canvas.Rectangle(0, 200, 300, 300);
Image1.Canvas.Font.Color := clWhite;
Image1.Canvas.Font.Size := 30;
Image1.Canvas.Font.Name := ‘Arial’;
Image1.Canvas.TextOut(10, 250, ‘Delphi’);
for i := 0 to 200 do
begin
Image1.Canvas.Pen.Color := RGB(I, I, 255);
Image1.Canvas.MoveTo(0, i);
Image1.Canvas.LineTo(300, i);
end;
Image1.Canvas.Pen.Color := clRed;
Image1.Canvas.Brush.Color := clYellow;
Image1.Canvas.Ellipse(20, 20, 60, 60);
Image1.Canvas.Pen.Color := clYellow;
for i := 1 to 20 do
begin
Image1.Canvas.MoveTo(40, 40);
Image1.Canvas.LineTo(5 + random(70), 5 + random(70));
end;
end;
end.