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

Question

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

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

希望那里有答案！

Answer 1

您有几个选项可以实现此效果。

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

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

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

Answer 2

我什至不清楚你想要从你链接的图像中得到什么。你想要它扭曲还是不扭曲？失真是否均匀？

我猜你正在做的任何事情都可以通过从某个图像的中心绘制一组不断减少的（或者可能是矩形）并将它们绘制到“画布”上来近似（认为通用术语不是 html5 术语）给定每个剪辑中心的新坐标。可能有一种比多次重绘图像部分更快的方法来绘制它，这就是我想象它可能工作的方式......至少在某种数学意义上可能是这样。