новинка Поддержка SVG в 1.15.5.0
Entry posted by Yaroslav Brovin in Общее
838 views
Добрый день, уважаемые разработчики.
Спешим порадовать вас главным нововведением 1.15.5.0 - это поддержка векторных изображений SVG.
Добавление и использование
В новой версии добавлен новый тип ресурсов - SVG изображение. В него вы можете загрузить SVG файл в дизайнере ресурсов для дальнейшего использования в компонентах. Добавление SVG изображения доступно в дизайнере ресурсов: Project -> FGX Assets Manager.
При использовании данного изображения в компонентах, происходит автоматическое формирование растрового изображения TfgBitmap с требуемым текущим коэффициентом масштабирования окна и указанным размером иконки. При этом логический размер (dp, без учета коэффициента масштабирования) иконки указывается в окне редактирования SVG файла.
Особенности реализации
Как выяснилось в ходе разработки, iOS и Android не поддерживают SVG изображения. Вместо этого, они конвертируют SVG файлы в Android Studio / XCode в свой внутренний промежуточный формат, которыйв свою очередь уже используется для формирования растровых изображений.
В связи с этим, нам пришлось полностью своими силами разработать парсер и рендер SVG. В итоге мы выполняем обработку SVG файла на стороне Delphi и формируем наш формат, используемый для отрисовки SVG. Далее в рантайме по файлам нашего формата, генерируем изображения.
Генерация
При необходимости вы можете сформировать экземпляр растрового изображения TfgBitmap по SVG изображению любого размера. Для этого вам нужно запросить ресурс у TfgAssetsManager. При этом вы отвечаете за удаление экземпляра TfgBitmap:
uses FGX.Canvas, FGX.Canvas.Types, FGX.Assets, FGX.Assets.SVG; var Asset: TfgAssetSVG; Bitmap: TfgBitmap; begin if TfgAssetsManager.Current.Find<TfgAssetSVG>('SVG asset name', Asset) then begin Bitmap := Asset.CreateBitmap(TSizeF.Create(100, 20)); try // Works with bitmap. finally Bitmap.Free; end; end; end;
Ограничения
1. Неполноценная поддержка спецификации SVG. Мы проверили наш SVG парсер на иконках разных поставщиков от MaterialDesign, Microsoft Visual Studio Icons и до Icons 8. Однако, стандарт SVG довольно большой и написать за такое короткое время полноценный парсер задача довольно непростая. Несмотря на это, мы хотели бы, чтобы вы делились с нами SVG файлами, которые не могут прочитаться и отобразиться корректно. Это поможет нам оперативнее расширять парсер в тех направлениях, которые нужны для отображения массовых SVG изображений.
При загрузке изображения в дизайнере, у иконки появится специальный значок ошибки, если она не поддерживается.
Если файл загрузился и может быть отображен, но при чтении не удалось распознать какие-либо элементы, то он помечается значком-предупреждением:
Это означает, что теоретически изображение может отобразиться, но оно может отображаться не корректно.
2. Отображение превью svg иконки в дизайнере ассетов не говорит о поддержке SVG файла. Для отображения SVG изображений в IDE мы используем Skia4Delphi. Однако, практика показала, что иногда SVG иконки, которые мы отображаем успешно на устройствах, не отображаются корректно в Skia4Delphi.
Например, отображение иконки в Runtime через FGX Native:
В то же время, Skia4Delphi (дизайнер IDE) просто показывает черный квадрат:
Поэтому вам необходимо временно проверять корректно отображения SVG иконки именно на основании Runtime. Несмотря на то, что мы можем формировать SVG изображения и в дизайнере тоже нашим средство, мы пока используем Skia4Delphi, чтобы была возможность сравнить, как иконки должны отображаться корректно (парсер SVG должен по идее поддерживать больше функций). Спустя время, как только наш парсер будет поддерживать все ваши иконки, мы заменим в дизайнере рендер SVG иконок в дизайнере на наш.
3. Временно недоступна возможность динамически добавлять SVG файл в рантайме. Например, вы загрузили SVG файл в рантайме и хотите его отобразить. Несмотря на то, что технически у нас уже есть такая возможность, наш парсер пока не оптимизирован, чтобы выполнять преобразование SVG формата достаточно быстро. Чтобы потенциально не побуждать пользователей к проседанию производительности, данная возможность временно недоступна. При этом мы считаем, что такой сценарий довольно редкий. И по большей части, вы будете использовать именно заранее добавленные SVG изображения.
-
6
-
1
7 Comments
Recommended Comments