Искусство борьбы с мерцанием в VCL-приложениях: улучшаем EdgeBrowser в Delphi

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

В разработке графических приложений на платформе Delphi одной из наиболее распространённых проблем является мерцание (или фликер) при отображении элементов пользовательского интерфейса. Эта проблема особенно актуальна при работе с элементами, такими как браузеры, которые могут вызывать мерцание при изменении размеров формы или прокрутке содержимого. В этой статье мы рассмотрим, как бороться с мерцанием в VCL-приложениях, используя EdgeBrowser в Delphi.

Что такое мерцание и почему оно возникает?

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

Почему мерцание возникает в EdgeBrowser?

EdgeBrowser в Delphi использует компонент TMSFNCWebBrowser, который основан на Edge WebView2. Когда вы изменяете размер формы или прокручиваете содержимое, браузер может вызывать перерисовку, что приводит к мерцанию. Это связано с тем, что браузер не всегда может корректно обновлять содержимое в реальном времени.

Как устранить мерцание?

Для устранения мерцания в VCL-приложениях можно использовать несколько стратегий. Одна из наиболее эффективных — это использование двойного буферинг. Двойной буферинг позволяет отрисовывать элементы на дополнительный буфер, а затем копировать их на основное окно, что уменьшает количество перерисовок и улучшает плавность отображения.

Использование двойного буферинга в Delphi

Для устранения мерцания можно использовать свойство DoubleBuffered у компонентов VCL. В случае с EdgeBrowser это может быть полезно, но не всегда достаточно, так как браузер сам может вызывать мерцание. В таких случаях можно использовать дополнительные техники.

procedure TForm1.FormCreate(Sender: TObject);
begin
  EdgeBrowser.DoubleBuffered := True;
  ClientControl.DoubleBuffered := True;
end;

Улучшение отображения скроллбаров

Для улучшения отображения скроллбаров в EdgeBrowser можно использовать настройки цветовой схемы. В Delphi 12 Athens и более поздних версиях можно изменять цветовую схему браузера в зависимости от текущего стиля приложения.

procedure TForm2.SetColorScheme(Dark: Boolean);
var
  Profile: ICoreWebView2Profile;
  Scheme: COREWEBVIEW2_PREFERRED_COLOR_SCHEME;
begin
  if Dark then
    Scheme := COREWEBVIEW2_PREFERRED_COLOR_SCHEME_DARK
  else
    Scheme := COREWEBVIEW2_PREFERRED_COLOR_SCHEME_LIGHT;
  (EdgeBrowser.DefaultInterface as ICoreWebView2_13).Get_Profile(Profile);
  Profile.Set_PreferredColorScheme(Scheme);
end;

function IsStyleDark: Boolean;
var
  LStyle: TCustomStyleServices;
  LColor: TColor;
begin
  Result := False;
  LStyle := TStyleManager.ActiveStyle;
  if Assigned(LStyle) then
  begin
    LColor := LStyle.GetSystemColor(clWindow);
    // Check if the background color is dark
    Result := (LColor and $FFFFFF) < $808080;
  end;
end;

procedure TForm2.FormCreate(Sender: TObject);
begin
  SetColorScheme(IsStyleDark);
  EdgeBrowser.NavigateToString(Html);
end;

Динамическое управление цветовой схемой

Для улучшения отображения скроллбаров можно динамически менять цветовую схему в зависимости от текущего стиля приложения. Это позволяет улучшить визуальную привлекательность и плавность отображения.

procedure TForm2.FormCreate(Sender: TObject);
begin
  SetColorScheme(IsStyleDark);
  EdgeBrowser.NavigateToString(Html);
end;

procedure TForm2.FormStyleChanged(Sender: TObject);
begin
  SetColorScheme(IsStyleDark);
end;

Использование WS_EX_COMPOSITED для улучшения плавности

Для улучшения плавности отображения можно использовать флаг WS_EX_COMPOSITED, который позволяет отрисовывать элементы на дополнительный буфер перед копированием их на основное окно.

uses
  Winapi.Windows;

procedure TForm2.FormCreate(Sender: TObject);
var
  ExStyle: Cardinal;
begin
  ExStyle := GetWindowLong(Handle, GWL_EXSTYLE);
  SetWindowLong(Handle, GWL_EXSTYLE, ExStyle or WS_EX_COMPOSITED);
  SetColorScheme(IsStyleDark);
  EdgeBrowser.NavigateToString(Html);
end;

Пример настройки EdgeBrowser для уменьшения мерцания

Вот пример кода, который можно использовать для настройки EdgeBrowser и уменьшения мерцания:

procedure TForm2.FormCreate(Sender: TObject);
var
  ExStyle: Cardinal;
begin
  ExStyle := GetWindowLong(Handle, GWL_EXSTYLE);
  SetWindowLong(Handle, GWL_EXSTYLE, ExStyle or WS_EX_COMPOSITED);
  EdgeBrowser.DoubleBuffered := True;
  SetColorScheme(IsStyleDark);
  EdgeBrowser.NavigateToString(Html);
end;

Заключение

Мерцание в VCL-приложениях — это распространённая проблема, которая может значительно ухудшить пользовательский опыт. Использование двойного буферинга, настройки цветовой схемы и флага WS_EX_COMPOSITED позволяет значительно улучшить плавность отображения и уменьшить мерцание. Эти техники особенно полезны при работе с компонентами, такими как EdgeBrowser, которые могут вызывать мерцание при изменении размеров формы или прокрутке содержимого.

Следуя этим советам, вы сможете создать более плавные и удобные приложения на платформе Delphi, что повысит их качество и привлекательность для пользователей.

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

Статья посвящена методам борьбы с мерцанием при отображении элементов пользовательского интерфейса в VCL-приложениях Delphi, особенно при использовании EdgeBrowser.

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

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

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