从单点拉伸/扭曲背景图像

Question

通常，当使用javascript或css3（使用background-size）调整图片大小时，它将从中心点拉伸图片。 我需要从可能在任何地方的单个点拉伸和扭曲图像。 这将是动态的，所以我不想诉诸使用单独的图像。

这是一张图片，说明了我的意思：

希望那里有一个答案！

Answer 1

您可以选择几种方法来达到这种效果。

“正确”的方法是使用画布绘制图像： 使用画布分别倾斜图像

另一种方法是使用CSS转换倾斜来伪造效果。 http://developerdrive.com/demo/skewing_elements/skewing_elements.html

您可以在具有“溢出：隐藏”的元素内执行此操作，以使其看起来像背景图像。

Answer 2

我也不清楚您要链接的图像中想要什么。 您是否希望它失真？ 失真是否均匀？

我将猜测您正在做什么，可以通过绘制从某个图像中心截取的一组不断减少的（或矩形）集合并将它们绘制到“画布”上来进行近似（认为通用术语不是html5术语）给定每个裁剪中心的新坐标。 绘制此图像的方法可能比多次重绘图像的部分更快，这只是我如何可视化它的工作方式。至少在某种数学意义上。