如何在SwiftUI中实现两个相互交叠的连通圆环效果

该效果并非两个圆环的简单叠加，交叠区域不存在层级遮挡，两个圆环的环体是连通状态。

可选实现方案 #

• CSS 实现
  适合轻量静态场景，可通过混合模式或遮罩实现，核心代码示例：

  .ring-container {
    position: relative;
    width: 320px;
    height: 200px;
  }
  .ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 20px宽的圆环 */
    border: 20px solid #2196F3;
    box-sizing: border-box;
  }
  .ring:nth-child(2) {
    left: 120px;
    border-color: #F44336;
    /* 混合模式消除层级遮挡的断层感 */
    mix-blend-mode: multiply;
  }
  

• SVG 实现
  效果最稳定、适配性最好，通过蒙版实现无瑕疵的连通效果，代码示例：

  <svg width="320" height="200" viewBox="0 0 320 200">
    <defs>
      <!-- 共用蒙版挖空两个圆环的中心区域 -->
      <mask id="connectedRingMask">
        <rect width="100%" height="100%" fill="#fff"/>
        <circle cx="100" cy="100" r="80" fill="#000"/>
        <circle cx="220" cy="100" r="80" fill="#000"/>
      </mask>
    </defs>
    <circle cx="100" cy="100" r="100" fill="#2196F3" mask="url(#connectedRingMask)"/>
    <circle cx="220" cy="100" r="100" fill="#F44336" mask="url(#connectedRingMask)"/>
  </svg>
  

• Canvas 实现
  适合动态生成、需要交互的场景，通过路径填充实现效果，核心代码片段：

  const canvas = document.querySelector('#ringCanvas')
  const ctx = canvas.getContext('2d')
  
  // 绘制左侧蓝色圆环
  ctx.beginPath()
  ctx.arc(100, 100, 100, 0, Math.PI * 2)
  // 逆时针绘制内圆挖空
  ctx.arc(100, 100, 80, 0, Math.PI * 2, true)
  ctx.fillStyle = '#2196F3'
  ctx.fill()
  
  // 绘制右侧红色圆环
  ctx.beginPath()
  ctx.arc(220, 100, 100, 0, Math.PI * 2)
  ctx.arc(220, 100, 80, 0, Math.PI * 2, true)
  ctx.fillStyle = '#F44336'
  ctx.fill()
  

内容的提问来源于stack exchange，提问作者LiangWang