Проект Small Basic #5 "Мини-paint"

Задача

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

Видео с готовым результатом

Ход работы

1. В программе типа Paint нет самостоятельных объектов, которые нужно анимировать. Всё происходить по нажатию мышки пользователем. Поэтому введения игрового цикла loop() не требуется. Используем только подпрограмму setup():
Sub setup 
  width = 800
  height = 600

  GraphicsWindow.Width = width
  GraphicsWindow.Height = height
  GraphicsWindow.CanResize = "false"
  GraphicsWindow.BackgroundColor = "#f2f2f2"
EndSub

setup()

2. Добавим подпрограмму для создания интерфейса с кнопками и цветовой палитрой.
2.1. Сначала нарисуем белый холст:

Sub createInterface
  ' Белый холст, на котором будут рисовать
  GraphicsWindow.BrushColor = "White"
  GraphicsWindow.FillRectangle(0,100,width,height-100)
EndSub

Не забудьте вызвать её при инициализации программы.

2.2. Добавим кнопки для изменения размера кисти. Для этого нам потребуется объект Controls. Добавим кнопки в подпрограмму для создания интерфейса:

  GraphicsWindow.BrushColor = "Black"
  GraphicsWindow.FontSize = 20
  lessSizeBtn = Controls.AddButton("<",10,30)
  moreSizeBtn = Controls.AddButton(">",90,30)

2.3. Между этими кнопками отрисуем внешний вид и размер кисти. Так, как этот внешний вид будет часто меняться (уменьшение-увеличение, смена цвета), то создадим подпрограмму для отрисовки кисти. Сначала добавим цвет и размер кисти по умолчанию и установим его в setup():
brushWidth = 10
mainColor = "Black"

2.4. Напишем подпрограмму для отрисовки кисти:
Sub drawBrush
  ' Прячем прошлое изображение кисти
  Shapes.HideShape(brushIcon)
  ' Красим кисть в выбранный цвет
  GraphicsWindow.BrushColor = mainColor
  GraphicsWindow.PenWidth = 0
  ' Рисуем шейп для отображения кисти
  brushIcon = Shapes.AddEllipse(brushWidth,brushWidth)
  Shapes.Move(brushIcon,63-brushWidth/2,45-brushWidth/2)
EndSub

2.5. Вызываем эту подпрограмму в подпрограмме для создания интерфейса.

2.6. Создадим подпрограмму для отрисовки палитры цветов. Похожую подпрограмму вы писали, когда заполняли эллипсами поле по горизонтали и вертикали, помните (GraphicsWindow, #2)? По вертикали начинаем с координаты 10, по горизонтали – со 140.
Sub newColorPallete
  ' Color pallete
  y=10
  For j=1 To 2 ' 2 ряда цветов
    x = 140
    For i=1 To 10 ' 10 клеток цветов
      GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
      GraphicsWindow.FillRectangle(x,y,40,40)
      x = x+40
    EndFor
    y = y+40
  EndFor
EndSub

Вызываем эту подпрограмму при создании интерфейса.

2.7. Нам ещё понадобится 2 кнопки для новой цветовой палитры и очистки холста. Дополним подпрограмму для создания интерфейса:
  ' New colors Btn
  GraphicsWindow.BrushColor = "Black"
  newColorsBtn = Controls.AddButton("New colors",580,30)
  
  ' Clear Btn
  GraphicsWindow.BrushColor = "Red"
  clearBtn = Controls.AddButton("Clear",720,30)

2.8. Поздравляю! Мы нарисовали интерфейс программы. Хоть он ещё и не работает)

Вопросы:
1. Почему при отрисовке холста от height отнимается 100?
2. Для чего мы в будущем будем использовать lessSizeBtn?
3. Как будет работать впоследствии алгоритм при нажатии на кнопку newColorsBtn?
Дальнейшие указания по ссылке (ментор введёт полный адрес):
https://docs.google.com/document/d/1SN0NfvMgqzwdF9QX_1ZZTHlXpCM9MOXZEhGKWw2lJk0/edit?usp=sharing

Комментарии