Производительность размытия / непрозрачности в Flutter? - PullRequest
Новая
       43

Производительность размытия / непрозрачности в Flutter?

0 голосов
/ 21 ноября 2018

Мне нравится эффект размытого мороза с использованием BackdropFilter (см. this ).

Однако, поскольку BackdropFilter имеет Opacity, а также потому, что размываемый виджет также имеет Opacity, производительностьужасноЭто также потому, что я перерисовываю свои виджеты несколько раз в секунду, но это не должно быть проблемой, учитывая, что Flutter может работать со скоростью 60 кадров в секунду?

Я включил checkerboardOffscreenLayers и вижу шахматы для миль.: O Шахматные доски происходят из-за blurScreen, а не из-за widgetToBlur, но widgetToBlur замедляет производительность, вероятно, потому что (в моем реальном коде, а не в этом примере) он вызывает setState () несколько раз в секунду.

Есть ли более эффективный способ сделать размытие / помутнение?Ссылка выше говорит, чтобы применить прозрачность к виджетам индивидуально.Я не могу сделать это с размытием (blurScreen ниже), потому что BackdropFilter должен быть размещен поверх моего виджета, который делает перерисовку.Я убрал эффект размытия, и моя производительность стала намного лучше (без шахматных досок, приложение не падает).

build () рассматриваемый код: 

final widgetToBlur = Container(
  child: Opacity(
    opacity: 0.3,
    // In my actual code, this is a Stateful widget.
    child: Text('Spooky blurry semi-transparent text!'),
  ),
);

final blurScreen = BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
  child: Container(
    decoration: BoxDecoration(
      color: _backgroundColor.withOpacity(0.3),
    ),
  ),
);

return Container(
  child: Stack(
    children: <Widget>[
      widgetToBlur,
      blurScreen,
      Text('This is in front of the blurred background'),
    ],
  ),
);

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

У меня похожая проблема, и она также сводится к использованию холста и краски.Единственная проблема сейчас заключается в том, что если я применил к изображению фильтр MaskFilter, мало что произойдет, несмотря на чрезвычайно высокую сигму ... Только немного размыт края.

Теперь возникает вопрос, почему это так?Как вы решили эту проблему? 

canvas.drawImageRect(
  image, 
  Offset(0, 0) & srcSize, 
  Offset(-delta, 0) & dstSize, 
  Paint()..maskFilter = MaskFilter.blur(
    BlurStyle.normal, 100.0
  )
);

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

rootBundle.load("assets/gift_1.png").then((bd) {
  Uint8List lst = new Uint8List.view(bd.buffer);
  Ui.instantiateImageCodec(lst).then((codec) {
    codec.getNextFrame().then((frameInfo) {
      image = frameInfo.image;
    });
  });
});

Ps К сожалению, я могупока не пишите никаких комментариев;поэтому здесь в качестве вклада, в том числе предложение решения

0 голосов
/ 27 ноября 2018

Я закончил рисовать widgetToBlur один раз, размытый, с непрозрачностью, используя Paint и Canvas .

Это означает, что он выполняет операции размытия и непрозрачности только один разв initState(), и его никогда не нужно перерисовывать с размытием на протяжении всего жизненного цикла виджета.

Если кто-то еще застрял с этим, вы можете оставить комментарий, и я могу помочьбольше.

...