從單點拉伸/扭曲背景圖像

Question

通常，當使用javascript或css3（使用background-size）調整圖片大小時，它將從中心點拉伸圖片。 我需要從可能在任何地方的單個點拉伸和扭曲圖像。 這將是動態的，所以我不想訴諸使用單獨的圖像。

這是一張圖片，說明了我的意思：

希望那里有一個答案！

Answer 1

您可以選擇幾種方法來達到這種效果。

“正確”的方法是使用畫布繪制圖像： 使用畫布分別傾斜圖像

另一種方法是使用CSS轉換傾斜來偽造效果。 http://developerdrive.com/demo/skewing_elements/skewing_elements.html

您可以在具有“溢出：隱藏”的元素內執行此操作，以使其看起來像背景圖像。

Answer 2

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

我將猜測您正在做什么，可以通過繪制從某個圖像中心截取的一組不斷減少的（或矩形）集合並將它們繪制到“畫布”上來進行近似（認為通用術語不是html5術語）給定每個裁剪中心的新坐標。 繪制此圖像的方法可能比多次重繪圖像的部分更快，這只是我如何可視化它的工作方式。至少在某種數學意義上。