flutter - 显示顶部带有图钉的交互式图像

Question

我需要构建一个小部件来加载带有图钉的图像(平面图)，并设置坐标，但同时图像需要可缩放和移动，同时图钉保持其大小和正确位置.

您可以在下面看到一张图片，了解我所说的带图钉的图片的含义。

我研究了一些加载图像的包，但它们似乎不需要我可以在其中添加堆栈和引脚的构建器。

我正在尝试使用 InteractiveViewer , 但到目前为止我遇到了以下问题:

• 无法设法保持图钉的大小不变(缩放时不改变大小)；

有人有什么意见或建议吗？

Answer 1

InteractiveViewer 采用不同的回调函数，让您可以跟踪当前比例(onInteractionUpdate 是您将在此处使用的主要函数)。

使用它来跟踪小部件状态下交互式查看器的当前比例(使用 ScaleUpdateDetails 上的 scale 属性)。

然后，将每个标记包裹在 Transform.scale 中(原点设置在图钉的底部)并进行一些计算(例如 1/currentScale)以确定哪个比例会直接抵消交互式查看器的比例。