Question

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

我使用了一个名为Photo View的库，可以放大并在屏幕上移动平面图的图像，但是我需要画出路线，然后像遵循平面图一样这是图像的一部分。实际上，我认为对于绘图，我希望画布的大小是相对于图像而不是屏幕的（所以0,0是图像的左上角），但是我不确定如何访问它。

我是否使用Photo View走错了路，应该使用飞镖/飞镖本身的东西吗？

我还想添加一个FAB，可以按它在原始图像上绘制路线，但是我不知道如何解决子问题

这是我到目前为止的一些内容：

object.create

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

Answer 2

在最新的fld sdk中有一个名为“交互式查看器”的小部件。

使用此小部件包装小部件树时，无论这些小部件的性质如何，它都将允许您缩放和平移它们。

赞！

Container(
// You just need to wrap your widgets with this.

    child: InteractiveViewer(
      child : Stack(
        children: <Widget>[

        // YOUR MAP as an image
        Image.asset("your_image.png"),

        //Your custom canvas.
        CanvasWidget()
      ],
    )
  ),
),

颤振绘制图像并缩放和移动

2 个答案: