颤振绘制到图像上并缩放和移动两者答案

【问题标题】：Flutter draw onto image and scale & move both颤振绘制到图像上并缩放和移动两者
【发布时间】：2019-03-20 18:46:35
【问题描述】：

前言：我正在为可以导航用户的建筑物构建应用程序，其中一种方法是使用建筑物的平面图，并且我想在此平面图中的节点之间绘制路径创建路线（不是实时更新）。用户输入他们想去的地方，在我的寻路算法输出一条路径后，我想用它来放置线路。

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

我是不是在使用 Photo View 时走错了路，我应该改用 dart/flutter 原生的东西吗？

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

【问题讨论】：

使用matrix_gesture_detector，检查CustomPainter Demo

标签： dart flutter flutter-layout

【解决方案1】：

最新的flutter sdk中有一个叫interactive viewer的小部件。

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

像这样：

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()
      ],
    )
  ),
),

【讨论】：