canvas中矩形围绕左上角旋转后求矩形中心的算法

近日，由于业务需求，我做了一个小算法，就是关于图片旋转后的定位问题。

canvas中画的图，旋转中心是左上角，name已知旋转的度数怎么求旋转后的矩形中心点坐标呢？？

当然这一切都是基于JavaScript来做的逻辑运算。

如图所示，已知A点坐标()，旋转角度θ，矩形宽高，求出矩形旋转后E点的坐标。

 

思路：

已知AB、BC的长度，矩形对角线夹角∠BAC即α度数可以求出来；

通过勾股定理，可以求出AE的长度；

再根据正余弦定理，可以分别求出AD，DE的长度；

最后，根据A点坐标可以算出E点坐标了。

 

/**
 * 按左上角旋转坐标点算出矩形中心点坐标
 * @param data {{width:number , height:number, abscissa:number, ordinate:number, angle:number}}
 * @returns {{x: number, y: number}}
 */

returnXY(data){
    let diagonal = Math.sqrt(data.width*data.width +data.height*data.height)/2;   //对角线长
    let tandata = data.height/data.width;        //反求夹角
    let angle = Math.atan(tandata)*180/Math.PI;   //对角线夹角
    return {
        x:data.abscissa + diagonal * Math.cos(((angle+data.angle)*Math.PI)/180.0),
        y:data.ordinate + diagonal * Math.sin(((angle+data.angle)*Math.PI)/180.0),
    }
},

本次的小逻辑就是如此啦，欢迎关注我，有其他小问题一起交流！~