Векторная графика, элемент большой Пат

   видео смотрим тут - http://youtu.be/uW3vu8Y1e8Q

   Паттерны, как графические элементы, у меня уже были. Главным недостатком этих векторных примитивов является то, что рисуются они поточечно, рисуются медленно, и размер имеют небольшой - квадрат со стороной 100 или 200 пикселей в оригинале.
   Оригинал большого Паттерна, или, как я его называю, «Пата», в размере не ограничен. Следовательно, и разрешение для него велико - он позволяет получать изображение высокого качества.
   О технических особенностях создания большого «Пата» и о работе с ним, я сейчас расскажу.

   Рисуется Пат не так, как рисуется Паттерн – если для паттерна используется метод PSet, заполняющий рисунок точками разного цвета, то Пат воспроизводится методом PaintPicture, заполняющим прямоугольную область рисунка сразу. Естественно, что второй процесс проходит значительно быстрее.
   Изображения, созданные вторым методом, можно передвигать, можно масштабировать (причём, раздельно по направлениям X,Y), можно отражать слева-направо и сверху-вниз, но нельзя поворачивать. Является ли последнее недостатком? В общем-то да. Но не во всех случаях повороты нужны, на колесе обозрений, например, кабинки идут по кругу, сохраняя свою ориентацию. Деревья растут тоже снизу вверх, а не как-то по другому. И для всяких декораций в векторных анимациях паты очень хороши.

   Основой Пата является растровое изображение. Для каждого Пата своё, в своём отдельном файле. И даже не в одном файле, а в двух – в первом файле содержится изображение на белом фоне (белый фон считается прозрачным), а во втором – силуэт, чёрное изображение на белом фоне. Силуэтное изображение используется как маска.

   Пат является синтаксическим двойником прямоугольника, и при перемещениях он этим прямоугольником заменяется. Пат имеет логотип 12 и единственную (титульную) строку. За логотипом следуют X,Y координаты углов прямоугольника и значение Плотности, а в 6-й позиции этой строки находится число (тут мы видим 1005), указывающее на название файла -

        1>     12  192  328  246  371  2  1005  0  20000  10143  5 

    Элемент «Пат», делается при Градиенте 6, и делается так же, как прямоугольник, то есть, после обозначения диагональных вершин - кликом по кнопке Fill. На кнопках-компонентах цвета верхней панели при этом должен быть выставлен номер файла, хранящего изображение Пата.
    Например, числу 005 на кнопках соответствует файл pat 1005.bmp и файл pat 1005m.bmp - первый содержит изображение, а второй (того же размера)- чёрный силуэт этого изображения. Силуэт приготовляется из изображения заливкой с опцией # на кнопке цвета.
    Номер Пата может быть любым – от номера 000 до номера 999. Все используемые программой Паты должны находиться в папке APat текущего каталога.

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

      КАК РИСУЕТСЯ ПАТ

    При Плотности 0 Пат рисуется в натуральную величину, причём, центр его находится в центре связанного с Патом прямоугольника. При Плотности 1 размер поля прямоугольника, заменяющего Пат при перемещениях, подгоняется под натуральный размер Пата. Для иных значений изображение, считанное с Пата, подгоняется под размер прямоугольника (отдельно по X и Y). 
    То, как именно рисуется Пат, зависит от числа, стоящего в 5-й позиции строки. Число это равно цифре на кнопке «Плотность» и устанавливается вместе с цветом контура, цветом фона и толщиной контура по общему правилу – нужно выбрать элемент, кликнув строку «Параметры», проверить их, затем изменить и, переведя предохранитель из положения «о» в положение «ф», установить новые значения параметров кликом по кнопке «закрепить». И не забудьте потом вернуть предохранитель в его исходное состояние,

    Плотность 3,7,9 отразит Пат слева-направо, 4 - сверху-вниз, 5 – сделает то и другое сразу. Плотности 6,7 создают окрашенное изображение, цвета которого контрастируют с установленным цветом фона и зависят от него. При цифрах 8,9 окрашенный под цвет фона Пат помещается на контрастное поле.
    Если на маленькой кнопочке ниже, при Плотности равной 6 или 7, стоит цифра 1-5, то это опция сдвига, вносящего вертикальную графику в окрашенное изображение. Именно так на иллюстрации нарисована цветущая яблоня. Как вы видите, вариации тут большие – из одного и того же изображения можно сделать цветущую яблоню, можно – берёзу, а, если хочется, то и картину.

     ТЕХНОЛОГИЯ РАБОТЫ С ИЗОБРАЖЕНИЕМ И СИЛУЭТОМ

   Теперь я расскажу про технологию всего этого. Работа с методом PaintPicture весьма примечательна. Метод этот преобразовывает изображение на поле рисунка (поле1) в указанном прямоугольнике, пользуясь несколькими опциями (константами), которые и указывают, как именно делается преобразование.
   Для константы «Invert» никакой другой информации не нужно, указанная прямоугольная область рисунка попросту инвертируется в своём цвете – каждый бит, описывающий цвет, приобретает своё противоположное значение.
   В других преобразованиях в качестве источника в программе используется поле9. В отличие от поля1 это поле невидимо. Тем не менее, и для него в операторе PaintPicture задаётся прямоугольник поля, участвующего в преобразовании. Для преобразований, связанных с Патом, чаще всего, указывается всё поле целиком.
   Константа «And» оставляет в положении 1 только те биты цвета, которые имели значение 1 на обоих полях. Это преобразование, вместе с инвертированием, используется для получения векторной фигуры – Пат на прозрачном фоне.

     НАКЛАДЫВАЕМ ИЗОБРАЖЕНИЕ НА ПРОЗРАЧНОМ ФОНЕ

   Как это делается?
   Прежде всего мы загружаем изображение из файла-силуэта на поле9.
   Затем инвертируем указанную область на рисунке.
   Затем делаем преобразование And от поля9 к рисунку. В результате, на поле1 у нас получается чёрная дыра – силуэт, в окружении инвертированной периферии.
   Затем вновь применяем операцию Invert к области на поле1. Что получим в результате? В указанной области рисунка мы получили прежнюю периферию, но уже с белым силуэтом посредине.
   Теперь загружаем на поле9 файл, содержащий изображение Пата на белом фоне. И вновь проводим преобразование And. И получим то, что хотели – получии изображение Пата в центре, сохранив всю прежнюю периферию в том виде, в котором она и была до начала рисования Пата.

   Итак, первая фаза процесса успешно закончена.
   Правда, Пат у нас имеет свой натуральный цвет и дополнительно не окрашен. Цвет, заданный в качестве фонового в поз.8 титульной строки никак на окраску Пата не повлиял. А хотелось бы иметь такую возможность.
   Поэтому, продолжим наши преобразования дальше.

     ПОЛУЧАЕМ ОКРАШЕННУЮ КАРТИНКУ НА КОНТРАСТНОМ ФОНЕ

   Процедурой Form1.Picture1.Picture = Form1.Picture1.Image закрепим полученное изображение на рисунке. Зачем это нужно? А затем, чтобы можно было бы вернуться к нему впоследствии.
   Теперь попросту заполним прямоугольник Пата на рисунке цветом фона. Это легко сделать обычным оператором Line с опцией BF на конце.
   Теперь проводим преобразование с константой «Xor». Это преобразование ставит 1 только в те биты, которые по своему значению на поле9 и на поле1 различаются. А вы помните, что у нас на этих полях находится? На поле9 у нас записан Пат с белым окружением, а на поле1 – цветной прямоугольник. Если этот прямоугольник очень тёмный, то мы получим картинку Пата почти в натуральных цветах, а если прямоугольник цветной, то изображение на нём может иметь цвета хоть и неожиданные, но созвучные цвету фона, а вот окружение будет иметь цвет, контрастный к фоновому.
   Именно так получена картинка с синим фоном на иллюстрации.

     ПОЛУЧАЕМ ОКРАШЕННУЮ КАРТИНКУ, НАЛАГАЕМУЮ НА ПРОЗРАЧНОМ ФОНЕ

   Продолжим наши преобразования. Хотелось бы иметь картинку, окрашенную в другой цвет, но без сопутствующего окружения прямоугольного вида.
   Опять прибегнем к помощи силуэта и загрузим его на поле9.
   На этот раз соединим силуэт с изображением, воспользовавшись преобразованием PaintPicture с константой «Or» (единица в бит цвета ставится в любом случае – будь она на поле9, или на поле1). Поскольку центр силуэта у нас чёрный, то изображение в центре не пострадает, а вот его окружение станет гарантировано белым.
   Результат с помощью Form1.Picture9.Picture = Form1.Picture1.Image перенесём на поле9. А поле1 с помощью Form1.Picture1.Cls восстановим в его существенно более раннем виде – на нём изображён Пат в своём натуральном цвете, и окружённый фоном, который был на рисунке ещё до начала рисования.
    А на поле9 у нас находится тот же Пат другого цвета с белым окружением. Но зачем нам именно этот другой цвет? Давайте откажемся и от одного цвета, и от другого, но соединим их с помощью операции And.
    Идея, как оказалось, гениальная. Мы получаем Пат, окрашенный в разнообразные цвета, контрастирующие с фоновым, а если, используя процедуру, мы сдвинем изображение налагаемое на рисунок на несколько пикселей вправо, то получим контрастное графическое оттенение вертикально расположенных деталей. И это оттенение на иллюстрации вы можете видеть на изображении цветущей яблони. Постепенное изменение величины сдвига сопровождается и плавным изменением цвета и фактуры листвы дерева, что может быть выгодно использовано при анимации.

    Таким образом, Паты, как элементы векторной графики, представляются весьма перспективными для практического использования в разных задачах и удачно вписываются в общую концепцию векторной графики, принятую в программе.
__________
30.12.2020

ДОПОЛНЕНИЕ === тому, кто интересуется конкретикой программирования

'========
Public Sub Wpat(N As Integer)     'рисуем Пат   N-ссылка на номер строки описывающей Пат
Dim W As Long, H As Long, S As String, Ad1 As String, Ad2 As String, K As Integer
Dim X As Long, Y As Long, C As Long, DW As Integer, P5 As Integer, o As Integer

  K = Pvv(N, 6):
  If Len(Dir(CurDir + "\APat", 16)) = 0 Then Exit Sub
    Ad1 = CurDir() + "\APat\/pat" + Str(K) + ".bmp":
    If Len(Dir(Ad1)) = 0 Then Form1.Text2 = " Пат" + Str(K) + " не найден": Exit Sub
    Ad2 = CurDir() + "\APat\/pat" + Str(K) + "m.bmp":
    If Len(Dir(Ad2)) = 0 Then Form1.Text2 = " Силуэт" + Str(K) + " не найден": Exit Sub
  Form1.Picture9.Picture = LoadPicture(Ad2):
  K9w = (Form1.Picture9.Width - 60) / 15: K9h = (Form1.Picture9.Height - 60) / 15:
  X = (Pvv(N, 1) + Pvv(N, 3)) / 2: Y = (Pvv(N, 2) + Pvv(N, 4)) / 2: W = K9w: H = K9h:
  P5 = Pvv(N, 5): o = Int(P5 / 10): P5 = P5 - o * 10 'Плотность и сдвиг
  Select Case P5:
    Case 0: X = X - W / 2: Y = Y - H / 2
    Case 1: X = X - W / 2: Y = Y - H / 2:
            Pvv(N, 1) = X: Pvv(N, 2) = Y: Pvv(N, 3) = X + W: Pvv(N, 4) = Y + H:
    Case Else: W = Pvv(N, 3) - Pvv(N, 1): H = Pvv(N, 4) - Pvv(N, 2): X = X - W / 2: Y = Y - H / 2
  End Select: Xaa = X: Yaa = Y
  If P5 = 3 Or P5 = 7 Or P5 = 9 Then X = X + W - 1: W = -W:
  If P5 = 4 Then Y = Y + H - 1: H = -H:
  If P5 = 5 Then X = X + W - 1: Y = Y + H - 1: W = -W: H = -H:
  Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbDstInvert
  Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbSrcAnd
  Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbDstInvert
  Form1.Picture9.Picture = LoadPicture(Ad1):
  Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbSrcAnd
  If P5 > 5 Then 'окрашивание ====
    Form1.Picture1.Picture = Form1.Picture1.Image:
    DW = Form1.Picture1.DrawWidth: Form1.Picture1.DrawWidth = 1: C = ItoL(Pvv(N, 9))
    If P5 = 8 Then Form1.Picture1.Line (X, Y)-(X + W - 1, Y + H - 1), C, BF:
    If P5 = 9 Then Form1.Picture1.Line (X, Y)-(X + W + 1, Y + H - 1), C, BF:
    If P5 < 8 Then Form1.Picture1.Line (X - 1, Y)-(X + W - 1, Y + H - 1), C, BF:
    Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbSrcInvert 'Xor
    If P5 < 8 Then
    Form1.Picture9.Picture = LoadPicture(Ad2):
    Form1.Picture1.PaintPicture Form1.Picture9, X, Y, W, H, 0, 0, K9w, K9h, vbSrcPaint 'Or
    Form1.Picture9.Picture = Form1.Picture1.Image: Form1.Picture1.Cls:
    Form1.Picture1.PaintPicture Form1.Picture9, X + 1 + o, Y, W, H, X + 1, Y, W, H, vbSrcAnd
   
    Form1.Picture1.DrawWidth = DW:
  End If: End If
End Sub
'========