import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // ========================================== // 常量与配置 // ========================================== const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const ORIGIN_X = VIEW_WIDTH / 2; const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点 const SCALE = 30; // 缩放比例 const GRID_SIZE = 1; // 网格单位 // 颜色配置 - 科技感配色 const THEME = { bg: '#0f172a', gridMain: '#1e293b', gridSub: '#172033', axis: '#64748b', primary: '#0ea5e9', // 天蓝 - 曲线 primaryGlow: '#38bdf8', secondary: '#f472b6', // 粉色 - 顶点 accent: '#10b981', // 绿色 - 扫描 text: '#94a3b8', textLight: '#e2e8f0', panelBg: 'rgba(30, 41, 59, 0.85)', panelBorder: '#334155', }; // ========================================== // 工具函数 // ========================================== const toScreenX = (x) => ORIGIN_X + x * SCALE; const toScreenY = (y) => ORIGIN_Y - y * SCALE; const toLogicX = (sx) => (sx - ORIGIN_X) / SCALE; // 生成随机粒子背景 const generateParticles = (count) => { return Array.from({ length: count }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.2 + 0.05, })); }; // ========================================== // 子组件：高科技滑块 // ========================================== const TechSlider = React.memo(({ label, value, min, max, onChange, x, y, width, color }) => { const [isDragging, setIsDragging] = useState(false); const trackRef = useRef(null); const updateValue = useCallback((clientX) => { if (!trackRef.current) return; const rect = trackRef.current.getBoundingClientRect(); const offsetX = clientX - rect.left; let percent = offsetX / width; percent = Math.max(0, Math.min(1, percent)); const newValue = min + percent * (max - min); onChange(newValue); }, [width, min, max, onChange]); const handlePointerDown = (e) => { setIsDragging(true); e.target.setPointerCapture(e.pointerId); updateValue(e.clientX); }; const handlePointerMove = (e) => { if (isDragging) { updateValue(e.clientX); } }; const handlePointerUp = (e) => { setIsDragging(false); e.target.releasePointerCapture(e.pointerId); }; const percentage = (value - min) / (max - min); const thumbX = x + percentage * width; return ( {/* 标签 */} {label} {/* 交互区域 (扩大的透明区域) */} {/* 轨道背景 */} {/* 激活条 */} {/* 滑块头部 */} {/* 悬浮数值提示 */} {isDragging && ( {value.toFixed(1)} )} {/* 静态数值显示 */} {value.toFixed(1)} ); }); // ========================================== // 主组件：二次函数实验室 // ========================================== export default function QuadraticLab() { // 状态管理 const [params, setParams] = useState({ a: 1.0, b: 0.0, c: 0.0 }); const [time, setTime] = useState(0); // 动画循环 Refs const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 初始化粒子背景 (只执行一次) const particles = useMemo(() => generateParticles(40), []); // 启动动画循环 useEffect(() => { const animate = () => { const now = Date.now(); const t = (now - startTimeRef.current) / 1000; setTime(t); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 计算曲线路径 (useMemo 优化) const curvePath = useMemo(() => { const { a, b, c } = params; let path = ""; const step = 0.1; // 精度 // 计算屏幕覆盖的逻辑X范围 const minLogicX = toLogicX(0) - 2; const maxLogicX = toLogicX(VIEW_WIDTH) + 2; let first = true; for (let x = minLogicX; x <= maxLogicX; x += step) { const y = a * x * x + b * x + c; const sx = toScreenX(x); const sy = toScreenY(y); // 简单的数值钳制，防止SVG渲染崩溃 if (sy > -2000 && sy < VIEW_HEIGHT + 2000) { if (first) { path += `M ${sx} ${sy}`; first = false; } else { path += ` L ${sx} ${sy}`; } } } return path; }, [params]); // 计算关键点：顶点 const vertex = useMemo(() => { const { a, b, c } = params; if (Math.abs(a) < 0.001) return null; const x = -b / (2 * a); const y = c - (b * b) / (4 * a); return { x, y, sx: toScreenX(x), sy: toScreenY(y) }; }, [params]); // 计算扫描点与切线 const scanner = useMemo(() => { const { a, b, c } = params; // 让点在 [-8, 8] 之间往复运动 const range = 8; const speed = 0.8; const logicX = Math.sin(time * speed) * range; const logicY = a * logicX * logicX + b * logicX + c; // 导数 (斜率) y' = 2ax + b const slope = 2 * a * logicX + b; // 计算切线 (用于绘制短线段) const tangentLength = 3; // 逻辑单位长度 const tx1 = logicX - tangentLength; const ty1 = logicY - slope * tangentLength; const tx2 = logicX + tangentLength; const ty2 = logicY + slope * tangentLength; return { x: logicX, y: logicY, slope, sx: toScreenX(logicX), sy: toScreenY(logicY), tStart: { sx: toScreenX(tx1), sy: toScreenY(ty1) }, tEnd: { sx: toScreenX(tx2), sy: toScreenY(ty2) } }; }, [params, time]); // 生成网格 (useMemo 优化) const Grid = useMemo(() => { const lines = []; const xRange = Math.ceil(VIEW_WIDTH / SCALE / 2) + 2; const yRangeTop = Math.ceil(ORIGIN_Y / SCALE) + 2; const yRangeBottom = Math.ceil((VIEW_HEIGHT - ORIGIN_Y) / SCALE) + 2; // 纵线 for (let x = -xRange; x <= xRange; x++) { const sx = toScreenX(x); lines.push( ); } // 横线 for (let y = -yRangeBottom; y <= yRangeTop; y++) { const sy = toScreenY(y); lines.push( ); } return {lines}; }, []); // 格式化公式字符串 const formulaStr = useMemo(() => { const formatNum = (n, isFirst = false) => { const absN = Math.abs(n).toFixed(1); const sign = n >= 0 ? (isFirst ? '' : ' + ') : ' - '; return `${sign}${absN}`; }; return ( y = {params.a.toFixed(1)}x² {formatNum(params.b)}x {formatNum(params.c)} ); }, [params]); return (

); }