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

Question

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

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

希望那里有答案！

Answer 1

您可以选择一些方法来实现此效果。

“正确”的方法是使用画布绘制图像：Skewing images individually using canvas

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

你可以在一个带有“overflow：hidden”的元素中执行此操作，使其看起来像背景图像。

Answer 2

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

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