最近在写公司项目的时刻遇到了拖拽拉伸加扭转组件然后转变其高度宽度的需求，底本认为‘拖拽那末简朴，拉伸的话就转变width和height就好了’，由于拖拽拉伸的方位有八个点，一切一个个盘算总会处理的，but

奇异的征象

早先在没有加上扭转角度的时刻测试了八个方位的拖拽拉伸是没有问题的，而且其自身完成要领不难，比方拖拽的是最顶部的中心点则转变其组件的top数值和height数值就好了，但假如加上了扭转角度以后、、好像变得诡异了起来

剖析缘由

我们晓得，扭转的角度能够经由过程CSS3的transform属性的rotate值来转变，然后假如不转变坐标圆点则默许是组件的中心点，所以假如一旦rotate值发作转变其组件的全部坐标系也随之转变，我也许大略的画了下图

图中蓝色的方块比作组件，其坐标系是蓝色的XY坐标系，到场扭转角度为45度的话，则坐标系就变成了橙色的XY坐标系

这个时刻假如再用以蓝色坐标系为参考系来盘算拖拽拉伸的数值肯定是不正确的，此时我们借助于坐标系的扭转变更公式，还记得吗？

理清需求

由于我们在拉伸顶部的时刻只盘算了top值和height值，疏忽了left值，认为拉伸顶部只转变只两个值就好了，但实在这是抱负状况，比如上图中的点V，我们在扭转到45度的时刻，拉伸顶部要保证V点的位置稳定，注重！只是保证V点在蓝色的原始坐标系中的位置，那末必将照样要盘算left值的，我又也许大略的画了下图

为了好盘算，我假定组件的高度为100，被拉伸以后的高度为200，那末拉伸到200的时刻其坐标系为深灰色的X`Y`坐标系，答案不言而喻，V点到深灰色坐标原点的横坐标间隔 即是 V点到橙色坐标原点的横坐标间隔 加上 这两个坐标原点的横坐标间隔

我末了也许又画了下图

也就是说我们在拖拽拉伸的时刻要保证这个等式建立，也就是E`F` = EF + OO`
那末，一我们晓得了角度rotate、二我们也晓得了两个坐标系圆点之间的间隔OO`(注:sin(45度) * (200 – 100) / 2)，那末就可以保证V点的位置横向稳定了，这里只例举了横坐标的状况，纵坐标的道理相似

终究结果