Функциональность Image Map во Flutter?

Я довольно долго искал и не нашел четкого ответа, поэтому, если это обман, я честно пытался.

У меня есть приложение, которое я переписываю и отхожу от гибридной платформы на основе html (в частности, Trigger.io); делаю переписывание во Flutter и Dart, по быстрому.

Часть приложения включает в себя довольно простой экран, на котором пользователь может щелкнуть изображение человеческого тела и через карту изображений получить обратно идентификатор и подпись для части тела (правое предплечье, левое колено, голова и т. д.).

Я просто не могу найти аналога такому поведению и возможностям во Flutter. Я пропустил что-то простое, потому что полностью обдумал это?

Спасибо большое.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
0
3 945
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете обернуть Image в GestureDetector и указать onTapDown (или onTapUp) обратные вызовы, которые проверяют коснувшиеся координаты и действуют соответствующим образом.

(Чтобы преобразовать глобальные координаты в локальные координаты, см.: флаттер: получить локальное положение детектора жестов)

Вот грубая попытка:

import 'package:quiver/iterables.dart' show enumerate;

class ImageMap extends StatelessWidget {
  const ImageMap({
    Key key,
    @required this.image,
    @required this.onTap,
    @required this.regions,
  }) : super(key: key);

  final Widget image;
  final List<Path> regions;

  /// Callback that will be invoked with the index of the tapped region.
  final void Function(int) onTap;

  void _onTap(BuildContext context, Offset globalPosition) {
    RenderObject renderBox = context.findRenderObject();
    if (renderBox is RenderBox) {
      final localPosition = renderBox.globalToLocal(globalPosition);
      for (final indexedRegion in enumerate(regions)) {
        if (indexedRegion.value.contains(localPosition)) {
          onTap(indexedRegion.index);
          return;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) => _onTap(context, details.globalPosition),
      child: image,
    );
  }
}

Да, я расследовал это. По-прежнему требуется какой-то способ сопоставить эти координаты с какой-то частью изображения, и это недостающий ключ, который карта изображения изначально хорошо обрабатывает в HTML. Я подумал о том, чтобы наложить изображение на другое изображение той же формы, затем раскрасить каждую часть уникальным цветом, затем уменьшить его непрозрачность до 0 и прочитать нажатия на ЭТО изображение, проверить значение цвета, найти часть . Это то, что я собираюсь проверить дальше. Я делаю это слишком сложно? Я под прицелом, возможно, у меня аналитический паралич.

ChrisH 31.05.2019 15:25

Вы можете использовать Rect.contains, если вы можете разложить интересующие вас области на прямоугольники. Если у вас есть более сложные формы, вы можете построить Path с помощью различных Path.add... методов и использовать Path.contains.

jamesdlin 31.05.2019 17:18

@ChrisH Я обновил свой ответ более конкретным примером.

jamesdlin 31.05.2019 17:53

@jamesdlin что такое перечислять?

BIS Tech 30.12.2020 08:46

@BloodLoss Ой. Кажется, я имел в виду функцию enumerate из package:quiver. Оглядываясь назад, enumerate(regions) мог быть regions.asMap().entries с indexedRegion.key вместо indexedRegion.index.

jamesdlin 30.12.2020 08:54

Другие вопросы по теме