js 求div变形后的坐标点

Question

已知条件

第一个灰色矩形变形成第二个灰色矩形后，计算出变形后红色矩形的坐标点x5,y5，（红色矩形位置是相对的，比如第一个灰色矩形里的红色矩形在右下角，算出来第二个灰色矩形里的红色矩形也应该再右下角），变形后的灰色矩形放大缩小，红色矩形也要等比例缩小或放大

要实现的效果如下：

用来调试的代码：

Answer 1

我觉得题主给的信息有很多不确定的地方，所以可能还不能给出解决方案。

比如，按图示，原来的灰色图中， 应该是(x2,y1),以及(x4,y1)因为y轴没有变

由下面

大矩形 [(x1,y1),(x2,y2)] 这样给出，
小矩形是[(x3,y3),(x4,y4)],
有 x1<=x3<x4<=x2, y1<=y3<y4<=y2，
现在 大矩形形变为[(x1,y1),(x5,y5)],
求随同形变的小矩形[(x6,y6),(x7,y7)]

有矩形等比缩放特性，肯定有：

(x6-x1)/(x5-x1) = (x3-x1)/(x2-x1)
(y6-y1)/(y5-y1) = (y3-y1)/(y2-y1)

(x7-x1)/(x5-x1) = (x7-x1)/(x2-x1)
(y7-y1)/(y5-y1) = (y7-y1)/(y2-y1)

所以：

x6 = (x3-x1)(x5-x1)/(x2-x1) + x1
y6 = (y5-y1)(y3-y1)/(y2-y1) + y1

x7 = (x5-x1)(x7-x1)/(x2-x1) + x1
y7 = (y5-y1)(y7-y1)/(y2-y1) + y1