JS如何實現圓形進度條拖拽滑動

# JS如何實現圓形進度條拖拽滑動

## 引言

在現代Web開發中，交互式UI組件已成為提升用戶體驗的關鍵要素。圓形進度條因其視覺直觀性和空間效率，被廣泛應用于音量控制、文件上傳、設置調節等場景。本文將深入探討如何使用原生JavaScript實現一個**可拖拽滑動**的圓形進度條，涵蓋從基礎數學原理到完整代碼實現的全部過程。

## 一、核心實現原理

### 1.1 圓形幾何基礎
實現圓形進度條需要掌握以下幾何概念：
- **極坐標系轉換**：通過`Math.atan2(y, x)`計算點與圓心的角度
- **弧度與角度轉換**：`radians = degrees * (Math.PI/180)`
- **圓周點坐標計算**：`x = cx + r * cos(θ)`, `y = cy + r * sin(θ)`

### 1.2 交互邏輯設計
拖拽交互需要處理三個核心事件：
```javascript
const progressCircle = document.getElementById('progress-circle');

progressCircle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);

二、HTML/CSS基礎結構

2.1 HTML骨架

<div class="progress-container">
  <svg width="200" height="200" viewBox="0 0 200 200">
    <!-- 背景圓 -->
    <circle class="progress-bg" cx="100" cy="100" r="90" />
    <!-- 進度圓 -->
    <circle class="progress-fill" 
            cx="100" cy="100" r="90"
            stroke-dasharray="565.48"
            stroke-dashoffset="565.48" />
  </svg>
  <div class="drag-handle"></div>
  <span class="progress-text">0%</span>
</div>

2.2 CSS關鍵樣式

.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-fill {
  fill: none;
  stroke: #4285f4;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.drag-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #4285f4;
  border-radius: 50%;
  cursor: pointer;
}

三、JavaScript完整實現

3.1 初始化變量

const container = document.querySelector('.progress-container');
const fill = document.querySelector('.progress-fill');
const handle = document.querySelector('.drag-handle');
const text = document.querySelector('.progress-text');

const center = { x: 100, y: 100 };
const radius = 90;
const circumference = 2 * Math.PI * radius;
let isDragging = false;

3.2 進度計算函數

function updateProgress(angle) {
  // 限制角度范圍0-360
  angle = Math.max(0, Math.min(360, angle));
  
  // 計算dashoffset
  const offset = circumference - (angle / 360) * circumference;
  fill.style.strokeDashoffset = offset;
  
  // 更新手柄位置
  const rad = (angle - 90) * (Math.PI / 180);
  handle.style.left = `${center.x + radius * Math.cos(rad) - 10}px`;
  handle.style.top = `${center.y + radius * Math.sin(rad) - 10}px`;
  
  // 更新文本
  text.textContent = `${Math.round(angle / 3.6)}%`;
}

3.3 拖拽事件處理

function getAngleFromEvent(e) {
  const rect = container.getBoundingClientRect();
  const x = e.clientX - rect.left - center.x;
  const y = e.clientY - rect.top - center.y;
  
  // 計算角度（0-360）
  let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
  return angle < 0 ? angle + 360 : angle;
}

function startDrag(e) {
  isDragging = true;
  updateProgress(getAngleFromEvent(e));
}

function drag(e) {
  if (!isDragging) return;
  updateProgress(getAngleFromEvent(e));
}

function endDrag() {
  isDragging = false;
}

3.4 觸摸事件支持

// 添加觸摸事件監聽
handle.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startDrag(e.touches[0]);
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  e.preventDefault();
  drag(e.touches[0]);
});

document.addEventListener('touchend', endDrag);

四、高級功能擴展

4.1 動畫過渡效果

.progress-fill {
  transition: stroke-dashoffset 0.3s ease-out;
}

.drag-handle {
  transition: left 0.2s, top 0.2s;
}

4.2 鍵盤可訪問性

handle.setAttribute('tabindex', '0');
handle.addEventListener('keydown', (e) => {
  const step = e.shiftKey ? 10 : 1;
  let angle = parseFloat(fill.style.strokeDashoffset) / circumference * 360;
  
  switch(e.key) {
    case 'ArrowUp':
    case 'ArrowRight':
      angle += step;
      break;
    case 'ArrowDown':
    case 'ArrowLeft':
      angle -= step;
      break;
    default:
      return;
  }
  
  updateProgress(angle);
  e.preventDefault();
});

4.3 性能優化建議

1. 使用requestAnimationFrame節流拖拽更新
2. 對頻繁操作的DOM元素進行緩存
3. 使用CSS will-change屬性提示瀏覽器優化

let lastFrameTime = 0;
function drag(e) {
  if (!isDragging || performance.now() - lastFrameTime < 16) return;
  lastFrameTime = performance.now();
  updateProgress(getAngleFromEvent(e));
}

五、完整代碼示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 包含前文CSS代碼 */
  </style>
</head>
<body>
  <!-- 包含前文HTML代碼 -->
  
  <script>
    // 包含全部JavaScript實現代碼
    // 初始化默認進度
    document.addEventListener('DOMContentLoaded', () => {
      updateProgress(0);
    });
  </script>
</body>
</html>

六、常見問題解決

6.1 邊界情況處理

• 角度跳躍問題：當從359°轉到0°時添加過渡檢測

function updateProgress(newAngle) {
  const oldAngle = currentAngle;
  // 處理跨越360°的過渡
  if (Math.abs(newAngle - oldAngle) > 180) {
    fill.style.transition = 'none';
    handle.style.transition = 'none';
    requestAnimationFrame(() => {
      updateProgress(newAngle > 180 ? newAngle - 360 : newAngle + 360);
      requestAnimationFrame(() => {
        fill.style.transition = '';
        handle.style.transition = '';
        updateProgress(newAngle);
      });
    });
    return;
  }
  // ...原有邏輯
}

6.2 瀏覽器兼容性

• 添加-webkit-前綴確保Safari兼容
• 使用PointerEvent替代部分鼠標事件

if (window.PointerEvent) {
  handle.addEventListener('pointerdown', startDrag);
  document.addEventListener('pointermove', drag);
  document.addEventListener('pointerup', endDrag);
}

結語

通過本文的逐步實現，我們完成了一個功能完善的圓形進度條組件。關鍵要點包括： 1. 極坐標系與DOM位置的轉換 2. SVG路徑屬性的動態控制 3. 完整的拖拽交互事件鏈 4. 跨設備的觸摸支持

讀者可以在此基礎上擴展更多功能，如多顏色分段、雙向拖拽、數據持久化等。完整項目代碼已托管在GitHub倉庫供參考。

擴展閱讀：
- SVG路徑動畫高級技巧
- Pointer Events規范 “`