【前端】鼠标事件计算与圆心形成的角度

在业务需求中，常常出现一些我们无法完成的效果图，这时需要UI切图给我们，而切图后不可避免的一些点击事件无法方便的监听

如该图圆环，其实是一张单独的图片，这种情况下只能通过js判断用户点击、拖动的鼠标位置，以此计算出是哪一个色块区域。

// centerX， centerY 为圆心坐标，常量
// pointX，pointY 为鼠标滑动坐标
function calculateAngle(centerX, centerY, pointX, pointY) {
    let slope = (pointX - centerX) / (pointY - centerY);
    let angle = Math.atan(slope) * (180 / Math.PI);

    if ((pointY < centerY)) { // 第二、第三象限
        angle += 180;
    } else if (pointX < centerX) { // 第四象限
        angle += 360;
    }

    return angle;
}


move({ changedTouches }) {
        const { pageX, pageY } = changedTouches[0];
        const { centerX, centerY } = this.data;
        if (this.timer) return;
        let x = 0, y = 0;
        // 一二象限
        if (pageX > centerX) {
            x = pageX - centerX
            // 一象限
            if (pageY < centerY) {
                y = centerY - pageY
            }
            // 二象限
            if (pageY > centerY) {
                y = centerY - pageY
            }
        }
        // 三四象限
        if (pageX < centerX) {
            x = pageX - centerX
            // 三象限
            if (pageY > centerY) {
                y = centerY - pageY
            }
            // 四象限
            if (pageY < centerY) {
                y = centerY - pageY
            }
        }

        this.timer = setTimeout(() => {
            const angle = calculateAngle(0, 0, x, y);
            const index = Math.floor(angle / 30);

            this.timer = null;
            handleClick(square[index - 1]);
        }, 50);
    },