Интерактивный выбор области с TfgRegionPicker в 1.16.0.0
By Yaroslav Brovin in Общая
· 1,929 views
Добрый день, уважаемые разработчики.
Скоро выйдет новое крупное обновление 1.16.0.0, которое содержит ряд новых компонентов, серию улучшений и исправление ошибок. Одним из новых компонентов станет интерактивный выбор прямоугольной области, который может использоваться для обрезания изображения.
Компонент представляет собой слой, который можно наложить поверх редактируемого объекта. Например, TfgImage. Для удобства расположения, можно воспользоваться якорями FlexBox - свойство RelativePosition.
При помощи точек выделения можно интерактивным путем расширить регион. А получить или указать его координаты можно при помощи свойства TfgRegionPicker.Region. При интерактивном изменении области вызывается событие OnChanged.
При первом отображении компонента можно отцентрировать регион при помощи свойства RegionOptions.DefaultPlacement.
Настройки внешнего вида
Компонент предлагает набор настроек, позволяющие настроить отображение отдельных элементов компонента, таких как:
-
Точки выделения (Appearance.Grip). Здесь можно поменять размер точек и параметры кистей заливки и контура.
- Регион (Appearance.Region). Здесь можно поменять параметры отрисовки пунктирной рамки области выделения.
-
Затемнение вне региона (ContentShading). По умолчанию все, что вне области выделения затемняется. Это настраивается этим свойством. Можно указать базовый цвет затемнения и ее прозрачность.
Кадрирование
В релизе 1.16.0.0 добавлены новые метод, позволяющие легко выполнить базовые преобразования. К одному из таких методов относится кадрирование битмапа по области TfgBitmap.CreateCropped (Чтобы воспользоваться методом нужно подключить модуль FGX.Bitmap.Helpers). Ниже представлен пример кода, выполняющий кадрирование изображения на основании координат региона, полученных от TfgRegionPicker. Пример доступен в разделе "Компоненты" -> "TfgRegionPicker" -> "Обрезание фотографии":
procedure TFormMain.btnCropTap(Sender: TObject); var Region: TRectF; AssetBitmap: TfgAssetBitmapSet; Bitmap: TfgBitmap; CroppedBitmap: TfgBitmap; CroppedRect: TRectF; Scale: Single; DestRect: TRectF; begin Region := rpCropRegion.Region.ToRectF; if TfgAssetsManager.Current.Find<TfgAssetBitmapSet>(R.Bitmap.PHOTO, AssetBitmap) and AssetBitmap.FindBitmap(Bitmap) then begin // Вычисляем область вывода битмапа в контроле. DestRect := TRectF.Create(FBitmap.Bounds).FitInto(pbOriginal.Bounds, Scale); // Корректируем положение региона. Region.Offset(-DestRect.TopLeft); // Масштабируем область согласно физическому размеру битмапа. CroppedRect.TopLeft := Region.TopLeft * Scale; CroppedRect.BottomRight := Region.BottomRight * Scale; // Кадрируем исходный битмап CroppedBitmap := Bitmap.CreateCropped(CroppedRect.Truncate); TfgAssetsManager.Current.AddBitmap('Cropped Image', CroppedBitmap); end; end;
Результат работы представлен на видео ниже:
Спасибо за внимание.
-
8
-
2
Recommended Comments