在SVG中弯曲图像

Question

在我的SVG应用程序中，我有用户可以扩展的图像。我想给用户控制，这样他们也可以从边缘弯曲它们。

以下是用户可以执行的操作的可视示例。

很想听听有关如何做到这一点的建议。

一个可能的想法是我把图像放在路径和路径中。添加用于拉伸路径边缘的控件。但是，我想知道如何在路径中拉伸图像，以便消耗整个可用空间。

Answer 1

没有简单的方法可以做你想做的事。但是，我可以提出两种可能的棘手方法：

（1）将其转换为图像链并对每个图像应用适当的偏斜变换。

（2）使用<feDisplacementMap>滤镜将像素移位到适当的位置。