Flutter - 如何在不再运行像CustomPainter绘制方法一样的东西的情况下移动和缩放画布绘图？

Question

我尝试使用“Transform.scale”（用于“缩放”）和“Transform.translate”（用于移动），但它们似乎会触发CustomPainter中的paint方法。
（即使方法“shouldRepaint”返回false，但该方法甚至没有被调用）
也许有其他方法可以实现我想要的功能，即能够移动和缩放我用Canvas创建的内容（而不再执行paint方法）？

在下面的示例代码中，有三个滑块，一个用于缩小（即减小大小），一个用于水平移动，一个用于垂直移动。
“paint”方法只是绘制了一个多边形（请参见下面附加的截图）。

虽然下面的示例代码很简单（即硬编码的矢量数据量少且渲染速度快），但我想强调的是，我正在寻找的解决方案需要支持许多复杂的绘图（有大量数据，渲染速度慢），即不建议提出这样的解决方案，例如手动将此一矢量图像转换为光栅图像（例如PNG / JPG / GIF）。

以下是我尝试描述如何考虑需要支持的情况：
想象一下，您希望实现一个带有大量不同矢量数据图像的巨大下拉列表的应用程序。
这些矢量图像的数据可以从互联网或大型本地SQLite数据库中检索。
重要提示：这些图像中的数据不是如jpg、png、gif等光栅图像，而是被定义为点、线、多边形、文本标签和图标、颜色值等许多屏幕坐标的矢量数据，以及其他内容。
这样的矢量数据将用于创建图像，并且据我所知，除非有更好的选择，否则应该使用CustomPainter和paint方法？
还要想象每个选定的具有矢量数据的图像都非常巨大，有成千上万条线、多边形、图标等等，而且绘制方法可能需要几秒钟才能创建图像。
但是，一旦绘制完成，数据就不会改变。
因此，由于“绘制”方法可能需要几秒钟来渲染大量的矢量数据，您希望在移动或缩放时避免频繁调用它。
因此，我认为如果可能的话，使用“shouldRepaint”方法返回false是可取的，但是当使用Transform方法“scale”和“translate”进行调整大小或移动时，该方法甚至都没有被调用。
但也许有其他解决方案来支持上述描述的场景，也许有一些其他类可以在应用Transform scale/translate时不自动触发paint方法？
我希望Flutter框架能够以某种方式自动重用潜在缓慢使用paint方法创建的位图（例如特定位和字节处的颜色值），但可以比再次执行paint方法更快地进行缩放/缩放和移动。

- user743436

---

尝试过使用RepaintBoundary了吗？例如，使用这个你可以创建多个“层”，如果你想要它们中的任何一个发生变化。 - pskink

谢谢。当我尝试使用我在上面问题中提供的示例代码时，它起作用了。 在构造函数中，我修改了它，让容器被RepaintBoundary包围（并更新了实例变量的数据类型，从Container更改为InteractiveViewer），即我用“... = RepaintBoundary(child: Container ...)”替换了“... = Container ...”。 但是，由于您添加了评论而不是答案，因此似乎我无法单击“接受您的答案”作为解决方案。 - user743436

@user743436，我想做类似的事情，你能分享一下代码片段吗？谢谢。 - Niteesh

你找到解决方案了吗？@user743436 - DCodes

Answer 1

如果您只是想在图像上进行缩放、比例和平移，那么您可以尝试新的InteractiveViewer小部件。

交互式查看器小部件是一个启用与其子项的平移和缩放交互作用的小部件。用户可以通过拖动来平移或收缩以缩放子项。 InteractiveViewer类： 一个使用户能够平移和缩放其子项的小部件。 用户可以通过拖动来平移或捏合以进行缩放。

https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html

- bluenile

---

抱歉，我不认为使用InteractiveViewer有帮助。 我尝试在上面提出的问题中使用它。 在构造函数中，我修改了它，让Container被InteractiveViewer包围（并更新了实例变量的数据类型从Container到InteractiveViewer）。 然后，是的，我可以使用捏合缩放，但是绘画方法一直被调用，这正是我想避免的。 - user743436