Рисуйте и взаимодействуйте с SVG во Flutter

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

Мы хотим выделить область изображения, когда пользователь нажимает, например, на одну руку. Как лучше всего добиться этого во Flutter?

Мы пытались использовать Flare для Flutter, но эта библиотека не обеспечивает прямого взаимодействия с отображаемым человеческим телом.

Есть ли более простой способ:

  • Рендеринг тела на основе SVG (оформление может измениться в будущем);
  • Обнаружить клик, например GestureDetector;
  • Найти нажатую область по координатам щелчка;

Обратите внимание, что простые прямоугольники не будут работать, поскольку части изображения перекрываются. Вы можете увидеть эффект, которого мы хотим достичь, я щелкнул здесь по одной руке. Нарисовать вокруг него какую-нибудь кликабельную рамку не получится.

Заранее спасибо.

Artwork


flutter dart svg flare
person Giovanni    schedule 14.08.2019    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Я заставил его работать с помощью библиотеки built_path, которая предварительно компилирует пути SVG в Path объекты. Затем мы превратили его в виджет ClipPath следующим образом:

return GestureDetector(
    onTap: () => _bodyPartTapped(part),
    child: ClipPath(
        child: Stack(children: <Widget>[
          Container(
              color: pressedBodyPart == part
                  ? Colors.blue
                  : Colors.transparent),
          CustomPaint(painter: PathPainter(path))
        ]),
        clipper: PathClipper(path)));

При нажатии часть тела окрашивается в синий цвет, что отлично работает.

Я создал полный пример, который можно найти здесь: https://github.com/gi097/flutter_clickable_regions

person Giovanni    schedule 14.08.2019
comment
Привет, Джованни, у меня также есть аналогичная проблема, основанная на щелчке svg. Как мы 1. Перехватываем действие щелчка на SVG и получаем «id» элемента, по которому был выполнен щелчок. 2. Измените цвет элементов SVG из кода. - person Madhusudhan Sahni; 03.12.2019
comment
@MadhusudhanSahni, взгляните на мой пример на github.com/gi097/flutter_clickable_regions :) - person Giovanni; 03.12.2019
comment
Спасибо за помощь . Я думаю, что отсутствует один файл с именем map_svg_data.svg_path.g.dart. Из-за этого файла в этом примере возникает ошибка. - person Madhusudhan Sahni; 04.12.2019
comment
Да, прочтите файл readme. Вам нужно запустить flutter packages pub run build_runner build, чтобы сгенерировать файл. - person Giovanni; 04.12.2019
comment
Я уже пробовал, но мы получили ошибку. Не могли бы вы проверить здесь диск. google.com/file/d/1W4ITJi2BN0Y2ZJSYV0u2L5eXPjV89glg/ прикрепленный снимок экрана - person Madhusudhan Sahni; 04.12.2019
comment
Используйте стабильную ветвь флаттера. Основная ветка в данный момент не работает с библиотекой. - person Giovanni; 04.12.2019
comment
подскажите, почему не нажимаются некоторые регионы? - person Abhay Koradiya; 04.04.2020
comment
Хотел бы я проголосовать за это больше одного раза! Спасибо, Джованни, не только за ответ, но и за отличную демонстрацию. слишком много людей хотят попросить о помощи, но если они решат эту проблему сами, они не думают публиковать ответ, который мог бы помочь другим. Это освежающее изменение. Спасибо - person Mawg says reinstate Monica; 19.06.2021