import React, { useState, useEffect, useRef, useMemo } 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; // 缩放比例：1单位 = 30像素 // 颜色定义 - 科技感配色 const COLORS = { bg: '#0f172a', // 深蓝灰背景 gridMain: '#1e293b', // 主网格 gridSub: '#172033', // 次网格 axis: '#64748b', // 坐标轴 primary: '#0ea5e9', // 主色调（亮蓝）- 曲线 secondary: '#ec4899', // 次色调（粉红）- 顶点/标记 accent: '#10b981', // 强调色（翠绿）- 截距 text: '#94a3b8', // 普通文本 textHighlight: '#e2e8f0', // 高亮文本 panelBg: '#1e293b', // 面板背景 panelBorder: '#334155',// 面板边框 sliderTrack: '#334155', sliderThumb: '#f8fafc', }; // 工具函数：逻辑坐标转屏幕坐标 const toScreenX = (x) => ORIGIN_X + x * SCALE; const toScreenY = (y) => ORIGIN_Y - y * SCALE; /** * 滑块组件 - 优化了点击区域和视觉效果 */ const Slider = ({ label, value, min, max, onChange, x, y, width, color }) => { const isDragging = useRef(false); const trackRef = useRef(null); // 计算滑块在轨道上的位置 const percentage = (value - min) / (max - min); const thumbX = x + percentage * width; // 统一处理坐标计算 const calculateValue = (clientX, rect) => { const offsetX = clientX - rect.left - x; // 减去SVG内的偏移x let newPct = offsetX / width; newPct = Math.max(0, Math.min(1, newPct)); return min + newPct * (max - min); }; const handlePointerDown = (e) => { isDragging.current = true; const rect = e.currentTarget.getBoundingClientRect(); // 立即更新一次位置 const val = calculateValue(e.clientX, rect); onChange(val); // 绑定全局移动事件 const onMove = (moveEvent) => { if (!isDragging.current) return; const newVal = calculateValue(moveEvent.clientX, rect); onChange(newVal); }; const onUp = () => { isDragging.current = false; window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); }; return ( {/* 标签文本 - 左对齐，留出足够空间 */} {label} {/* 点击感应区 (透明) */} {/* 轨道背景 */} {/* 激活轨道 */} {/* 滑块头部 */} {/* 数值显示 */} {value.toFixed(1)} ); }; export default function QuadraticFunctionExplorer() { // 核心参数状态 const [params, setParams] = useState({ a: 1, b: 0, c: -2 }); // 动画状态：用于扫描线和光效 const [animState, setAnimState] = useState({ time: 0 }); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画循环 useEffect(() => { const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; // 秒 setAnimState({ time: elapsed }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 1. 计算二次函数路径 const curvePath = useMemo(() => { const { a, b, c } = params; let path = ""; const step = 0.1; // 精度 // 计算屏幕覆盖的 x 范围 const minX = -((ORIGIN_X + 50) / SCALE); const maxX = (VIEW_WIDTH - ORIGIN_X + 50) / SCALE; let first = true; for (let x = minX; x <= maxX; x += step) { const y = a * x * x + b * x + c; const sx = toScreenX(x); const sy = toScreenY(y); // 简单裁剪防止数值溢出 if (sy > -500 && sy < VIEW_HEIGHT + 500) { if (first) { path += `M ${sx} ${sy}`; first = false; } else { path += `L ${sx} ${sy}`; } } } return path; }, [params]); // 2. 计算关键点（顶点、焦点等） const vertex = useMemo(() => { const { a, b, c } = params; if (Math.abs(a) < 0.001) return null; const vx = -b / (2 * a); const vy = c - (b * b) / (4 * a); return { x: vx, y: vy, sx: toScreenX(vx), sy: toScreenY(vy) }; }, [params]); // 3. 扫描点位置计算 const scanPoint = useMemo(() => { const { a, b, c } = params; const { time } = animState; // 使用正弦波让点在可视区域内来回移动 const range = 12; const speed = 1; const x = Math.sin(time * speed) * range; const y = a * x * x + b * x + c; return { x, y, sx: toScreenX(x), sy: toScreenY(y) }; }, [params, animState]); // 4. 生成背景网格 (Memoized) const Grid = useMemo(() => { const lines = []; const widthCount = Math.ceil(VIEW_WIDTH / SCALE / 2) + 2; const heightCount = Math.ceil(VIEW_HEIGHT / SCALE / 2) + 2; // 纵向线 for (let x = -widthCount; x <= widthCount; x++) { const sx = toScreenX(x); lines.push( ); } // 横向线 for (let y = -heightCount; y <= heightCount; y++) { const sy = toScreenY(y); lines.push( ); } return {lines}; }, []); return (

{/* SVG 画布 */}

); }