dart Flutter中的图像Map功能?

r3i60tvu  于 2023-09-28  发布在  Flutter
关注(0)|答案(1)|浏览(127)

我已经搜索了很多,没有找到一个坚实的答案,所以如果这是一个骗局,我诚实地尝试。
我有一个应用程序,我正在重写,并摆脱了基于HTML的混合平台(特别是Trigger.io);在Flutter和Dart中快速重写。
该应用程序的一部分包括一个非常简单的屏幕,用户可以点击人体图像,并通过图像Map,获取身体部位(右前臂,左膝,头部等)的标识符和标题。
在Flutter中,我根本找不到类似的行为和功能。我是不是错过了一些简单的东西,因为我完全想多了?
多谢了。

8ljdwjyq

8ljdwjyq1#

您可以将Image Package 在GestureDetector中,并指定onTapDown(或onTapUp)回调来检查点击的坐标并相应地执行操作。
(To将全局坐标转换为局部坐标,请参见:flutter : Get Local position of Gesture Detector
这里有一个粗略的尝试:

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 (var (index, path) in regions.indexed) {
        if (path.contains(localPosition)) {
          onTap(index);
          return;
        }
      }
    }
  }

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

相关问题