ПРАКТИЧЕСКАЯ РАБОТА № 8 – Работа с компонентом Image


Практически закрепить знания и умения использования возможностей среды Delphi для создания альбомов рисунков, используя компонент Image и его свойства

теоретические сведения
Delphi позволяет разрабатывать программы, которые могут выводить графику: схемы, чертежи, иллюстрации.

Программа выводит графику на поверхность объекта (формы или компонента Image). Поверхности объекта соответствует свойство canvas. Для того, чтобы вывести на поверхность объекта графический элемент (прямую линию, круг, прямоугольник и т. Д.), Необходимо применить к свойству canvas этого объекта соответствующий метод. Например, инструкция Form1.Canvas.Rectangle (10,10,100,100) намечает в окне программы прямоугольник.

полотно
Как было сказано ранее, поверхности, на которую программа может выводить графику, соответствует свойство Canvas. В свою очередь, свойство canvas — это объект типа TCanvas. Методы этого типа обеспечивают вывод графических примитивов (точек, линий, окружностей, прямоугольников и т. Д.), А свойства позволяют задать характеристики графических примитивов, выводимых: цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выводе текстовой информации.

image

Методы вывода графических примитивов рассматривают свойство Canvas как некоторое абстрактное полотно, на котором они могут рисовать (canvas переводится как «поверхность», «холст для рисования»).

Полотно состоит из отдельных точек

пикселей. Положение пикселя характеризуется его горизонтальными

и вертикальными (Y) координатами. Левый верхний пиксель имеет координаты (0, 0). Координаты растут сверху вниз и слева направо (см. Рис). Значения координат правой нижней точки полотна зависят от размера полотна.

Координаты точек полотна

Размер полотна можно получить, обратившись к свойствам Height и

Width области иллюстрации (image) или к свойствам формы: ClientHeight и Clientwidth.
Карандаш и кисть
Карандашу и кисточке, которая используется для вывода графики на холсте, соответствуют свойства Реn (карандаш) и Brush (кисть), которые являются объектами типа TPen и ТВrush соответственно. Значения свойств этих объектов определяют вид графических элементов, выводимых.

карандаш
Карандаш используется для вычерчивания точек, линий, контуров геометрических фигур: прямоугольников, кругов, эллипсов, дуг и др. Вид линии, которую оставляет карандаш на поверхности холста, определяют свойства объекта TPen, которые перечислены в табл.

Свойства объекта TPen (карандаш)

свойство

определяет

Color

цвет линии

Width

толщину линии

Style

Вид линии n

Mode

режим отображения

Свойство Color задает цвет линии, намеченной карандашом. В таблице ниже перечислены именованные константы (тип TColor), которые можно использовать в качестве значения свойства color.

Значение свойства Color определяет цвет линии

Константа — Цвет
clBlack черный
clSilver серебристый
clMaroon каштановый
clRed красный
clGreen зеленый
clLime салатный
clOlive оливковый
clBlue синий
clNavy Темно-синий
clFuchsia Ярко-розовый
clPurple розовый
clAqua бирюзовый
clTeal Зелено-голубой
clWhite белый
clGray серый

Свойство Width задает толщину линии (в пикселях). Например, инструкция Canvas.Pen.width = 2 устанавливает толщину линии в 2 пикселя.

Свойство Style определяет вид (стиль) линии, которая может быть непрерывная или прерывистая, состоит из штрихов различной длины. В таблице ниже перечислены именованные константы, позволяющие задать стиль линии. Толщина пунктирной линии не может быть больше 1. Если значение свойства Pen.width больше единицы, то пунктирная линия будет выведена как сплошная.

Читать  ПРАКТИЧЕСКАЯ РАБОТА №8 – Применение циклов к решению задач

Значение свойства Реn.color определяет вид линии

Константа

вид линии

psSolid

сплошная линия

psDash

Пунктирная линия, длинные штрихи

psDot

Пунктирная линия, короткие штрихи

psDashDot

Пунктирная линия, чередование длинного и короткого штрихов

psDashDotDot

Пунктирная линия, чередование одного длинного и двух коротких штрихов

psClear

Линия не отображается (используется, если не надо изображать границу области, например, прямоугольника)

Свойство Mode определяет, как будет формироваться цвет точек линии в зависимости от цвета точек полотна, через которые эта линия вычеркивается. По умолчанию вся линия вычерчивается цветом, которая определяется значением свойства Pen.Color.

Однако программист может задать инверсный цвет линии по отношению к цвету фона. Это гарантирует, что независимо от цвета фона все участки линии будут видны, даже в том случае, если цвет линии и цвет фона совпадают.

Ниже перечислены некоторые константы, которые можно использовать в качестве значения свойства Pen.Mode.

Значение свойства Рeп.Mode влияет на цвет линии

Константа

цвет линии

pmBlack

Черный, зависит от значения свойства Pen.Color

pmWhite

Белый, зависит от значения свойства Pen.Color

pmCopy

Цвет линии определяется значением свойства Pen.Color

pmNotCopy

Цвет линии является инверсным по отношению к значению свойства Pen.Color

pmNot

Цвет точки линии определяется как инверсный по отношению к цвету точки полотна, в которую выводится точка линии

кисточка
Кисточка (canvas.Brush) используется методами, обеспечивающими вычеркивания замкнутых областей, например геометрических фигур, для заливки (закрашивания) этих областей. Кисть, как объект, обладает двумя свойствами.

Свойства объекта ТВrush (кисть)

свойство

определяет

Color

Цвет закрашивания (заливки) замкнутой области

Style

Стиль (тип) заполнения области

Область внутри контура может быть закрашена или заштрихована. В первом случае область полностью перекрывает фон, а во втором — через незаштрихованные участки области будет виден фон.

В качестве значения свойства Color можно использовать любую из констант типа TColor (см. Список констант для свойства Pen.color).

Константы, позволяющие задать стиль заполнения области, приведены в таблице.

Значение свойства Brush.style определяют тип закрашивания

Константа — Тип заполнения (заливки) области
bsSolid сплошная заливка
bsClear Области не закрашивается
bsHorizontal горизонтальное штриховки
bsVertical вертикальное штриховки
bsFDiagonal Диагональное штриховки с наклоном линий вперед
bsBDiagonal Диагональное штриховки с наклоном линий назад
bsCross Горизонтально-вертикальное штриховки, в клеточку
bsDiagCross Диагональное штриховки, в клеточку

Компонент Shape (фигура)

К стандартной библиотеки визуальных компонентов Delphi входят несколько объектов, с помощью которых можно придать прикладной программе оригинальный вид. Основные из них — Image(изображение) и Shape (фигура).

Компонент Shape (страница Additional) представляет собой различные геометрические фигуры, заштрихованы указанным стилем. Его свойство Pen определяет цвет и стиль линии построения. Свойство Brush определяет стиль и цвет закрашивания фигуры.

Рассмотрим на рисунках ниже фигуры, которые можно выбрать через свойство Shape и стиле заполнения и стиле линии построения. Также для этих фигур можно задать толщину линии, цвет, цвет заполнения. Это все можно выполнить через упомянутые свойства — Pen и Brush.

Читать  Практическая работа №16 – Научиться использовать графические процедуры и функции

image image

image

image

image

Окно программы «Стили заполнения областей»

вывод текста
Для вывода текста на поверхность графического объекта используется метод TextOut. Инструкция вызова метода TextOut в общем виде выглядит следующим образом:

Объект.Canvas.TextOut (x, y, Текст) где

image

объект — имя объекта, на поверхность которого выводится текст;

х, у — координаты точки графической поверхности, от которой выполняется вывод текста;

Текст — переменная или константа символьного типа, значение которой определяет выводимый.

Координаты области вывода текста Шрифт, который используется для вывода текста, определяется значением свойства Font соответствующего объекта canvas. Свойство Font является объектом типа TFont. В таблице, приведенной ниже, перечислены свойства объекта TFont, позволяющие задать характеристики шрифта, используемого методами TextOut и TextRect для вывода текста.

Свойства объекта TFont

 

 

определяет

Name

Шрифт, используемый. В качестве значения следует использовать название шрифта, например Arial

Size

Размер шрифта в пунктах (роints). Пункт- это единица измерения размера шрифта, используемого в полиграфии. Один пункт равен 1/72 дюйма

Style

Стиль изображения символов. Возможно: нормальным, полужирным, курсивом, подчеркнутым, перечеркнутым. Стиль задается с помощью следующих констант: fsBold (полужирный), fsltalic (курсив), fsUnderline (подчеркнутый), fsStrikeOut (перечеркнутый).

Свойство style является множеством, что позволяет комбинировать необходимые стили. Например, инструкция программы, устанавливает стиль «полужирный курсив», выглядит так:

Объект. Canvas. Font = [fsBold, fs Italic]

Color

Цвет символов. В качестве значения можно использовать константу типа Tcolor

Примечание. Область вывода текста закрашивается текущим цветом кисти.

Поэтому перед выводом текста свойства Brush.Color нужно присвоить значение bsClear или задать цвет кисти, совпадающий с цветом поверхности, на которую выводится текст.

Следующий фрагмент программы демонстрирует использование функции Textout для вывода текста на поверхность формы:

with Form1.Canvas do begin

Font.Name = «Tahoma ‘; // установить характеристики шрифта

Font.Size = 20;

Font.Style = [fsltalic, fsBold];

// область вывода текста не закрашивается Brush.Style = bsClear;

TextOut (0, 10 ‘Delphi 7’); end;

После вывода текста методом Textout указатель вывода (карандаш) перемещается в правый верхний угол области вывода текста.

Иногда требуется вывести какой-либо текст после сообщения, длина которого во время разработки программы неизвестна. Например, это может быть слово «грн.» после значения числа, записанного прописью. В этом случае необходимо знать координаты правой границы уже выведенного текста. Координаты правой границы текста, выведенного методом Textout, можно получить, обратившись к свойству PenPos.

Следующий фрагмент программы демонстрирует возможность вывода строки текста при помощи двух инструкций Textout.

with Form1.Canvas do begin TextOut (0, 10 ‘СРЕДА’);

TextOut (PenPos.X, PenPos.Y, «Delphi 7 ‘); end;

вывод иллюстраций

Наиболее просто вывести иллюстрацию, которая находится в файле с расширением bmp, jpg или ico, можно с помощью компонента image, значок которого находится на вкладке Additional палитры.

image

Ниже перечислены основные свойства компонента image.

Свойства компонента image

свойство

определяет

Picture

Иллюстрацию, которая отображается в поле компонента

Width, Height

Размер компонента. Если размер компонента меньше размера иллюстрации, и значения свойств AutoSize и Stretch ровно False, то отображается часть иллюстрации

AutoSize

Признак автоматического изменения размера компонента в соответствии с реальным размера иллюстрации

Stretch

Признак автоматического масштабирования иллюстрации в соответствии с реальным размера компонента. Чтобы было выполнено масштабирование, значение свойства AutoSize должно быть False

Visible

Отображается компонент, и, соответственно, иллюстрация, на поверхности формы

Иллюстрацию, которая будет выведена в поле компонента image, можно задать как во время разработки формы приложения, так и во время работы программы.

При разработке формы иллюстрация задается установкой значения свойства picture путем выбора файла иллюстрации в стандартном диалоговом окне, которое появляется в результате щелчка на командной кнопке Load окна Picture Editor.Чтобы запустить его, нужно в окне Object Inspector выбрать свойство Picture и щелкнуть на кнопке с тремя точками.

Если размер иллюстрации больше размера компонента, то свойства Stretch нужно присвоить значение True и установить значения свойств width и Height пропорционально реальным размерам иллюстрации.

Чтобы вывести иллюстрацию в поле компонента image во время работы программы, нужно применить метод LoadFromFile свойству Picture, указав в качестве параметра имя файла иллюстрации. Например, инструкция

Form1.Image1.Picture.LoadFromFile ( ‘e: \ temp \ bart.bmp’)

загружает иллюстрацию из файла bart.bmp, что находится в папке temp, что находится на диске e и выводит ее в поле вывода иллюстрации (image1).

Метод LoadFromFile позволяет отображать иллюстрации различных графических форматов:

BMP, WMF, JPEG (файлы с расширением jpg).

Ход работы

      1. Создать в своей папке в папке MyPrograms_Delphi папку ПР№8.
      2. Откройте новый проект.Для рисования фигур используем процедуру TForm1.FormPaint: procedure TForm1.FormPaint (Sender: TObject);beginColor = clInfoBk; // устанавливаем цвет фона светло-желтымДля каждой фигуры отдельно устанавливаем свойства «Кисть» и «Карандаш».imageВ данном фрагменте приводится метод для прорисовки многоугольника, причем количество вершин многоугольника определяется количеством точек в множестве Points
      3. Откройте новый проект.
      4. Создать проект «Движение фигуры Shape»На примере фигуры Shape ознакомиться с тем как можно создать перетягивание компонента во время работы программы.
      5. Разместить на форме компонент Shape.
      6. Используя закладку Events в инспекторе объектов, создать для этого компонента процедуры обработки событий: OnMouseDown (нажатие кнопки мыши), OnMouseMove (движение мыши), OnMouswUp (отпускания кнопки мыши в области объекта).
      7. Листинг программы будет таков:

        Записке к проекту. Когда курсор мыши находится в области компонента Shape и в этот момент нажать кнопку мыши, переменные x1, y1 запомнят координаты размещения фигуры, а флажок примет значение true (flag = true) и это означает, что перетягивание началось. Если кнопку мыши не отпускать и двигаться, то в процедуре TForm1.Shape1MouseMove, происходит пересчет координат объекта Shape относительно системы координат формы. Это создает эффект движения фигуры под курсором мыши. если

        кнопку мыши отпустить, то выполнится только одна операция flag = false и перетягивание завершится.

      8. Откройте новый проект.Создать проект «Персональный компьютер», в котором предусмотреть возможность просматривать несколько рисунков, а также, чтобы можно было рисунок уменьшить или увеличить.
      9. Создайте соответствующую форму, установите на форму 6 кнопок BitBtn, 3 кнопки Button и компонент Image.
      10. На кнопки BitBtn установите изображение рисунков через свойство Glyp. Одну из кнопок Button назовите «Увеличить рисунок», а вторую «Уменьшить рисунок»
      11. Компонента Image шагайте свойство Stretch — true.
      12. Напишите процедуры для кнопок BitBtn1-BitBtn6 и Button1, Button2.
      13. Процедуры для этих кнопок могут быть такими:

        image image

         

      14. Для загрузки рисунка использован метод: Form1. Image1.Picture.LoadFromFile ().

Сохраните проект. Запустите проект на выполнение, проверьте правильность работы этого проекта.

Домашнее задание

image

  1. Проект «Shape»
    • Разметить на форме пять компонентов Shape
    • Используя свойство Shape компонентов, предоставить фигурам вида
    • Прямоугольника (stRectangle)
    • Круги (stCircle)
    • Эллипса (stElipse)
    • Квадрата (stSquere)
    • Прямоугольника с закругленными углами (stRoundRect)
    • Используя свойства Pen.Color, Pen.Width, Pen.Style, изменить вид линий и фигур.image
    • Используя свойства Brush.Style, Brush.Style, залить фигуры нужным цветом и стилем.
      1. Создать проект «Фотоальбом»

контрольные вопросы

  1. Как намечает на форме Delphi — программы прямоугольник?
  2. Укажите свойства объекта TPen (карандаш).
  3. Назовите значение свойства Color, определяющий цвет линии.
  4. Назовите значение свойства Реn.color, что определяет вид линии.
  5. Укажите свойства объекта ТВrush (кисть).
  6. Для чего предназначена свойство Brush.style?
  7. Для чего предназначен компонент Shape?
  8. Как нарисовать различные геометрические фигуры?
  9. Как залить фигуры нужным цветом и стилем?
[Всего голосов: 4    Средний: 5/5]