javascript - 在 SVG 中弯曲图像

Question

在我的 SVG 应用程序中，我有用户可以扩展的图像。我想为用户提供控件，以便他们也可以从边缘弯曲它们。

这是用户可以做什么的视觉示例。

很想听听有关如何执行此操作的建议。

一个可能的想法是我将图像放在路径中并添加控件以拉伸路径的边缘。但是，我想知道如何在路径内拉伸图像以使其占用整个可用空间。

Answer 1

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

(1) 将其转换为图像链并对每个图像应用适当的倾斜变换。

(2) 使用<feDisplacementMap>过滤器将像素位移到适当的位置。