Векторная графика в редакторе для рисования

   В мире есть много любопытных вещей, о которых мы знаем, и которыми даже пользуемся, но вовсе не задумываемся о том, как они устроены. Между тем, как они устроены очень интересно.
   Мой рассказ об элементах векторной графики именно из этой серии - рассказы для любознательных людей на тему "Как это сделано".

   Некоторые элементы векторной графики могут быть полезными и в растровом редакторе. Такие примитивы, как прямая линия, прямоугольник, окружность или кривые Безье, сочетаясь между собой, создают фигуры с гладкими очертаниями, которые при рисовании от руки делать затруднительно.
   Кроме того, вводя эти примитивы в свой редактор, я позаботился о том, чтобы нарисованное можно было бы выводить в файл формата  svg,  находясь непосредственно в процессе рисования.  Файл svg это стандартный файл для хранения векторной графики, где всё нарисованное представлено в текстовом виде. Содержимое этого файла можно править в Блокнотике, а саму картинку просматривать в браузере.

  Из перечисленных примитивов, конечно, самыми интересными являются кривые Безье. О них я вам сейчас и расскажу.

  Представьте треугольник с боковыми сторонами 1-2 и 2-3. Как бы нам сделать плавный переход с одного направления на другое?
  Попробуем использовать для этого метод трёх красных муравьёв.
  Почему муравьёв?
  Да потому, что они ползут целенаправленно и наперёд рассчитывают свой путь и время.
  Первый муравей должен за определённое время приползти из точки 1 в точку 2, а второй, за это же время, - из точки 2 в точку 3. Но это не всё - они ползут, и натягивают между собой нитку, по которой столь же расчётливо ползёт третий муравей. Вот он-то и прочерчивает траекторию, которая сопрягает боковые стороны треугольника, и которая называется кривой Безье 2-го порядка.

  Очень любопытная кривая!
  Давайте, подвигаем вершину треугольника, и всё время будем при этом прочерчивать кривую Безье. Например, приблизим вершину к основанию треугольника и пойдём за основание дальше. Тонкая рыжая линия сформирует нам лучок, который мы можем даже прорастить, приделав к нему зелёные пёрышки веером.
  Или мы можем таким способом начертить сердечко, которое означает «я люблю кривые Безье».

  На практике используются кривые Безье не второго, а третьего порядка. Они имеют не одну, о две вершинных точки с номерами 2 и 3, а номера 1 и 4, как вы уже догадались, обозначают точки начала и конца кривой.
  Начальная и конечная точки неподвижны, а точки 2 и 3 можно двигать, регулируя тем самым изгиб линии.

  Опять же, это движение может осуществляться двумя способами – мы можем двигать непосредственно вторую и третью точки, или мы можем двигать их с помощью механизма, напоминающего вёсла, уключины которых вставлены в начальную и конечную точки нашей лодки, то бишь, кривой.
  Передвигая рукоять весла, мы его лопастью передвигаем и соответствующую уключине вершинную точку. И это оказывается удобнее, чем просто грести руками. Все редакторы, которые я знаю, именно так и устроены.
  «Весло» называется в них направляющей.

  Чувствуете, механизм рисования кривых Безье совсем простой!

  Я обрисовал кривыми Безье всё того же «мальчика для битья», изображение которого я всегда использую в тестах своей программы. По ходу дела велась запись в файл svg, в котором она оказалась в таком виде:

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 105 68 c 0 0 12-26 47-30" stroke="rgb( 180, 180, 180)" stroke-width=" 3" fill="transparent"/>
<path d="M 152 38 c 0 0 36-18 53-11" stroke="rgb( 180, 180, 180)" stroke-width=" 3" fill="transparent"/>
. . .
<path d="M 240 197 c 0 0-17-7-17-9" stroke="rgb( 180, 180, 180)" stroke-width=" 3" fill="transparent"/>
<circle cx=" 173" cy=" 190" r=" 7.28" stroke="rgb( 124, 0, 254)" stroke-width=" 3" fill="transparent"/>
<circle cx=" 248" cy=" 191" r=" 7" stroke="rgb( 124, 0, 254)" stroke-width=" 3" fill="transparent"/>
</svg>

В этом тексте каждой кривой Безье соответствует отдельная строчка, потому в нём нетрудно разобраться. В конце текста описываются две окружности, также присутствующие в рисунке.
  Полученную обрисовку вы видите на иллюстрации.
  Заменив в файле символы "transparent" на символы "0", мы получим чёрную заливку векторных элементов и придадим нашему мальчику вполне современный стильный вид.
В другом варианте обрисовки мальчик стал арапчонком.
_________
8.06.2020

Примечание.
   Как видно из приведённых выше строк, обрисовывая мальчика, мы машем в основном третьим веслом, тогда как лопасть (и рукоять) второго весла покоится на уключине в конце лодки – с 0 0 …
   И не думайте, что лодка плывёт задом наперёд - корма её находится в начале кривой Безье, а нос - в конце этой кривой, то есть, в точке №4.

Дополнение.
Так рисуется кривая Безье (X,Y -положение указателя мыши):

   If Fbe = 2 Then Xb2 = 2 * Xb1 - X: Yb2 = 2 * Yb1 - Y: 'весло2
   If Fbe = 3 Then Xb3 = 2 * Xb4 - X: Yb3 = 2 * Yb4 - Y: 'весло3
      Xo1 = Xb1: Yo1 = Yb1:
   For T = 0 To 1.001 Step 0.02
      Xo = (1 - T) ^ 3 * Xb1 + 3 * (1 - T) ^ 2 * T * Xb2 + 3 * (1 - T) * T ^ 2 * Xb3 + T ^ 3 * Xb4
      Yo = (1 - T) ^ 3 * Yb1 + 3 * (1 - T) ^ 2 * T * Yb2 + 3 * (1 - T) * T ^ 2 * Yb3 + T ^ 3 * Yb4
      Form1.Picture1.Line (Xo, Yo)-(Xo1, Yo1), Color     'рисуем отрезками линий
      Xo1 = Xo: Yo1 = Yo:
    Next T:
'=============
О кривых Безье подробно можно узнать тут - http://learn.javascript.ru/bezier