环形部分点击事件

Question

我需要知道，如果用户点击红色/橙色/蓝色/紫色/黄色或绿色区域，则突出显示环形部分内的点坐标（x，y）（为简单起见，使用矩形）。

无法找到点计算的等式。

Answer 1

就像@Yoplaboom在评论中说的那样，我会计算角度，然后按度数划分区域并检查点击的区域。

看一下你的问题的简化：

＆＃13;

＆＃13;

$(document).ready(function(e) {
    $('#back').click(function(e) {
        var innerR = 50;
    	var centerX = 150; 
        var centerY = 150; 
        var posX = $(this).position().left;
        var posY = $(this).position().top;
        deltaX = (e.pageX - posX)-centerX;
        deltaY = centerY-(e.pageY - posY);
        var rad = Math.atan2(deltaY, deltaX);
        var deg = rad * (180 / Math.PI);
      
        var d = Math.sqrt( Math.pow(deltaX,2) + Math.pow(deltaY,2) );
        if (d < innerR) return;
        
        if (0<deg && deg<90){
            alert("green");
        }
        else if(90<deg && deg<180){
          alert("red");
        }
        else if(0>deg && deg>-90){
          alert("blue");
        }
        else if(90>deg && deg>-180){
          alert("yellow");
        }
    });
});

＆＃13;

#back { 
width:300px;
height:300px; 
background-color: #fffffa;
  position:relative
}
#red { 
width:150px;
height:150px;
float: left;
background-color: red;
}
#green { 
width:150px;
height:150px;
float: left;
background-color: green;
}
#yellow { 
width:150px;
height:150px;
float: left;
background-color: yellow;
}
#blue { 
width:150px;
height:150px;
float: left;
background-color: blue;
}
#center{
position: absolute;
  width:100px;
  height:100px;
  top:100px;
  left:100px;
  background:white;
  border-radius: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back" >
  <div id="red"></div>
  <div id="green"></div>
  <div id="yellow"></div>
  <div id="blue"></div>
  <div id="center"></div>
</div>

＆＃13;

＆＃13;

＆＃13;