如何创建完美的 CSS 圆形扇区

最近，我构建了一个 CSS 大奖轮盘赌，该项目提出了一个独特的挑战：当指针指向扇区时动态突出显示扇区。 轮盘赌需要响应能力和可变扇区计数，排除了简单的图像或 SVG 解决方案。 几何计算是必不可少的。

我的方法涉及围绕圆心旋转跨度并沿半径剪裁它们。 下面详细介绍了初始设置（可通过下面的链接查看完整内容），涉及基本样式和跨度增量旋转（360/sectors.length 度）。 这个阶段的视觉效果并不复杂。

为了突出显示一个扇区，我需要给定半径和角度的圆上两点之间的距离。 公式为：

<code>2 * radius * Math.sin(θ / 2)</code>

其中 θ 是以弧度表示的角度。 转换使用：

<code>2 * radius * Math.sin(Math.PI / sectors.length)</code>

接下来，我解决了扇区剪切问题以防止重叠。我的第一次尝试使用了对角剪辑路径：

<code>clip-path: polygon(100% 0, 0 50%, 100% 100%);</code>

这对许多扇区都有效，但缺陷在扇区较少时变得明显，特别是只有三个扇区，如图所示：

解决方案涉及计算跨度和圆之间的交点，从该点到中心进行裁剪。这纠正了剪辑：

研究得出了由连接交点的线在水平射线上创建的线段的公式：

中心部分：

<code>radius * (1 - Math.cos(θ / 2))</code>

外段：

<code>radius * Math.cos(θ / 2)</code>

（θ，以弧度表示）

这些片段之间的比例决定了剪切点，导致：

<code>const clipPosition = Math.cos(Math.PI / sectors.length) * 100</code>

更正后的clip-path：

<code>{
  'clip-path': `polygon(100% 0, ${clipPosition}% 0, 0 50%, ${
    clipPosition
  }% 100%, 100% 100%)`
}</code>

基于 Vue 的最终结果允许通过中心点击进行随机旋转，并通过扇区点击进行定向旋转。 （省略了完整代码的链接，按照原文）。 这个项目提供了实用三角学的宝贵课程。

以上是如何创建完美的 CSS 圆形扇区的详细内容。更多信息请关注PHP中文网其他相关文章！