Flutter 中的小部件/图像翘曲和失真

Question

像 Transform 小部件这样的小部件可以轻松地在 Flutter 中缩放、平移和倾斜小部件。但是没有明显的方法可以扭曲或扭曲开箱即用的图像。

以这个变形为例：

假设这个小部件是一个容器，带有一个装饰图像和一个文本小部件作为其子级。在这里，小部件没有被贝塞尔曲线或路径剪裁。小部件被“拉伸”或扭曲。这可能无法使用 Container 小部件来实现，但可以使用 CustomPainter 来实现吗？

另外，看看这个例子：

这里的图像使用涟漪效应扭曲。甚至可以使用 Flutter 复制它吗？

Answer 1

解决此问题的最佳方法是将小部件转换为图像并对其进行转换，方法是编辑像素数据或绘制 3d 纹理。

1. Example using Image manipulation
2. Example using custom paint

后者的性能更高，但前者可以让您更好地控制图像的扭曲方式。

1. See {1} in action
2. See {2} in action