Widget/Image Flutter 中的变形和扭曲

Widget/Image Warping And Distortion in Flutter

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

以这个变形为例:

假设这个小部件是一个容器,它有一个装饰图像和一个文本小部件作为它的子部件。在这里,小部件没有被贝塞尔曲线或路径裁剪。该小部件 'stretched' 或变形。这可能无法使用 Container 小部件来实现,但是可以使用 CustomPainter 来完成吗?

另外,看看这个例子:

此处图像使用波纹效果进行了扭曲。甚至可以使用 Flutter 复制它吗?

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

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

后者性能更高,但第一个可以让您更好地控制图像的扭曲方式。

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