Jump to content

Интерактивный выбор области с TfgRegionPicker в 1.16.0.0


Yaroslav Brovin

1,338 views

Добрый день, уважаемые разработчики. 

Скоро выйдет новое крупное обновление 1.16.0.0, которое содержит ряд новых компонентов, серию улучшений и исправление ошибок. Одним из новых компонентов станет интерактивный выбор прямоугольной области, который может использоваться для обрезания изображения. 

Компонент представляет собой слой, который можно наложить поверх редактируемого объекта. Например, TfgImage.  Для удобства расположения, можно воспользоваться якорями FlexBox - свойство RelativePosition.

image.png

При помощи точек выделения можно интерактивным путем расширить регион. А получить или указать его координаты можно при помощи свойства TfgRegionPicker.Region. При интерактивном изменении области вызывается событие OnChanged

При первом отображении компонента можно отцентрировать регион при помощи свойства RegionOptions.DefaultPlacement

Настройки внешнего вида

Компонент предлагает набор настроек, позволяющие настроить отображение отдельных элементов компонента, таких как:

  1. Точки выделения (Appearance.Grip). Здесь можно поменять размер точек и параметры кистей заливки и контура.
    image.png
  2. Регион (Appearance.Region). Здесь можно поменять параметры отрисовки пунктирной рамки области выделения.
  3. Затемнение вне региона (ContentShading). По умолчанию все, что вне области выделения затемняется. Это настраивается этим свойством. Можно указать базовый цвет затемнения и ее прозрачность.
    image.png

Кадрирование

В релизе 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;

Результат работы представлен на видео ниже:

Спасибо за внимание.

  • Like 8
  • Thanks 2

4 Comments


Recommended Comments

Отличный компонент!

Было бы здорово:

  1. реализовать сохранение пропорций области выделения при изменении ее размера
  2. открыть нереализованный пока тип области TfgRegionShapeKind.Circle
  3. реализовать ограничения размера области выделения (не может быть меньше заданных значений)
Edited by Roman
Link to comment

Такой бы компонент для взаимодействия с изображением, ресайз, зум, поворот. Цены бы не было)

  • Like 1
Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...