Урок 30. Создаем графический редактор

Урок из серии: «Программирование на Visual Basic.NET для школьников»

В предыдущем уроке рассказывалось о применении элемента управления MainMenu для создания горизонтального меню приложения.

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

Подробнее о создании меню можно посмотреть в уроке: «Создаем горизонтальное меню«.

Проект «Графический редактор»

Задание. Создать  простейший графический редактор, который позволит рисовать линии, прямоугольники, закрашенные прямоугольники, окружности и закрашенные окружности. Ввод координат осуществлять щелчками по графическому полю. Для рисования фигур использовать меню и панель инструментов. Обеспечить возможность установки для пера и кисти любого цвета из палитры цветов. Обеспечит возможность открытия и сохранения файлов.

1. 1. Разместим на форме:
      • графическое поле PictureBox1, которое будет использоваться в качестве области рисования;
      • четыре надписи для вывода названий координат;
      • четыре надписи для вывода значений координат.

      Настроить свойства объектов так, чтобы они выглядели как на образце.

      

   2. Объявим переменные, которые будут содержать координаты точек, а также перо и кисть, которые будут использоваться для рисования графических примитивов.

      Dim x1, y1, x2, y2 As Integer
      Dim Pen1 As New Pen(Color.Black, 3)
      Dim Brush1 As New SolidBrush(Color.Red)

      Для   создания области рисования используется второй способ с использованием растрового изображения image1, которое можно сохранить как графический файл. Объявить image1 как растровое изображение.

      Dim Image1 As New Bitmap(300, 300)
      Dim Graph2 As Graphics

   3. Напишем программный код процедуры PictureBox1_MouseDown, который обеспечивает запоминание и вывод координат щелчков левой и правой кнопками мыши по графическому полю.Чтобы создать заготовку для процедуры PictureBox1_MouseDown, в редакторе кода в списке Имя класса выберите PictureBox1,  в списке Имя метода   — MouseDown.В программном коде будут использоваться данные о щелчке, передаваемые через аргумент e обработчика события:
      

      Свойство	Описание
      e.Button	Возвращает сведения о том, какая кнопка мыши была нажата.
      e.X	Возвращает x-координату мыши.
      e.Y	Возвращает y-координату мыши.

      Оператор выбора, в зависимости от условия (значения свойства e.Button) запоминает и выводит ту или иную пару координат.

       Select Case e.Button
             Case MouseButtons.Left
                 x1 = e.X
                 y1 = e.Y
                 Label5.Text = x1
                 Label6.Text = y1
             Case MouseButtons.Right
                 x2 = e.X
                 y2 = e.Y
                 Label7.Text = x2
                 Label8.Text = y2
       End Select

   4. Создадим меню графического редактора, для чего используем элемент управления mainMenu1.
      

      Файл	Графические примитивы	Цвет
      Открыть	Линия	Перо
      Сохранить	Прямоугольник	Кисть
      	Закрашенный прямоугольник
      	Окружность
      	Закрашенная окружность
      	Очистить

      Для этого:

      • Разместим на форме элемент управления ManMenu1.
      • В появившемся в левом верхнем углу формы в редакторе меню создадим заголовок первого уровня. В поле Прототип для текста ввести пункт меню Графические примитивы.
      • Для создания пунктов меню перейти на следующую строку в редакторе меню. Ввести пункты меню Линия, Прямоугольник, Закрашенный прямоугольник, Окружность, Закрашенная окружность и Очистить.

      Аналогично создать пункты меню верхнего уровня Файл и Цвет и их подпункты.

      Меню готово, форма принимает вид:

      

   5. Теперь нужно запрограммировать процедуры, соответствующие строкам меню «, для обработки выбора пользователя. Они будут выполняться при наступлении события щелчок на соответствующем пункте меню.
   6. Напишем процедуры для меню «Графические примитивы».Для этого:
      • Выполните двойным щелчком по пункту меню Рисование линии. Ввести программный код:

         Dim Graph1 As Graphics = Graphics.FromImage(Image1) 
         PictureBox1.Image = Image1
         Graph1.DrawLine(Pen1, x1, y1, x2, y2)

      • Выполните двойным щелчком по пункту меню Прямоугольник. Написать  программный код.  Для вычисления ширины и высоты прямоугольника использовать абсолютное значение разности соответствующих координат. Программный код:

         Dim Graph1 As Graphics = Graphics.FromImage(Image1)
         PictureBox1.Image = Image1
         Graph1.DrawRectangle(Pen1, x1, y1, Math.Abs(x2 - x1), Math.Abs(y2 - y1))

      • Выполните двойным щелчком по пункту меню Закрашенный прямоугольник.Ввести программный код:

         Dim Graph1 As Graphics = Graphics.FromImage(Image1)
         PictureBox1.Image = Image1
         Graph1.DrawEllipse(Pen1, x1, y1, Math.Abs(x2 - x1), Math.Abs(y2 - y1))

      • Выполните двойным щелчком по пункту меню Окружность. Ввести программный код обработчика события рисования окружности:

         Dim Graph1 As Graphics = Graphics.FromImage(Image1)
         PictureBox1.Image = Image1
         Graph1.DrawEllipse(Pen1, x1, y1, Math.Abs(x2 - x1), Math.Abs(y2 - y1))

      • Выполните двойным щелчком по пункту меню Окружность. Ввести программный код обработчика события рисования закрашенной окружности:

         Dim Graph1 As Graphics = Graphics.FromImage(Image1) 
         PictureBox1.Image = Image1
         Graph1.DrawEllipse(Pen1, x1, y1, Math.Abs(x2 - x1), Math.Abs(y2 - y1))
         Graph1.FillEllipse(Brush1, x1, y1, Math.Abs(x2 - x1), Math.Abs(y2 - y1))

      • Создать программный код обработчика события очистки области рисования.

         Dim Graph1 As Graphics = Graphics.FromImage(Image1)
         PictureBox1.Image = Imag
         Graph1.Clear(Color.White)

1. Создадим заготовки обработчиков событий и напишем программный код  для пунктов меню «Цвет».Для этого:
   • Выполните двойным щелчком по пункту меню Перо. Введите программный код обработчика события установки цвета пера:

      ColorDialog1.ShowDialog()
      Pen1.Color = ColorDialog1.Color()

   • Выполните двойным щелчком по пункту меню Кисть.  Ввести программный код обработчика события установки цвета кисти:

      ColorDialog1.ShowDialog()
      Brush1.Color = ColorDialog1.Color()

2. Создадим заготовки обработчиков событий и напишем программный код  для пунктов меню «Файл» Открыть и Сохранить.Для этого:
   • Выполните двойным щелчком по пункту меню Открыть.  Ввести программный код обработчика события  открытия растрового графического файла:

      OpenFileDialog1.ShowDialog()
      PictureBox1.Image = Image.FromFile(OpenFileDialog1.FileName)

   • Выполните двойным щелчком по пункту меню Открыть.  Ввести программный код обработчика события  сохранения растрового графического файла:

      SaveFileDialog1.Filter = "bmp (*.BMP)|*.BMP"
      SaveFileDialog1.ShowDialog()
      Image1.Save(SaveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Bmp)

   Для вывода диалоговых соответствующих диалоговых окон используются диалоги openFileDialog1 и saveFileDialog1 и метод showDialog()

3. Запустить проект. Создать рисунок по образцу:Для того чтобы определить координаты для графической фигуры, выполните щелчки левой и правой кнопками мыши по графическому полю. На надписи будут выведены координаты двух точек.С использованием меню Цвет установить цвета пера и кисти.

   С использованием меню Графические примитивы нарисовать графические фигуры.

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

4. Сохранить проект

В этом уроке мы создали простейший графический редактор.

В следующем уроке мы создадим для него панель инструментов.

Следующий урок: «Создаем панель инструментов»