在 SVG 中弯曲图像答案

【问题标题】：Bending an image in SVG在 SVG 中弯曲图像
【发布时间】：2013-08-13 09:28:05
【问题描述】：

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

这是用户可以做什么的直观示例。

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

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

【问题讨论】：

您能否澄清一下这个问题是否与 UI 的工作方式有关？
可能是 textPath X fabric.js developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath fabricjs.com/quadratic-curve?
@Adam 不，我正在更多地考虑这个想法的实现，即如何在 SVG 中弯曲图像。希望这能回答你的问题。
@MaxGherkins 完全正确！ TextPath 就是一个例子，带有二次曲线的 fabric.js 很棒。同样，问题是如何实现图像？

【解决方案1】：

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

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

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

【讨论】：

(1) 是不可能的，我们之前尝试过，但是转换几十张图像（更不用说我们的例子中的一百张）的计算（我们的应用程序已经很繁重了）多挂该应用程序。 (2) 听起来很有趣，正在研究这个，谢谢
Re (1)，我不是说自己转换一堆图像。我指的是在您的 SVG 中使用 skewY() 转换。
为选词不当道歉，我的意思是歪曲。我希望今天能研究一下 fedisplacementmap 过滤器，看看有什么可能。将发表想法。