```tsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const RADIUS = 200; const BG_COLOR = "#0f172a"; // 辅助函数：计算正n边形的顶点坐标 const getPolygonPoints = (n: number, r: number, rotationOffset = -Math.PI / 2) => { const points = []; for (let i = 0; i < n; i++) { const theta = (i / n) * 2 * Math.PI + rotationOffset; points.push({ x: CENTER_X + r * Math.cos(theta), y: CENTER_Y + r * Math.sin(theta), theta }); } return points; }; // 辅助函数：计算两点距离 const dist = (p1: {x: number, y: number}, p2: {x: number, y: number}) => { return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); }; export const CyclotomyView = () => { const [sides, setSides] = useState(6); const [stage, setStage] = useState<'idle' | 'bisect' | 'morph'>('idle'); const [perimeter, setPerimeter] = useState(0); const [piApprox, setPiApprox] = useState(0); // 动画循环控制 useEffect(() => { let timeout: NodeJS.Timeout; const runSequence = async () => { // 1. 初始状态显示 setStage('idle'); await new Promise(r => setTimeout(r, 1500)); // 2. 显示切割线 (Bisect) if (sides < 192) { setStage('bisect'); await new Promise(r => setTimeout(r, 1500)); // 3. 变形为更多边形 setStage('morph'); await new Promise(r => setTimeout(r, 1000)); // 更新数据并进入下一轮 setSides(prev => prev * 2); } else { // 重置 await new Promise(r => setTimeout(r, 3000)); setSides(6); } }; runSequence(); return () => clearTimeout(timeout); }, [sides]); // 计算当前边数下的几何数据 useEffect(() => { // 几何法计算周长: 2 * n * R * sin(PI/n) // 但为了模拟割圆术，我们用边长累加 const sideLen = 2 * RADIUS * Math.sin(Math.PI / sides); const p = sideLen * sides; setPerimeter(p); setPiApprox(p / (2 * RADIUS)); }, [sides]); // 获取当前多边形顶点 const currentPoints = useMemo(() => getPolygonPoints(sides, RADIUS), [sides]); // 获取下一级多边形顶点（用于变形/切割动画） const nextPoints = useMemo(() => getPolygonPoints(sides * 2, RADIUS), [sides]); // 生成多边形路径 const pointsToPath = (pts: {x: number, y: number}[]) => { return pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ') + ' Z'; }; // 渲染切割线（从当前边中点射向圆弧的线） const renderBisectors = () => { if (stage === 'idle') return null; // 为了性能和视觉清晰度，边数过多时不渲染所有切割线，只渲染一部分或者淡出 if (sides > 48) return null; return currentPoints.map((p1, i) => { const p2 = currentPoints[(i + 1) % currentPoints.length]; // 边中点 const midX = (p1.x + p2.x) / 2; const midY = (p1.y + p2.y) / 2; // 对应的圆上点 (下一级多边形的奇数索引点) // 注意：getPolygonPoints生成的点顺序对应，nextPoints中每两个点之间插入了一个新点 // current i 对应 next 2*i. 新点是 2*i + 1 const targetPt = nextPoints[(i * 2 + 1) % nextPoints.length]; return ( {/* 从弦中点到圆弧的连线 */} 24 ? 1 : 2} strokeDasharray="4 2" opacity={stage === 'bisect' ? 1 : 0} className="transition-opacity duration-500" /> {/* 新产生的顶点 */} 24 ? 2 : 3} fill="#f59e0b" opacity={stage === 'bisect' ? 1 : 0} className="transition-opacity duration-500" /> ); }); }; // 渲染高亮区域（局部放大示意） const renderZoomDetail = () => { // 只在边数较少时显示，避免混乱 if (sides > 24) return null; // 取最上方的一个三角形片段进行展示 const idx = 0; const p1 = currentPoints[idx]; const p2 = currentPoints[(idx + 1) % currentPoints.length]; const nextP = nextPoints[(idx * 2 + 1) % nextPoints.length]; // 圆弧中点 return ( {/* 稍微偏移以免遮挡主体 */} {/* 连线 */} {/* 新增的切割三角形 */} {stage !== 'idle' && ( <> )} ); }; return ( ); }; ```