缩放和拉伸 SVG 到四个任意角

Question

我有一个宽度为 w、高度为 h 的 SVG 图像（场地平面图），我想在地图背景上查看它。

要将其叠加在地图上的正确位置，我想将其拉伸到四个任意角：x1,y1、x2,y2、x3,y3、x4,y4。

我认为我可以通过 SVG 变换（缩放、旋转、倾斜、平移）的组合来做到这一点，但我的数学还远远不能胜任这项工作。有什么线索吗？

Answer 1

旋转和平移可以描述Euclidean (i.e. length-preserving) transformations。通过添加各向同性缩放，您可以获得similarity transformations，并且通过各向异性缩放和倾斜，您甚至可以获得affine transformations。这就是您的操作可以表达的那种转换。

但是仿射变换已经由三个点及其图像唯一定义。这意味着第四个角最终将位于其他三个确定的位置。任意定位四个角，需要projective transformation。

另请参阅this post，了解如何计算投影变换、如何应用它以及如何在 JavaScript 中使用它（如果浏览器支持 3D 投影变换）。