Векторная графика. Её структура и интерфейс

  За исключением формата SVG, структура представления и хранения элементов векторной графики пока ещё не регламентирована. Каждый редактор, использующий векторную графику, обычно организует её «под себя» - под свои собственные приёмы и задачи.
  Соответственно принятой структуре, приёмам и задачам, организуется и интерфейс программы – совокупность кнопок и выпадающих меню, расположенных на панелях управления.

  Хочу обратить ваше внимание на то, что интерфейс этот стараются делать, как правило, единообразным. Обычно работа с графикой ведётся через общую панель, на которой находятся так называемые «инструменты» - их можно выбрать, чтобы потом производить всякие действия, водя мышкой по чертежу и кликая ею.
  Широко применяются также и «горячие клавиши» - клавиши, нажав которые отдельно или в комбинации, можно произвести требуемое действие немедленно.

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


     КАК УСТРОЕНА ВЕКТОРНАЯ ГРАФИКА

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

  Ещё одна особенность векторной графики – на экран (в растровом виде!) она обычно выводится порциями, элементы рисуются поочерёдно и в процессе рисования перекрывают друг друга. Поэтому элемент, нарисованный последним, оказывается сверху, а элемент, нарисованный первым – в самом низу общей кучи.

     ЧИСЛЕННАЯ СТРУКТУРА ГРАФИКИ

  Важнейшим фактором, определяющим возможности программы и её интерфейс, является внутренняя организация численной структуры.
  В программе «Стереометрические модели» графика представлена в форме двухмерного массива целых чисел. Такое представление позволяет показать графику в виде компактной таблицы, которая читается удобнее, нежели формат SVG, и вместе с тем допускает совмещение графики с условием задачи, с организацией чтения и того, и другого, из общего текстового файла.
 
  Вот содержание подобного файла –

Задание 1.
В правильной треугольной пирамиде SABC
сторона основания AB равна 9, а боковое
ребро SA=6. На рёбрах AB и SC находятся
точки K и M, соответственно, причём
AK : KB = SM : MC=2:7.
Плоскость а содержит прямую KM и
параллельна прямой SA.
 а) Докажите, что плоскость а делит ребро SB в отношении 2 : 7, считая от вершины S.
 б) Найдите расстояние между прямыми SA и KM.

X  просмотр__   1-точка 2-отрезок 3-прямая 4,5-плоскость   N_строк= 8
 _____    x= 100  y= 400  u= 30  k= 40

    1>    2 -176  481  0  4245 -948  0  0  0  20546  2326  5  1
    2>    2  3273  3596  0 -176  481  0  0  0  2115   2326  5  2
    3>    2  4245 -948  0  3273  3596  0  0  0  12353  2326  5  3
    4>    2  3273  3596  0  2448  1043  1549  0  0  4179  2326  5  4
    5>    2  3488  2585  0  1864  917  1206  0  0  77  31008  5  5
    6>    2 -176  481  0  2448  1043  1549  0  0  0  2326  5  6
    7>    2  4245 -948  0  2448  1043  1549  0  0  0  2326  5  7
    8>    1  3488  2587  0  0  0  0  3  0  20555  2326  5  8

___
  Строки таблицы начинаются с логотипа графического элемента -
2 это логотип отрезка прямой, а 1 это логотип точки.
  Вслед за логотипом 2 в первой, второй и третьей позициях строки идут координаты X,Y,Z начальной точки отрезка. Координаты выражены в количестве пикселей, умноженном на число 10. Умножение делается для повышения точности вычислений.
  В следующих трёх позициях строки с логотипом 2 идут координаты X,Y,Z конечной точки отрезка.
  В 9-й позиции в зашифрованном виде указывается буквенно-индексное обозначение для конца отрезка. Код этого числа содержит также информацию о расположении букв относительно обозначаемой ими точки.
  В 10-й позиции зашифрован цвет векторного элемента. Поскольку три BGR компоненты цвета не вмещаются полностью в целочисленный формат, то количество бит, отведённых на каждый компонент, сокращено на три, и составляет не 8 бит (два байта), а только 5 бит.
  В 11-й позиции строки указана ширина графического элемента, а в 12-й позиции – его уникальный номер.
  Поскольку каждый векторный элемент имеет свой уникальный номер, и этот номер указан явно, то и общий интерфейс программы естественным образом привязывается к этому уникальному номеру.

  Читателю может показаться не совсем правильным то, что программист как бы искусственно втискивает информацию разной природы, например 6 байт цвета, в массив целых чисел, однако такие действия оказываются оправданными при обработке графического массива, например, при пересылке строк с одного места на другое они пересылаются без оглядки на ту информацию, которую они содержат.
  Также привлекательным является использование обычного «Блокнотика» для работы с графическими файлами. При иной структуре информации для этого потребовалась бы специальная программа.

     РОЛЬ СТРУКТУР

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

     ОТДЕЛЬНЫЕ ЭЛЕМЕНТЫ И СТРУКТУРЫ ИНТЕРФЕЙСА
 
    В программе «Стереометрические модели» уровни интерфейса разделены на обычный «O» и «G» - графический расширенный.  На обычном уровне доступны действия со средними кнопками левой панели. Это кнопки «загрузить» и «сохранить», «нарисовать» и «просмотр». Последнее действие показывает строки загруженной в программу графики.   На обычном уровне доступно  «вращение модели» и три кнопки мгновенного действия.
   Так называются кнопки, действие которых осуществляется кликом левой кнопки мыши по одному из графических объектов. Например, кнопка «п» - поставить точку, последовательно активируется в двух опциях – «поставить точку в указанном месте»  и «разделить отрезок в указанной пропорции», а действует при клике левой кнопки мыши по выбранному объекту.
   Аналогичным образом используется кнопка «/» - её опции позволяют удалить или продублировать выбранный элемент. Кнопка «о» обращает выбранный отрезок в прямую, а прямую – в отрезок, или заменяет плоскость нормалью к ней. 
   
  При выборе объекта кликом его идентификация (определение уникального номера) происходит по цвету.
  Суть этого действия заключается в разделении цвета по байтам – старшие байты компонент цвета заполняются в соответствии с содержимым целого числа в позиции 10, а младшие биты – значением целого числа в позиции 12. Уникальный номер выбранного элемента определяется в этом случае мгновенно и в один клик http://youtu.be/FksAuS1gevw
   Таким способом ликвидируется лишняя кнопка – кнопка-указатель, которая в обычных программах нужна именно для выбора того или иного графического объекта.  Казалось бы, облегчение простенькое, но оно, в совокупности с несколькими опциями активируемой кнопки, сильно упрощает и делает удобной работу с графикой.
 
   Другая структура интерфейса возникает при необходимости более сложных действий, или действий сразу с несколькими выбранными объектами.
  В режиме расширенной графики этому служит «стек выбранных элементов». Чтобы занести элемент в этот стек, нужно кликнуть по нему правой кнопкой мыши. Как вы уже догадались, и здесь идентификация элементов осуществляется по цвету. Выбранный элемент можно перекрашивать в другой цвет или менять его размер (толщину), а верхний выбранный элемент можно снабжать буквенно-цифровым обозначением.

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

   Наконец, следующая структура – меню для коллективных действий с выбранными объектами, возникает на месте панели при нажатии кнопки «меню» на этой панели. Коллективные действия весьма разнообразны – из выбранной точки на выбранную прямую опустить перпендикуляр, создать плоскость, проходящую через три выбранные точки, найти точку пересечения плоскости с прямой, и проч.

     ВЫВОДЫ

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

________
25.12.2021