Как реализовать обрезку изображений во flutter без сторонних библиотек

[Rusrst]

Я честно говоря делал не точно такие (обрезку руками не реализовывал), но похожие с точки зрения требований (отрисовка произвольных фигур и paths), и не до конца понял зачем вам нужны матрицы? Ну т.е. тема интересная, я бы с удовольствием сам бы почитал, но разве у flutter нет методов translate и scale которые это могут под капотом сделать?

Прямоугольник кстати прям на канвасе рисовать можно, не знаю как в flutter, но в compose есть drawWithContent, где можно нарисовать что-то своё поверх (или за) контентом. Во flutter тоже что-то похожее должно быть точно.

[RuslanTsitser]

Я честно говоря делал не точно такие (обрезку руками не реализовывал), но похожие с точки зрения требований (отрисовка произвольных фигур и paths), и не до конца понял зачем вам нужны матрицы? Ну т.е. тема интересная, я бы с удовольствием сам бы почитал, но разве у flutter нет методов translate и scale которые это могут под капотом сделать?

Матрицы, если в них +- разобраться, то будут проще в понимании при реализации простых преобразований. У flutter есть также виджеты Transform.scale() и Transform.translate(), и при желании можно воспользоваться ими без необходимости воздействовать напрямую на матрицу

Прямоугольник кстати прям на канвасе рисовать можно, не знаю как в flutter, но в compose есть drawWithContent, где можно нарисовать что-то своё поверх (или за) контентом. Во flutter тоже что-то похожее должно быть точно.

Да, можно и так

[nikita_dol]

• У Matrix4 есть уже реализованные методы для разных преобразований - почему бы не использовать их?

• У Image нужно вызывать dispose, иначе она будет вечно в памяти

• Минус вашего подхода - потеря оригинала изображение (в следствии рисования его на канвасе) - что ведёт к ситуации, когда вырезанный фрагмент в вашем приложении не такой же, как если бы я вырезал его инструментом, предназначенным для этого

[RuslanTsitser]

• У Matrix4 есть уже реализованные методы для разных преобразований - почему бы не использовать их?

Да, во flutter есть реализованные методы для трансформаций матриц, например: трансляция, масштабирование.

Согласитесь, что выглядит сложновато для понимания + если напрямую использовать трансляцию вместе с масштабированием, к примеру, вот так:

  void _onScaleUpdate(ScaleUpdateDetails details) {
    Matrix4 matrix = _matrix;

    final newFocalPoint = details.focalPoint;
    final offsetDelta = (newFocalPoint - _focalPoint);
    _focalPoint = newFocalPoint;
    matrix = matrix.clone()..translate(offsetDelta.dx, offsetDelta.dy);

    final newScale = details.scale;
    if (newScale != 1.0) {
      final scaleDelta = newScale / _scale;
      _scale = newScale;
      matrix = matrix.clone()..scale(scaleDelta, scaleDelta);
    }

    setState(() {
      _matrix = matrix;
    });
  }

То может получиться вот такой результат:

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

• У Image нужно вызывать dispose, иначе она будет вечно в памяти

Не знал про наличие этого метода у image, спасибо, что подсказали.

• Минус вашего подхода - потеря оригинала изображение (в следствии рисования его на канвасе) - что ведёт к ситуации, когда вырезанный фрагмент в вашем приложении не такой же, как если бы я вырезал его инструментом, предназначенным для этого

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

[nikita_dol]

То может получиться вот такой результат:

Я бы рассмотрел создание области выреза через обычный Rect (или Offset + Size если удобнее) и тогда код будет проще

В следующих статьях я рассмотрю, каким образом можно избежать как минимум потери разрешения.

Или использовать пакет image, так как аргументы против не очень сильные:

1. Да, это сторонняя зависимость, но код там не сложный, что бы повторить самому + рабочий

2. Коллизия имён - обычная проблема с простым решением

3. В основном будет преобразование во flutter что бы показать то, что вышло - что выйдет меньше чем писать свои костыли

Как итог: если добавлять более 1 шага обработки изображения, то приходим к коду как отдельный пакет image

P.S. Не говорю, что не нужно пробовать делать что-то своё, просто, иногда получается слишком много не нужного кода (например, как в статье где использовался шейдер, который родился из незнания API рисования)

[Rusrst]

Что мешает отдельно нарисовать настоящую битмапу и вырезать все в ней? Пусть и нативными средствами через Canvas() у Android? Да и у iOS я уверен есть что-то похожее.

При очень большом желании можно и byte array руками собрать, оно даже универсальные наверное будет.