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; // 缩放比例 // 科技感配色方案 const COLORS = { bg: '#0f172a', // 深蓝灰背景 gridMain: '#334155', // 主网格 gridSub: '#1e293b', // 次网格 axis: '#94a3b8', // 坐标轴 primary: '#38bdf8', // 主色调（天蓝）- 曲线 primaryGlow: '#0ea5e9',// 发光色 secondary: '#f472b6', // 次色调（粉红）- 顶点 accent: '#34d399', // 强调色（翠绿）- 扫描 text: '#cbd5e1', // 普通文本 textDim: '#64748b', // 暗淡文本 panelBg: 'rgba(30, 41, 59, 0.85)', // 面板背景（半透明） panelBorder: '#475569',// 面板边框 sliderTrack: '#334155', sliderActive: '#38bdf8', sliderThumb: '#f8fafc', }; // 坐标转换工具 const toScreenX = (x) => ORIGIN_X + x * SCALE; const toScreenY = (y) => ORIGIN_Y - y * SCALE; /** * 优化后的滑块组件 * 修复了拖动位置不匹配的问题，使用轨道(track)的真实屏幕坐标进行计算 */ const Slider = ({ label, value, min, max, step = 0.1, onChange, x, y, width, color }) => { const isDragging = useRef(false); const trackRef = useRef(null); // 引用可视轨道元素 // 计算滑块当前位置 const percentage = (value - min) / (max - min); const thumbX = x + percentage * width; // 核心修复：基于轨道真实 boundingBox 计算比例 const calculateValue = (clientX) => { if (!trackRef.current) return value; const trackRect = trackRef.current.getBoundingClientRect(); // 计算鼠标相对于轨道左侧的偏移量 const offsetX = clientX - trackRect.left; // 计算比例并限制在 0-1 之间 let newPct = offsetX / trackRect.width; newPct = Math.max(0, Math.min(1, newPct)); // 映射到数值范围 let rawValue = min + newPct * (max - min); // 处理步长（可选，这里为了平滑可以不处理，或者保留小数位） return Math.round(rawValue / step) * step; }; const handlePointerDown = (e) => { isDragging.current = true; e.preventDefault(); // 防止选中文本 // 立即响应点击位置 const newVal = calculateValue(e.clientX); onChange(newVal); // 绑定全局事件 const onMove = (moveEvent) => { if (!isDragging.current) return; const val = calculateValue(moveEvent.clientX); onChange(val); }; const onUp = () => { isDragging.current = false; window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); }; return ( {/* 标签文本 */} {label} {/* 点击感应区 (透明，比轨道大) */} {/* 轨道背景 (ref绑定在这里用于计算) */} {/* 激活条 */} {/* 滑块头部 - 增加光晕效果 */} {/* 数值显示 */} {value.toFixed(1)} ); }; export default function QuadraticTechExplorer() { // 核心参数 const [params, setParams] = useState({ a: 1, b: 0, c: -2 }); // 动画驱动状态 const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 初始化粒子 (只运行一次) const particles = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.2 })); }, []); // 动画循环 useEffect(() => { const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; setTime(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.2; // 采样步长 // 计算可视范围对应的逻辑X坐标 const minLogicalX = -((ORIGIN_X + 100) / SCALE); const maxLogicalX = (VIEW_WIDTH - ORIGIN_X + 100) / SCALE; let isFirst = true; for (let x = minLogicalX; x <= maxLogicalX; x += step) { const y = a * x * x + b * x + c; const sx = toScreenX(x); const sy = toScreenY(y); // 限制Y轴绘制范围，避免数值爆炸导致SVG渲染错误 if (sy > -1000 && sy < VIEW_HEIGHT + 1000) { if (isFirst) { path += `M ${sx} ${sy}`; isFirst = false; } else { path += `L ${sx} ${sy}`; } } } return path; }, [params]); // 2. 计算关键特征点 const features = useMemo(() => { const { a, b, c } = params; // 顶点 let vertex = null; if (Math.abs(a) > 0.001) { const vx = -b / (2 * a); const vy = c - (b * b) / (4 * a); vertex = { x: vx, y: vy, sx: toScreenX(vx), sy: toScreenY(vy) }; } // y轴截距点 const intercept = { x: 0, y: c, sx: toScreenX(0), sy: toScreenY(c) }; return { vertex, intercept }; }, [params]); // 3. 扫描点动画位置 const scanner = useMemo(() => { const { a, b, c } = params; // 使用正弦波控制x坐标来回扫描 const scanRange = 10; const scanSpeed = 0.8; const x = Math.sin(time * scanSpeed) * scanRange; const y = a * x * x + b * x + c; return { x, y, sx: toScreenX(x), sy: toScreenY(y) }; }, [params, time]); // 4. 生成背景网格 (Memoized) const Grid = useMemo(() => { const lines = []; const wCount = Math.ceil(VIEW_WIDTH / SCALE / 2) + 1; const hCount = Math.ceil(VIEW_HEIGHT / SCALE / 2) + 1; // 垂直线 for (let i = -wCount; i <= wCount; i++) { const x = toScreenX(i); const isMain = i % 5 === 0; lines.push( ); } // 水平线 for (let i = -hCount; i <= hCount; i++) { const y = toScreenY(i); const isMain = i % 5 === 0; lines.push( ); } return {lines}; }, []); return (

{/* SVG 容器 */}

); }