简体   繁体   English

Flutter - 如何移动和缩放 Canvas 绘图而无需再次运行 CustomPainter 绘画方法之类的东西?

[英]Flutter - How to move and zoom Canvas drawings without AGAIN running something like the CustomPainter paint method?

I have tried using the methods "Transform.scale" (for "zooming" ) and "Transform.translate" (for the moving), but they seem to trigger the paint method in the CustomPainter.我曾尝试使用方法“Transform.scale”(用于“缩放”)和“Transform.translate”(用于移动),但它们似乎触发了 CustomPainter 中的绘制方法。
(even though the method "shouldRepaint" returns false, but that method is not even invoked) (即使方法“shouldRepaint”返回false,但该方法甚至没有被调用)
Maybe there is some other way of doing what I want ie be able to move and zoom something I have created with a Canvas (without again executing the paint method)?也许还有其他一些方法可以做我想做的事情,即能够移动和缩放我用 Canvas 创建的东西(无需再次执行 Paint 方法)?

In the below example code there are three sliders, one for zooming out (ie reducing the size) and one for moving horizontally and one for moving vertically.在下面的示例代码中,有三个滑块,一个用于缩小(即缩小尺寸),一个用于水平移动,另一个用于垂直移动。
The "paint" method simply draws a polygon (see the below attached screenshot picture). “paint”方法只是绘制一个多边形(见下面的截图)。

While the example code below is simple (ie small amount of hardcoded vector data and fast to render), I want to emphasize that the solution I am looking for need to support MANY complicated drawings (with LOTS OF data, slow to render), ie it is not an acceptable solution to suggest something like instead manually converting this one vector image to a raster image (eg PNG/JPG/GIF).虽然下面的示例代码很简单(即少量的硬编码矢量数据且渲染速度快),但我想强调的是,我正在寻找的解决方案需要支持许多复杂的绘图(具有大量数据,渲染速度慢),即建议像手动将这个矢量图像转换为光栅图像(例如 PNG/JPG/GIF)之类的建议是不可接受的解决方案。

Below I try do describe how you can think regarding a scenario that need to be supported:下面我尝试描述您如何思考需要支持的场景:
Imagine you want to implement an app with a huge dropdown list with lots of different vector data images to be selected.想象一下,您想要实现一个带有大量不同矢量数据图像的巨大下拉列表的应用程序。
The data of those VECTOR images may be retrieved from the internet or from a big local SQLite database.这些 VECTOR 图像的数据可以从互联网或大型本地 SQLite 数据库中检索。
IMPORTANT: The DATA in those images are NOT raster images such as jpg, png, gif... but the VECTOR data to become retrieved is defined as lots of screen coordinates for points, lines, polygons, and textual labels, and icons, and color values... and so on.重要提示:这些图像中的数据不是诸如 jpg、png、gif 之类的光栅图像……但要检索的矢量数据被定义为点、线、多边形、文本标签和图标的大量屏幕坐标,以及颜色值……等等。
Such VECTOR data will then be used for creating the image, and as far as I understand you should use CustomPainter with the paint method unless there are better options?这样的 VECTOR 数据将用于创建图像,据我所知,除非有更好的选择,否则您应该将 CustomPainter 与paint方法一起使用?
Also imagine that each of such selected image with vector data is HUGE with MANY THOUSANDS of lines, polygons, icons, ... and so on, and that the paint method might take seconds for creating the image.还要想象一下,每个这样选择的带有矢量数据的图像都是巨大的,有成千上万的线条、多边形、图标等等,并且绘制方法可能需要几秒钟来创建图像。
BUT, once it is drawn the data will not change.但是,一旦绘制,数据就不会改变。
So, since the "paint" method might take seconds to render a huge amount of vector data, you want to avoid invoking it frequently, when moving or zooming.因此,由于“paint”方法可能需要几秒钟才能渲染大量矢量数据,因此您希望在移动或缩放时避免频繁调用它。
Therefore I think it would be desirable if it would be possible to use the method "shouldRepaint" to return false, but it seems as that method is not even invoked at all when resizing or moving with the Transform methods "scale" and "translate".因此,我认为如果可以使用“shouldRepaint”方法返回 false,那将是可取的,但似乎在使用 Transform 方法“scale”和“translate”调整大小或移动时,甚至根本没有调用该方法.
But maybe there is some other solution to support the above described scenario, maybe some other class than CustomPainter that do not automatically trigger the paint method when applying Transform scale/translate ?但是也许还有其他一些解决方案来支持上述场景,也许是 CustomPainter 以外的其他一些类,它们在应用 Transform scale/translate 时不会自动触发绘制方法?
I hope there is a solution with the Flutter framework somehow being able to automatically reuse the bitmap (eg color values at certain bits and bytes) that was created potentially slowly with a paint method but can scale/zoom and move it in a faster way than having to execute the paint method again.我希望 Flutter 框架有一个解决方案,能够以某种方式自动重用位图(例如某些位和字节的颜色值),该位图可能是用绘制方法缓慢创建的,但可以比其他方法更快地缩放/缩放和移动它必须再次执行paint方法。 在此处输入图片说明

If you just want to zoom, scale, pan on your images, then you can try the new InteractiveViewer widget.如果您只想缩放、缩放、平移图像,那么您可以尝试使用新的 InteractiveViewer 小部件。

InteractiveViewer class InteractiveViewer

A widget that enables pan and zoom interactions with its child.一个小部件,可以与其子项进行平移和缩放交互。

The user can transform the child by dragging to pan or pinching to zoom.用户可以通过拖动平移或捏合缩放来变换孩子。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM