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

最新推荐文章于 2025-12-04 22:56:41 发布

原创

最新推荐文章于 2025-12-04 22:56:41 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

业务中常遇到无法完成的效果图，需UI切图，但切图后点击事件监听不便。如圆环是单独图片，此时只能通过js判断用户鼠标点击、拖动位置，计算出点击的色块区域。

在业务需求中，常常出现一些我们无法完成的效果图，这时需要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