Как создать современный интерфейс с реальным эффектом размытия Gaussian Blur в Delphi VCL, соблюдая правила конкурса и используя только чистый VCL и API Windows 11?

Delphi , Программа и Интерфейс , Интерфейс

Создание современного интерфейса с эффектом Gaussian Blur в Delphi VCL

В этой статье мы рассмотрим, как реализовать современный пользовательский интерфейс с эффектом прозрачного стекла (glass blur) в Delphi VCL, используя только стандартные компоненты и API Windows, без сторонних библиотек.

Введение в проблему

Современные операционные системы, такие как Windows 11, предлагают элегантные визуальные эффекты, включая прозрачность и размытие фона. Однако реализация таких эффектов в Delphi VCL с соблюдением следующих требований представляет собой нетривиальную задачу:

• Использование только чистого VCL без сторонних компонентов
• Реализация настоящего Gaussian Blur в реальном времени
• Поддержка плавного изменения размера и перемещения формы
• Использование нативных API Windows 11 для скругленных углов
• Отдельный поток для эффекта размытия, чтобы не тормозить интерфейс

Основные подходы к решению

1. Использование Windows Composition API

Начиная с Windows 10, Microsoft представила Composition API, который позволяет создавать современные визуальные эффекты, включая акриловое и мика-размытие.

uses
  Winapi.Windows, Winapi.Dwmapi;

const
  DWMWA_USE_IMMERSIVE_DARK_MODE = 20;
  DWMWA_SYSTEMBACKDROP_TYPE = 38;
  DWMSBT_MAINWINDOW = 2; // Mica effect
  DWMSBT_TRANSIENTWINDOW = 3; // Acrylic effect

procedure SetWindowComposition(Handle: HWND; BackdropType: Integer);
var
  Value: Integer;
begin
  Value := BackdropType;
  DwmSetWindowAttribute(Handle, DWMWA_SYSTEMBACKDROP_TYPE, @Value, SizeOf(Value));
end;

2. Создание borderless-формы с поддержкой перемещения

Для создания формы без стандартных границ, но с возможностью перемещения и изменения размера, необходимо обрабатывать сообщения Windows:

type
  TForm1 = class(TForm)
  protected
    procedure WMNCHitTest(var Message: TWMNCHitTest); message WM_NCHITTEST;
  end;

procedure TForm1.WMNCHitTest(var Message: TWMNCHitTest);
var
  Pt: TPoint;
begin
  inherited;
  Pt := ScreenToClient(Point(Message.XPos, Message.YPos));

  // Определяем, где было нажатие для изменения размера
  if Pt.Y < 5 then
    Message.Result := HTTOP
  else if Pt.Y > ClientHeight - 5 then
    Message.Result := HTBOTTOM
  else if Pt.X < 5 then
    Message.Result := HTLEFT
  else if Pt.X > ClientWidth - 5 then
    Message.Result := HTRIGHT
  else
    Message.Result := HTCAPTION; // Перемещение формы
end;

3. Реализация Gaussian Blur в отдельном потоке

Для реализации настоящего размытия фона без тормозов интерфейса, эффект должен выполняться в отдельном потоке:

type
  TBlurThread = class(TThread)
  private
    FFormHandle: HWND;
    FBackground: TBitmap;
    procedure UpdateBlur;
  protected
    procedure Execute; override;
  public
    constructor Create(FormHandle: HWND);
    destructor Destroy; override;
  end;

constructor TBlurThread.Create(FormHandle: HWND);
begin
  inherited Create(True);
  FFormHandle := FormHandle;
  FBackground := TBitmap.Create;
  FreeOnTerminate := True;
end;

procedure TBlurThread.Execute;
begin
  while not Terminated do
  begin
    // Захват фона за формой
    CaptureBackground;

    // Применение Gaussian Blur
    ApplyGaussianBlur(FBackground);

    // Обновление UI в основном потоке
    Synchronize(UpdateBlur);

    Sleep(50); // Оптимизация производительности
  end;
end;

procedure TBlurThread.UpdateBlur;
begin
  // Обновление фона формы с эффектом размытия
  UpdateLayeredWindow(FFormHandle, 0, nil, @FBackground, 0, nil, ULW_ALPHA);
end;

Альтернативное решение: использование DwmExtendFrameIntoClientArea

Для более простой реализации эффекта прозрачности можно использовать API Windows:

procedure EnableGlassEffect(Form: TForm);
var
  Margins: TMargins;
begin
  Margins.cxLeftWidth := -1;
  Margins.cxRightWidth := -1;
  Margins.cyTopHeight := -1;
  Margins.cyBottomHeight := -1;

  DwmExtendFrameIntoClientArea(Form.Handle, Margins);

  Form.Color := clBlack;
  Form.TransparentColor := True;
  Form.TransparentColorValue := clBlack;
end;

Реализация скругленных углов в Windows 11

Windows 11 предоставляет API для нативных скругленных углов:

const
  DWMWA_WINDOW_CORNER_PREFERENCE = 33;

type
  DWM_WINDOW_CORNER_PREFERENCE = (
    DWMWCP_DEFAULT      = 0,
    DWMWCP_DONOTROUND   = 1,
    DWMWCP_ROUND        = 2,
    DWMWCP_ROUNDSMALL   = 3
  );

procedure SetRoundedCorners(Handle: HWND; CornerPreference: DWM_WINDOW_CORNER_PREFERENCE);
var
  Value: DWM_WINDOW_CORNER_PREFERENCE;
begin
  Value := CornerPreference;
  DwmSetWindowAttribute(Handle, DWMWA_WINDOW_CORNER_PREFERENCE, @Value, SizeOf(Value));
end;

Оптимизация производительности

Для обеспечения плавности интерфейса важно:

1. Использовать двойную буферизацию:

procedure TForm1.CreateParams(var Params: TCreateParams);
begin
  inherited;
  Params.ExStyle := Params.ExStyle or WS_EX_COMPOSITED;
end;

2. Минимизировать перерисовки:

procedure TForm1.WMEraseBkgnd(var Message: TWMEraseBkgnd);
begin
  Message.Result := 1; // Предотвращаем мерцание
end;

3. Использовать аппаратное ускорение через Direct2D (опционально)

Заключение

Реализация современного интерфейса с эффектом Gaussian Blur в Delphi VCL возможна с использованием только стандартных средств и API Windows. Ключевые моменты:

• Использование Composition API для аппаратно-ускоренных эффектов
• Отдельный поток для ресурсоемких операций размытия
• Правильная обработка сообщений Windows для borderless-форм
• Использование новых возможностей Windows 11 для скругленных углов

Представленные решения позволяют создать красивый и отзывчивый интерфейс, соответствующий современным стандартам UI/UX, без использования сторонних компонентов.

Для более сложных эффектов можно комбинировать описанные техники с дополнительными API Windows, такими как Direct2D или Windows Imaging Component (WIC), но это выходит за рамки данной статьи.

Создано по материалам из источника по ссылке.

Статья посвящена созданию современного пользовательского интерфейса с эффектом размытия (Gaussian Blur) в Delphi VCL, используя стандартные компоненты и API Windows, включая отдельные потоки для оптимизации производительности и поддержку скругленных угло

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Интерфейс ::