如何实现圆弧下方的平移功能？已完成基础半径创建

用户问题：我已完成基础半径的创建，请问如何将其与平移（panning）功能关联起来？

用户现有代码：

const strokeWidth = 10;
const size = width - 32;

const { PI, cos, sin } = Math;

const cy = size / 2;
const cx = size / 2;
const A = Math.PI * PI * 0.4;
const startAngle = PI + PI * 0.2;
const endAngle = 2 * PI - PI * 0.2;
const r = (size - strokeWidth) / 2;
const startX = cx - r * cos(startAngle);
const startY = -r * sin(startAngle) + cy;

const endX = cx - r * cos(endAngle);
const endY = -r * sin(endAngle) + cy;

const d = `M ${startX} ${startY} A ${r} ${r} 0 1 0 ${endX} ${endY}`;

核心实现方案 #

平移的本质是通过修改弧形的中心坐标，结合鼠标/触摸事件的偏移量来实时更新弧形位置，具体步骤如下：

1. 添加平移状态变量 #

新增变量记录当前的平移偏移量，初始默认无偏移：

let panOffsetX = 0;
let panOffsetY = 0;

2. 修改弧形坐标计算逻辑 #

将原来基于容器中心的cx、cy替换为包含平移偏移量的实时坐标，重新计算弧形的起点、终点和路径：

// 实时中心 = 原中心 + 平移偏移量
const currentCx = cx + panOffsetX;
const currentCy = cy + panOffsetY;

const startX = currentCx - r * cos(startAngle);
const startY = -r * sin(startAngle) + currentCy;

const endX = currentCx - r * cos(endAngle);
const endY = -r * sin(endAngle) + currentCy;

const d = `M ${startX} ${startY} A ${r} ${r} 0 1 0 ${endX} ${endY}`;

3. 监听鼠标事件实现平移 #

为SVG容器添加鼠标事件监听，通过拖拽动作更新平移偏移量并实时渲染弧形：

let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;

// 替换为你的SVG容器元素
const container = document.getElementById('svg-container');

// 鼠标按下：开始拖拽
container.addEventListener('mousedown', (e) => {
  isDragging = true;
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
});

// 鼠标移动：计算偏移并更新
container.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  const deltaX = e.clientX - lastMouseX;
  const deltaY = e.clientY - lastMouseY;
  
  panOffsetX += deltaX;
  panOffsetY += deltaY;
  
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
  
  // 调用渲染函数更新弧形
  renderArc();
});

// 鼠标松开/离开：结束拖拽
container.addEventListener('mouseup', () => isDragging = false);
container.addEventListener('mouseleave', () => isDragging = false);

4. 实现渲染函数 #

编写渲染函数，确保平移后弧形的路径实时更新到SVG元素：

function renderArc() {
  const currentCx = cx + panOffsetX;
  const currentCy = cy + panOffsetY;
  
  const startX = currentCx - r * cos(startAngle);
  const startY = -r * sin(startAngle) + currentCy;
  
  const endX = currentCx - r * cos(endAngle);
  const endY = -r * sin(endAngle) + currentCy;
  
  const d = `M ${startX} ${startY} A ${r} ${r} 0 1 0 ${endX} ${endY}`;
  
  // 替换为你的path元素
  const arcPath = document.getElementById('arc-path');
  arcPath.setAttribute('d', d);
}

5. 可选：适配触摸设备 #

如果需要支持移动端平移，添加触摸事件监听：

container.addEventListener('touchstart', (e) => {
  if (e.touches.length === 1) {
    isDragging = true;
    lastMouseX = e.touches[0].clientX;
    lastMouseY = e.touches[0].clientY;
    e.preventDefault(); // 防止页面滚动
  }
});

container.addEventListener('touchmove', (e) => {
  if (!isDragging || e.touches.length !== 1) return;
  
  const deltaX = e.touches[0].clientX - lastMouseX;
  const deltaY = e.touches[0].clientY - lastMouseY;
  
  panOffsetX += deltaX;
  panOffsetY += deltaY;
  
  lastMouseX = e.touches[0].clientX;
  lastMouseY = e.touches[0].clientY;
  
  renderArc();
  e.preventDefault();
});

container.addEventListener('touchend', () => isDragging = false);

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