Как получить плавное заполнение с низкой прозрачностью и неровными границами в Delphi для iOS и Android

Delphi , Компоненты и Классы , TImage и TImageList

Проблема с заполнением градиентом при низкой прозрачности в Delphi для iOS и Android

Введение

При разработке кросс-платформенных приложений на Delphi с использованием FireMonkey разработчики иногда сталкиваются с проблемами визуализации на мобильных платформах (iOS и Android), которые не проявляются на Windows. Одна из таких проблем - некорректное отображение заполнения с низкой прозрачностью между неровными границами, такими как графики функций.

Описание проблемы

Как видно из предоставленного кода, при попытке заполнить пространство между двумя кривыми градиентом с низкой прозрачностью (Opacity = 0.4) на мобильных платформах возникают визуальные артефакты - полосы и неравномерное заполнение. На Windows эта же программа работает корректно.

Основные характеристики проблемы: - Проявляется только на iOS и Android - Зависит от значения прозрачности (Opacity) - Усугубляется при работе с "шумными" данными - Связана с использованием FillPath для заполнения сложных форм

Причины проблемы

Основная причина кроется в различиях графических подсистем: - Windows использует DirectX для рендеринга - iOS и Android используют OpenGL (ES)

Различия в реализации алгоритмов заполнения с прозрачностью в этих графических API приводят к описанным артефактам. Вероятно, это баг в реализации FireMonkey для мобильных платформ.

Решение от сообщества

SilverWarior предложил временное решение, которое обходит проблему:

procedure TForm1.PBPaint(Sender: TObject; Canvas: TCanvas);
var
  brush: TStrokeBrush;
  GradientPolygon: TPolygon;
  pt: integer;
begin
  Canvas.BeginScene;
  try
    // Настройка градиента
    Canvas.Fill.Kind := TBrushKind.Gradient;
    Canvas.Fill.Gradient.Style := TGradientStyle.Linear;
    Canvas.Fill.Gradient.StartPosition.X := 0;
    Canvas.Fill.Gradient.StartPosition.Y := 0;
    Canvas.Fill.Gradient.StopPosition.X := 0;
    Canvas.Fill.Gradient.StopPosition.Y := 1;

    Canvas.Fill.Gradient.Points.Clear;
    Canvas.Fill.Gradient.Points.Add;
    Canvas.Fill.Gradient.Points[0].Color := TAlphaColors.Red;
    Canvas.Fill.Gradient.Points[0].Offset := 0.0;

    Canvas.Fill.Gradient.Points.Add;
    Canvas.Fill.Gradient.Points[1].Color := TAlphaColors.Blue;
    Canvas.Fill.Gradient.Points[1].Offset := 1.0;

    // Рисование линий и заполнение
    brush := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColors.Red);
    try
      brush.Thickness := 1;
      SetLength(GradientPolygon,4);
      for pt := 0 to NoPoints - 2 do
      begin
        // Первая линия
        brush.Color := TAlphaColors.Red;
        Canvas.DrawLine(CurvePolygons[1][pt], CurvePolygons[1][pt + 1], 1, brush);

        // Вторая линия
        brush.Color := TAlphaColors.Blue;
        Canvas.DrawLine(CurvePolygons[2][pt], CurvePolygons[2][pt + 1], 1, brush);

        // Заполнение между отрезками линий
        GradientPolygon[0] := CurvePolygons[1][pt];
        GradientPolygon[1] := CurvePolygons[1][pt + 1];
        GradientPolygon[2] := CurvePolygons[2][pt + 1];
        GradientPolygon[3] := CurvePolygons[2][pt];
        Canvas.FillPolygon(GradientPolygon, Opacity);
      end;
    finally
      brush.Free;
    end;
  finally
    Canvas.EndScene;
  end;
end;

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

Альтернативные решения

1. Использование TPathData с альтернативным подходом

Можно попробовать модифицировать исходный подход, но с изменением порядка точек:

procedure TForm1.SetCurves;
var
  cn, pt: integer;
  x, y: double;
begin
  // ... инициализация как в оригинале ...

  // Создаем путь для заполнения
  AreaPath.MoveTo(CurvePolygons[1][0]);
  for pt := 1 to NoPoints - 1 do
    AreaPath.LineTo(CurvePolygons[1][pt]);
  for pt := NoPoints - 1 downto 0 do
    AreaPath.LineTo(CurvePolygons[2][pt]);
  AreaPath.ClosePath;
end;

2. Использование текстуры вместо градиента

Для сложных случаев можно создать текстуру с нужным градиентом и использовать ее:

procedure TForm1.PBPaint(Sender: TObject; Canvas: TCanvas);
var
  Bitmap: TBitmap;
  Brush: TBrush;
begin
  Bitmap := TBitmap.Create(Round(Rect.Width), Round(Rect.Height));
  try
    // Рисуем градиент на битмапе
    Bitmap.Canvas.BeginScene;
    try
      Bitmap.Canvas.Fill.Kind := TBrushKind.Gradient;
      // ... настройка градиента ...
      Bitmap.Canvas.FillRect(RectF, 0, 0, [], 1);
    finally
      Bitmap.Canvas.EndScene;
    end;

    // Используем битмап как текстуру
    Canvas.BeginScene;
    try
      Brush := TBrush.Create(TBrushKind.Bitmap, TAlphaColors.White);
      try
        Brush.Bitmap.Bitmap := Bitmap;
        Canvas.FillPath(AreaPath, Opacity, Brush);
      finally
        Brush.Free;
      end;
    finally
      Canvas.EndScene;
    end;
  finally
    Bitmap.Free;
  end;
end;

3. Обработка через шейдеры (для опытных разработчиков)

Для максимального контроля над рендерингом можно использовать пользовательские шейдеры:

// Примерный код, требует доработки под конкретные нужды
procedure TForm1.ApplyCustomShader;
var
  Shader: TContextShader;
begin
  Shader := TContextShader.Create;
  try
    Shader.VertexShader := '... vertex shader code ...';
    Shader.PixelShader := '... pixel shader code ...';
    Canvas.SetShader(Shader);
    // Рисование с использованием шейдера
    Canvas.FillPath(AreaPath, Opacity);
    Canvas.SetShader(nil);
  finally
    Shader.Free;
  end;
end;

Рекомендации

1. Производительность: При работе с мобильными устройствами важно учитывать производительность. Решение с заполнением каждого сегмента отдельно может быть слишком ресурсоемким для сложных графиков.

2. Качество: Для достижения наилучшего качества визуализации стоит поэкспериментировать с различными подходами, включая текстуры и шейдеры.

3. Отчет об ошибке: Рекомендуется сообщить о проблеме в Embarcadero, чтобы она могла быть исправлена в будущих версиях Delphi.

Заключение

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

Разработчикам, столкнувшимся с подобными проблемами, рекомендуется следить за обновлениями FireMonkey, где подобные баги могут быть исправлены в будущих версиях.

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

Проблема некорректного отображения градиента с низкой прозрачностью в Delphi для iOS и Android, связанная с различиями в графических подсистемах.

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

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

:: Главная :: TImage и TImageList ::