特别要注意的一个变换就是旋转,这个变换将会把坐标系统偏转一个角度,这本身没有问题。但是当我们要对这个变换之后的元素添加鼠标拖动的交互效果之后,会发现,如果此元素旋转的角度大于0,鼠标拖动它时,它并不会跟着鼠标移动,那么此时需要对鼠标位移的dx, dy进行x轴方向和y轴方向的分量分解。公式如下:
function corrxy(dx,dy,angle){ function toArc(ang){ return 2*Math.PI/360*ang; } var _cos = Math.cos, _pi = Math.PI, dx_v = {}, dy_v={}; //dx_v 水平方向的向量组成, dy_v 垂直方向的向量组成。 angle = +angle%360; if(angle<0) angle = 360+angle; if(angle==0){ dx_v.x=dx*1, dx_v.y=0; dy_v.x=0, dy_v.y=dy*1; }else if(angle==90){ dx_v.x=0, dx_v.y=dx*1; dy_v.x=dy*-1, dy_v.y=0; }else if(angle==180){ dx_v.x=dx*-1, dx_v.y=0; dy_v.x=0, dy_v.y=dy*-1; }else if(angle==270){ dx_v.x=0, dx_v.y=dx*-1; dy_v.x=dy*1, dy_v.y=0; }else{ var arc = toArc(angle); dx_v.x=dx*_cos(arc), dx_v.y=dx*_cos(1.5*_pi+arc); dy_v.x=dy*-1*_cos(1.5*_pi+arc), dy_v.y=dy*_cos(arc); } return {dx:dx_v.x + dy_v.x, dy:dx_v.y + dy_v.y}; }