颤动画在图像上并缩放和移动两者

Question

前言：我正在为可以导航用户的建筑物构建应用程序，我这样做的一种方法是使用建筑物的平面图，我想在此平面图中的节点之间绘制路径以创建路线（不是实时更新）。用户进入他们想要的位置，并且在我的路径查找算法输出了我想要用于我的线路放置的路径之后。

我使用了一个名为Photo View的库来允许我放大并在屏幕上移动平面图的图像，但我需要绘制我的路线，然后按照平面图计划，就像它是图像的一部分一样。实际上我认为对于绘图我希望画布大小相对于图像而不是屏幕（因此0,0是图像的左上角）但我不确定如何访问它。

我是否会使用Photo View走错路，我应该使用原生的东西来飞镖/扑腾吗？

我还想添加一个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,
    ),
  ));
}

Answer 1

在Flutter中实现这一点非常复杂，您必须自己完成。

你可能想要使用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