css - 从原始和缩放框计算变换原点

Question

基于原始 rect1 (x1, y1, w1, h1) 和已知的缩放 rect2 (x2, y2, w2, h2) 找出使用什么变换原点的公式是什么？我需要一个可重复使用的公式，因为 rect2 可以放置在任何地方。

换句话说，我知道一个小矩形的边界，并希望它通过应用正确的变换原点坐标（以 px 或 % 为单位）过渡到更大的矩形。

Answer 1

在简单的比例尺中，变换原点的 x 坐标为 tx 的距离 x1 -> tx 和 tx -> (x1+w1) 之间的比率在比例尺后保持不变。用顺序的话：

(tx-x1)/w1 = (tx-x2)/w2

求解 tx，你得到：

tx = (w2/(w2-w1)) * (x1 - (x2 * w1)/w2)

类似的公式将产生您的 ty。

（请注意，如果您将透视与 az 变换一起使用，那么这个公式将是错误的，如果您也不知道透视原点，那么我相信结果将是不确定的，因为透视原点和变换将无限组合原点将产生相同的结果。如果您确实知道透视原点，那么数学仍然相当复杂。）