关于javascript:js计算一点绕另一点旋转后的坐标位置

最近常常有canvas的画图需要,免不了波及很多坐标的计算。其中有一个当初困扰我很久的问题,算法返回了一个带角度的文字,绘制在canvas上的时候,必须要旋转后绘制。所以须要依据初时的文字坐标地位,换算出旋转后的坐标。上面就是具体的算法和示例。

如图所示,一个矩形依据左上角旋转90°之后,求旋转后的坐标。

    /**
     * 计算某个点旋转后的坐标
     *
     * @param point  旋转的点 {x,y}
     * @param angle 旋转的角度
     * @param originPoint 基于哪个点旋转,默认值左上角原点{x: 0, y: 0}
     * @returns {{x: number, y: number}}
     */
    function rotatePoint(point, angle, originPoint = {x: 0, y: 0}) {
        const cosA = Math.cos(angle * Math.PI / 180);
        const sinA = Math.sin(angle * Math.PI / 180);
        const rx = originPoint.x + (point.x - originPoint.x) * cosA - (point.y - originPoint.y) * sinA;
        const ry = originPoint.y + (point.x - originPoint.x) * sinA - (point.y - originPoint.y) * cosA;
        return { x: rx,y: ry };
    }

    const point = {x:200, y:100};
    const angle = 90;
    // const originPoint = {x:0, y:0};

    console.log('-->', rotatePoint(point, angle));

下面就是具体的计算方法,拿过来就能够间接应用。
不过该办法也有个小问题,如下面截图所示(-99.999999其实应该是-100),都是间接应用js间接计算,免不了就会存在计算精度问题(想理解更多无关计算精度问题,请自行搜寻)。想要解决这个问题,能够通过引入decimal.js或者math.js或者bigNumber.js解决。如何应用也请本人搜寻-_-!
然而除非对精度要求特地高,不然这点误差我感觉能够忽略不计。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理