我正在开发带有静态选择器的车轮微调器（想想命运之轮）。

圆形分段是通过具有一个正方形元素生成的，然后根据分段的数量将其倾斜X度。另一个方形元素，具有完全圆形的左侧和顶部。然后显示重叠部分以构成分段。

旋转轮子后，我需要单击器来检测选择了哪个段。

问题是，如何确定段的坐标以确定点击器是否在段内。

编辑以添加代码段：

段生成

<div classname="Segment-outer" style={{transform: "skewX(" + this.props.skewDegrees
+ "deg)"}}>
  <div classname="Segment-inner" style={{transform: "skewX(-"
  + this.props.skewDegrees + "deg)"}}>
  </div>
</div>

段保持在以下div中，然后按如下所示旋转。

<div classname="Spinwheel-holder" style={{transform: "translate(-50%,-50%) 
rotate(" + this.state.rotateDegrees + "deg)"}}>

这是五个段的输出（在倾斜和CSS之后）。随着添加的更多，每个细分变得越来越细：

已知变量：

顶部，左侧，右侧，底部，x，y，高度，宽度

进一步编辑：

目前，我正在使用它进行碰撞检测，该方法虽然有效，但并不完全准确。

collision = !(
  ((segmentRect.y + segmentRect.height) < (this.state.clickerLocation.y)) ||
  (segmentRect.y > (this.state.clickerLocation.y + this.state.clickerLocation.height)) ||
  ((segmentRect.x + segmentRect.width) < this.state.clickerLocation.x) ||
  (segmentRect.x > (this.state.clickerLocation.x + this.state.clickerLocation.width))
)