Флаттер рисует на изображении, масштабирует и перемещает оба - PullRequest
Новая
       6

Флаттер рисует на изображении, масштабирует и перемещает оба

1 голос
/ 20 марта 2019

предисловие: я создаю приложение для здания, которое может перемещаться по пользователю, один из способов, которым я это делаю, - это использование плана этажа здания, и я хочу нарисовать путь между узлами в этом плане этажасоздать маршрут (не с обновлениями в реальном времени).Пользователь входит туда, где он хочет быть, и после того, как мой алгоритм поиска маршрута вывел путь, я хочу использовать его для размещения моей линии.

Я использовал библиотеку под названием Просмотр фотографий , чтобы разрешитьМне нужно увеличить масштаб и переместить изображение плана этажа по экрану, но мне нужно нарисовать свой маршрут, а затем заставить его следовать плану этажа, как если бы он был частью изображения.Реально я думаю, что для рисунка я бы хотел, чтобы размер холста был относительно изображения, а не экрана (поэтому 0,0 - верхний левый угол изображения), но я не уверен, как получить к нему доступ.

Я иду по неверному пути, используя просмотр фотографий, и должен ли я вместо этого использовать что-то родное для дартса / флаттера?

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

Вот кое-что из того, что у меня есть до сих пор: 

Widget build(BuildContext context) {
  return Container(
    child: new CustomPaint(
    foregroundPainter: RoutePainter(),
    child: PhotoView(
      imageProvider: AssetImage('assets/images/floor1_temp.png'),
      minScale: PhotoViewComputedScale.contained,
    maxScale: 1.5,
    ),
  ));
}

1 Ответ

0 голосов
/ 20 марта 2019

Это довольно сложно реализовать во Флаттере, и вам придется сделать это самостоятельно.

Возможно, вы захотите использовать RenderBox и реализации GestureRecognizer. Если вы никогда не использовали их, потребуется некоторое время, чтобы войти в него.

В частности, я имею в виду SingleChildRenderObjectWidget, который позволит вам передать изображение и нарисовать поверх него, используя RenderBox. Для описанных вами жестов VerticalDragGestureRecognizer, HorizontalDragGestureRecognizer и ScaleGestureRecognizer должны обеспечивать легкий доступ к жестам.

Все необходимые ресурсы для реализации того, что вы хотите, должны содержаться на очень обширных страницах документации для RenderObject и RenderBox (рисовать на декартовой плоскости) .
Мне не удалось найти документацию о том, как правильно добавить распознаватели жестов, поэтому я просто предоставлю простой пример реализации (эскиз) для ScaleGestureRecognizer внутри класса, расширяющего RenderBox: 

ScaleGestureRecognizer _scaleGestureRecognizer;

// constructor
{
  _scaleGestureRecognizer = ScaleGestureRecognizer(debugOwner: this);
  _scaleGestureRecognizer.onStart = _onScaleStart;
  // same for onUpdate, onEnd etc.
}

void _onScaleStart(ScaleStartDetails details) {}

// your dispose method, call this from your RenderObjectWidgets's [didUnmountRenderObject]
{
  _scaleGestureRecognizer.dispose();
}

@override
handleEvent(PointerEvent event, BoxHitTestEntry entry) {
    if (event is PointerDownEvent) {
      _scaleGestureRecognizer.addPointer(event);
    }
}

Приведенный выше код был основан на исходном коде, который я нашел внутри платформы Flutter. Примером этого может быть RenderEditable: https://github.com/flutter/flutter/blob/5787fc3ae29fe0de073b0332da01cfd059af49c6/packages/flutter/lib/src/rendering/editable.dart#L1297

...