javascript拖拽精灵放大缩小旋转的方法详解编程语言

Javascript拖拽精灵放大缩小旋转的方法 

玩过美图秀秀的人知道 可以添加挂件 能够放大缩小旋转  我画了个图 就明白原理了

2个小红点就是选中点拖动的起点和终点

放大到AB的长度 然后旋转C度就可以了  

具体算法

1 获取中间精灵坐标

2 计算圆心到第二个红点的角度(直接设置这个角度就可以了)

可以用atan2函数(假设圆心在00点 需要换算下)

3计算AB距离更简单了 先计算B的坐标 知道B与X夹角的度数  坐标计算就是用

x1 = x0 + r * cos(angle * Math.PI / 180) 
 
y1 = y0 + r * sin(angle * Math.PI/180)

就搞定了

A坐标X 计算出来 后  看的出来与Y轴对称  那就是 A坐标X*2 就是AB距离了

ps:右下角的旋转放大按钮就是 外圆半径+最开始的精灵宽度高度/2计算和  左上角 那就是X Y加负数就可以了