/** * 实时时间轴组件 - TypeScript + Canvas API 实现 * 用于展示真实时间坐标轴，适合实时数据可视化 */ import { format } from "date-fns"; /** 缩放模式枚举 */ enum ZoomMode { /** 以鼠标位置为中心缩放 */ MousePosition = 'mouse', /** 以视口中心缩放 */ ViewportCenter = 'center', /** 标记模式 */ MarkMode = 'mark' } /** 时间格式化级别 */ enum TimeFormatLevel { Minute = 'minute', // 分钟级别 FiveMinutes = '5min', // 5分钟级别 TenMinutes = '10min', // 10分钟级别 HalfHour = '30min', // 半小时级别 Hour = 'hour', // 小时级别 ThreeHours = '3hour', // 3小时级别 SixHours = '6hour', // 6小时级别 Day = 'day', // 天级别 } /** 刻度级别配置 */ interface ScaleLevel { /** 级别标识 */ level: TimeFormatLevel; /** 主刻度时间间隔（毫秒） */ majorInterval: number; /** 次要刻度数量 */ minorTicks: number; /** 最小像素间距（避免刻度过密） */ minPixelDistance: number; /** 最大像素间距（避免刻度过疏） */ maxPixelDistance: number; /** 格式化函数 */ formatter: (date: Date) => { primary: string; secondary?: string }; } /** 单个刻度信息 */ interface Tick { /** 时间值（时间戳） */ timestamp: number; /** 屏幕位置 */ position: number; /** 是否为主刻度 */ isMajor: boolean; /** 主标签文本 */ primaryLabel?: string; /** 次标签文本（如日期） */ secondaryLabel?: string; } /** 时间标记 */ interface TimeMark { /** 时间戳 */ timestamp: number; /** 标记颜色 */ color?: string; /** 标记标签 */ label?: string; /** 标记类型 */ type?: 'custom' | 'event' | 'milestone'; } /** 时间轴配置 */ interface TimelineConfig { /** 初始中心时间（时间戳，默认当前时间） */ initialCenterTime?: number; /** 初始显示范围（毫秒，默认1小时） */ initialTimeRange?: number; /** Initial Zoom Level */ initialZoomLevel?: number | null; /** 缩放模式 */ zoomMode?: ZoomMode; /** 缩放灵敏度 */ zoomSensitivity?: number; /** 预定义缩放级别（毫秒），用于离散缩放 */ discreteZoomLevels?: number[]; /** 启用平滑缩放动画 */ enableSmoothZoom?: boolean; /** 缩放动画持续时间（毫秒） */ zoomAnimationDuration?: number; /** 时区偏移（分钟） */ timezoneOffset?: number; /** 颜色配置 */ colors?: { background?: string; grid?: string; majorTick?: string; minorTick?: string; primaryLabel?: string; secondaryLabel?: string; currentTime?: string; weekend?: string; timeMark?: string; timeMarkLabel?: string; }; /** 尺寸配置 */ sizes?: { majorTickHeight?: number; minorTickHeight?: number; labelOffset?: number; primaryFontSize?: number; secondaryFontSize?: number; timeMarkHeight?: number; timeMarkWidth?: number; }; /** 是否显示当前时间线 */ showCurrentTime?: boolean; /** 是否高亮周末 */ highlightWeekends?: boolean; /** 时间标记列表 */ timeMarks?: TimeMark[]; onDateChange?: (date: Date) => void; } /** 时间工具类 */ class TimeUtils { /** 获取时间的分钟起点 */ static getMinuteStart(timestamp: number): number { const date = new Date(timestamp); date.setSeconds(0, 0); return date.getTime(); } /** 获取时间的小时起点 */ static getHourStart(timestamp: number): number { const date = new Date(timestamp); date.setMinutes(0, 0, 0); return date.getTime(); } /** 获取时间的天起点 */ static getDayStart(timestamp: number): number { const date = new Date(timestamp); date.setHours(0, 0, 0, 0); return date.getTime(); } /** 获取最近的刻度时间 */ static getNearestTick(timestamp: number, interval: number): number { return Math.floor(timestamp / interval) * interval; } /** 判断是否为周末 */ static isWeekend(timestamp: number): boolean { const day = new Date(timestamp).getDay(); return day === 0 || day === 6; } /** 格式化时间 */ static format(date: Date, pattern: string): string { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return pattern .replace('YYYY', String(year)) .replace('MM', month) .replace('DD', day) .replace('HH', hours) .replace('mm', minutes) .replace('ss', seconds); } /** 获取月份名称 */ static getMonthName(month: number, short: boolean = true): string { const months = short ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; return months[month]; } /** 获取星期名称 */ static getWeekdayName(day: number, short: boolean = true): string { const weekdays = short ? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; return weekdays[day]; } } /** 视口管理器 */ class Viewport { /** 视口中心对应的时间戳 */ private centerTime: number; /** 时间范围（毫秒） */ private timeRange: number; /** 视口宽度 */ private width: number; /** 视口高度 */ private height: number; /** 时间范围的最小和最大限制 */ private readonly MIN_RANGE = 1200 * 1000; private readonly MAX_RANGE = 10 * 24 * 60 * 60 * 1000; /** 动画相关状态 */ private animationState: { isAnimating: boolean; startTime: number; duration: number; startTimeRange: number; targetTimeRange: number; startCenterTime: number; targetCenterTime: number; animationId?: number; onComplete?: () => void; } | null = null; constructor(width: number = 800, height: number = 100) { this.centerTime = Date.now(); this.timeRange = 60 * 60 * 1000; // 默认显示1小时 this.width = width; this.height = height; } /** 获取缩放级别（像素/毫秒） */ getZoomLevel(): number { return this.timeRange / this.width; } /** 将时间转换为屏幕坐标 */ timeToScreen(timestamp: number): number { const offset = timestamp - this.centerTime; const ratio = offset / this.timeRange; return this.width / 2 + ratio * this.width; } /** 将屏幕坐标转换为时间 */ screenToTime(x: number, nearest: boolean = false, ticks?: Tick[]): number { const ratio = (x - this.width / 2) / this.width; const time = this.centerTime + ratio * this.timeRange; if (nearest && ticks && ticks.length > 0) { // 找到距离点击位置最近的刻度 let nearestTick: Tick | null = null; let minDistance = Infinity; for (const tick of ticks) { const distance = Math.abs(tick.position - x); if (distance < minDistance) { minDistance = distance; nearestTick = tick; } } // 如果最近的刻度在阈值内（20像素），则返回该刻度的时间戳 if (nearestTick && minDistance < 3) { return nearestTick.timestamp; } } return time; } /** 获取可见时间范围 */ getVisibleRange(): [number, number] { const halfRange = this.timeRange / 2; return [ this.centerTime - halfRange, this.centerTime + halfRange ]; } /** 平移视口 */ pan(deltaX: number): void { const timeDelta = -(deltaX / this.width) * this.timeRange; this.centerTime += timeDelta; } /** 以视口中心缩放 */ zoom(factor: number): void { this.timeRange /= factor; this.timeRange = Math.max(this.MIN_RANGE, Math.min(this.MAX_RANGE, this.timeRange)); } /** 以指定位置为中心缩放 */ zoomAt(factor: number, screenX: number): void { const timeAtMouse = this.screenToTime(screenX); this.zoom(factor); const newTimeAtMouse = this.screenToTime(screenX); const timeCorrection = timeAtMouse - newTimeAtMouse; this.centerTime += timeCorrection; console.log(this.getZoomLevel()) } /** 动画缩放到指定时间范围 */ animateToTimeRange( targetRange: number, duration: number = 300, targetCenterTime?: number, onComplete?: () => void ): void { // 如果已有动画正在进行，取消它 if (this.animationState?.animationId) { cancelAnimationFrame(this.animationState.animationId); } const startTime = Date.now(); const startTimeRange = this.timeRange; const startCenterTime = this.centerTime; // 限制目标范围 targetRange = Math.max(this.MIN_RANGE, Math.min(this.MAX_RANGE, targetRange)); this.animationState = { isAnimating: true, startTime, duration, startTimeRange, targetTimeRange: targetRange, startCenterTime, targetCenterTime: targetCenterTime ?? this.centerTime, onComplete }; const animate = () => { if (!this.animationState) return; const elapsed = Date.now() - this.animationState.startTime; const progress = Math.min(elapsed / this.animationState.duration, 1); // 使用缓动函数 (easeInOutCubic) const easedProgress = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2; // 插值计算当前值 this.timeRange = this.animationState.startTimeRange + (this.animationState.targetTimeRange - this.animationState.startTimeRange) * easedProgress; this.centerTime = this.animationState.startCenterTime + (this.animationState.targetCenterTime - this.animationState.startCenterTime) * easedProgress; if (progress >= 1) { // 动画完成 this.timeRange = this.animationState.targetTimeRange; this.centerTime = this.animationState.targetCenterTime; const onComplete = this.animationState.onComplete; this.animationState = null; if (onComplete) onComplete(); } else { // 继续动画 this.animationState.animationId = requestAnimationFrame(animate); } }; this.animationState.animationId = requestAnimationFrame(animate); } /** 动画缩放到指定位置和时间范围 */ animateZoomAt( targetRange: number, screenX: number, duration: number = 300, onComplete?: () => void ): void { const timeAtMouse = this.screenToTime(screenX); // 计算缩放后的中心时间，保持鼠标位置下的时间不变 const currentRatio = (screenX - this.width / 2) / this.width; const targetCenterTime = timeAtMouse - currentRatio * targetRange; this.animateToTimeRange(targetRange, duration, targetCenterTime, onComplete); } /** 检查是否正在动画中 */ isAnimating(): boolean { return this.animationState?.isAnimating ?? false; } /** 停止当前动画 */ stopAnimation(): void { if (this.animationState?.animationId) { cancelAnimationFrame(this.animationState.animationId); this.animationState = null; } } /** 更新视口尺寸 */ updateSize(width: number, height: number): void { this.width = width; this.height = height; } /** 跳转到指定时间 */ goToTime(timestamp: number): void { this.centerTime = timestamp; } /** 设置显示范围 */ setTimeRange(range: number): void { this.timeRange = Math.max(this.MIN_RANGE, Math.min(this.MAX_RANGE, range)); } // Getters getCenterTime(): number { return this.centerTime; } getTimeRange(): number { return this.timeRange; } getWidth(): number { return this.width; } getHeight(): number { return this.height; } } /** 刻度管理器 */ class ScaleManager { private scaleLevels: ScaleLevel[]; private currentLevel: ScaleLevel | null = null; constructor() { this.scaleLevels = [ { level: TimeFormatLevel.Minute, majorInterval: 60 * 1000, // 1分钟 minorTicks: 4, // 每15秒一个次刻度 minPixelDistance: 80, maxPixelDistance: 200, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:mm'), secondary: this.shouldShowDate(date) ? TimeUtils.format(date, 'MM/DD') : undefined }) }, { level: TimeFormatLevel.FiveMinutes, majorInterval: 6 * 60 * 1000, // 5分钟 minorTicks: 6, // 每分钟一个次刻度 minPixelDistance: 60, maxPixelDistance: 150, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:mm'), secondary: this.shouldShowDate(date) ? TimeUtils.format(date, 'MM/DD') : undefined }) }, { level: TimeFormatLevel.TenMinutes, majorInterval: 12 * 60 * 1000, // 12分钟 minorTicks: 2, // 每6分钟一个次刻度 minPixelDistance: 50, maxPixelDistance: 120, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:mm'), secondary: this.shouldShowDate(date) ? TimeUtils.format(date, 'MM/DD') : undefined }) }, { level: TimeFormatLevel.HalfHour, majorInterval: 30 * 60 * 1000, // 30分钟 minorTicks: 3, // 每10分钟一个次刻度 minPixelDistance: 50, maxPixelDistance: 120, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:mm'), secondary: this.shouldShowDate(date) ? `${TimeUtils.getMonthName(date.getMonth())} ${date.getDate()}` : undefined }) }, { level: TimeFormatLevel.Hour, majorInterval: 60 * 60 * 1000, // 1小时 minorTicks: 2, // 每30分钟一个次刻度 minPixelDistance: 50, maxPixelDistance: 120, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:00'), secondary: date.getHours() === 0 ? `${TimeUtils.getMonthName(date.getMonth())} ${date.getDate()}` : undefined }) }, { level: TimeFormatLevel.ThreeHours, majorInterval: 3 * 60 * 60 * 1000, // 3小时 minorTicks: 3, // 每小时一个次刻度 minPixelDistance: 50, maxPixelDistance: 120, formatter: (date: Date) => ({ primary: TimeUtils.format(date, 'HH:00'), secondary: date.getHours() === 0 ? `${TimeUtils.getWeekdayName(date.getDay())}, ${TimeUtils.getMonthName(date.getMonth())} ${date.getDate()}` : undefined }) }, { level: TimeFormatLevel.SixHours, majorInterval: 6 * 60 * 60 * 1000, // 6小时 minorTicks: 3, // 每2小时一个次刻度 minPixelDistance: 60, maxPixelDistance: 150, formatter: (date: Date) => ({ primary: date.getHours() === 0 ? '00:00' : `${TimeUtils.format(date, 'HH:00')}`, secondary: date.getHours() === 0 ? `${TimeUtils.getWeekdayName(date.getDay())}, ${TimeUtils.getMonthName(date.getMonth())} ${date.getDate()}` : (date.getHours() === 12 ? TimeUtils.format(date, 'MM/DD') : undefined) }) }, { level: TimeFormatLevel.Day, majorInterval: 24 * 60 * 60 * 1000, // 1天 minorTicks: 12, // 每6小时一个次刻度 minPixelDistance: 80, maxPixelDistance: 200, formatter: (date: Date) => ({ primary: `${TimeUtils.getMonthName(date.getMonth())} ${date.getDate()}`, secondary: `${TimeUtils.getWeekdayName(date.getDay())}, ${date.getFullYear()}` }) } ]; } /** 判断是否应该显示日期 */ private shouldShowDate(date: Date): boolean { // 在午夜时显示日期，或者是每天的第一个刻度 return date.getHours() === 0 && date.getMinutes() === 0; } /** 根据缩放级别选择合适的刻度级别 */ selectLevel(viewport: Viewport): ScaleLevel { const zoomLevel = viewport.getZoomLevel(); for (const level of this.scaleLevels) { const pixelDistance = level.majorInterval / zoomLevel; if (pixelDistance >= level.minPixelDistance && pixelDistance <= level.maxPixelDistance) { this.currentLevel = level; return level; } } // 如果没有找到合适的级别，选择最接近的 const pixelDistances = this.scaleLevels.map(level => level.majorInterval / zoomLevel); const targetDistance = 100; // 目标像素距离 const closestIndex = pixelDistances.reduce((bestIdx, dist, idx) => { const bestDist = pixelDistances[bestIdx]; return Math.abs(dist - targetDistance) < Math.abs(bestDist - targetDistance) ? idx : bestIdx; }, 0); this.currentLevel = this.scaleLevels[closestIndex]; return this.currentLevel; } /** 计算可见范围内的刻度 */ calculateTicks(viewport: Viewport): Tick[] { const ticks: Tick[] = []; const [startTime, endTime] = viewport.getVisibleRange(); const level = this.selectLevel(viewport); // 计算第一个主刻度位置 const firstMajor = TimeUtils.getNearestTick(startTime, level.majorInterval); // 生成主刻度 let currentTime = firstMajor; while (currentTime <= endTime + level.majorInterval) { const position = viewport.timeToScreen(currentTime); if (position >= -50 && position <= viewport.getWidth() + 50) { const date = new Date(currentTime); const labels = level.formatter(date); ticks.push({ timestamp: currentTime, position, isMajor: true, primaryLabel: labels.primary, secondaryLabel: labels.secondary }); // 生成次刻度 if (level.minorTicks > 0) { const minorInterval = level.majorInterval / (level.minorTicks + 1); for (let i = 1; i <= level.minorTicks; i++) { const minorTime = currentTime + minorInterval * i; if (minorTime <= endTime) { const minorPosition = viewport.timeToScreen(minorTime); if (minorPosition >= 0 && minorPosition <= viewport.getWidth()) { ticks.push({ timestamp: minorTime, position: minorPosition, isMajor: false }); } } } } } currentTime += level.majorInterval; } return ticks; } /** 获取当前刻度级别 */ getCurrentLevel(): ScaleLevel | null { return this.currentLevel; } } /** 交互处理器 */ class InteractionHandler { private isDragging: boolean = false; private lastMousePos: { x: number; y: number } | null = null; private startMousePos: { x: number; y: number } | null = null; private zoomSensitivity: number; private zoomMode: ZoomMode; private readonly CLICK_THRESHOLD = 10; // 点击阈值，像素 private discreteZoomLevels: number[]; private enableSmoothZoom: boolean; private zoomAnimationDuration: number; // 触摸相关状态 private lastTouchDistance: number | null = null; private lastTouchCenter: { x: number; y: number } | null = null; private isTouchZooming: boolean = false; constructor( zoomMode: ZoomMode = ZoomMode.MousePosition, sensitivity: number = 0.001, discreteZoomLevels: number[] = [], enableSmoothZoom: boolean = true, zoomAnimationDuration: number = 300 ) { this.zoomMode = zoomMode; this.zoomSensitivity = sensitivity; this.discreteZoomLevels = discreteZoomLevels; this.enableSmoothZoom = enableSmoothZoom; this.zoomAnimationDuration = zoomAnimationDuration; } /** 计算人体工学优化的缩放因子 */ calculateZoomFactor(scrollDelta: number): number { const baseFactor = 1.15; if (scrollDelta > 0) { return Math.pow(baseFactor, scrollDelta * this.zoomSensitivity * 100); } else { return 1 / Math.pow(baseFactor, -scrollDelta * this.zoomSensitivity * 100); } } /** 开始拖拽 */ startDrag(x: number, y: number): void { this.isDragging = true; this.lastMousePos = { x, y }; this.startMousePos = { x, y }; } /** 结束拖拽 */ endDrag(): void { this.isDragging = false; } /** 判断是否为点击 */ isClick(): boolean { if (!this.startMousePos || !this.lastMousePos) return false; const deltaX = Math.abs(this.lastMousePos.x - this.startMousePos.x); const deltaY = Math.abs(this.lastMousePos.y - this.startMousePos.y); return deltaX <= this.CLICK_THRESHOLD; } /** 处理鼠标移动 */ handleMouseMove(x: number, y: number, viewport: Viewport): void { if (this.isDragging && this.lastMousePos) { const deltaX = x - this.lastMousePos.x; viewport.pan(deltaX); this.lastMousePos = { x, y }; } } /** 处理滚轮事件 */ handleWheel(deltaY: number, mouseX: number, viewport: Viewport, markX?: number): void { // 如果正在动画中，忽略滚轮事件 if (viewport.isAnimating()) { return; } // 如果启用了离散缩放级别 if (this.discreteZoomLevels.length > 0) { this.handleDiscreteZoom(deltaY, mouseX, viewport, markX); return; } // 原有的连续缩放逻辑 const zoomFactor = this.calculateZoomFactor(-deltaY); if (this.zoomMode === ZoomMode.MarkMode && markX) { viewport.zoomAt(zoomFactor, markX); return; } else if (this.zoomMode === ZoomMode.MarkMode) { viewport.zoomAt(zoomFactor, mouseX); return; } if (this.zoomMode === ZoomMode.MousePosition) { viewport.zoomAt(zoomFactor, mouseX); } else { viewport.zoom(zoomFactor); } } /** 处理离散缩放 */ private handleDiscreteZoom(deltaY: number, mouseX: number, viewport: Viewport, markX?: number): void { const currentLevel = viewport.getZoomLevel(); // 找到当前最接近的缩放级别 let currentLevelIndex = 0; let minDiff = Math.abs(this.discreteZoomLevels[0] - currentLevel); for (let i = 1; i < this.discreteZoomLevels.length; i++) { const diff = Math.abs(this.discreteZoomLevels[i] - currentLevel); if (diff < minDiff) { minDiff = diff; currentLevelIndex = i; } } // 根据滚轮方向确定目标级别 let targetLevelIndex: number; if (deltaY < 0) { // 向上滚动，缩小（增加时间范围） targetLevelIndex = Math.min(currentLevelIndex + 1, this.discreteZoomLevels.length - 1); } else { // 向下滚动，放大（减少时间范围） targetLevelIndex = Math.max(currentLevelIndex - 1, 0); } // 如果级别没有变化，不执行动画 if (targetLevelIndex === currentLevelIndex) { return; } const targetRange = viewport.getWidth() * this.discreteZoomLevels[targetLevelIndex]; const zoomX = (this.zoomMode === ZoomMode.MarkMode && markX) ? markX : mouseX; if (this.enableSmoothZoom) { // 使用平滑动画 if (this.zoomMode === ZoomMode.MousePosition || this.zoomMode === ZoomMode.MarkMode) { viewport.animateZoomAt(targetRange, zoomX, this.zoomAnimationDuration); } else { viewport.animateToTimeRange(targetRange, this.zoomAnimationDuration); } } else { // 立即跳转 if (this.zoomMode === ZoomMode.MousePosition || this.zoomMode === ZoomMode.MarkMode) { const timeAtMouse = viewport.screenToTime(zoomX); viewport.setTimeRange(targetRange); const newTimeAtMouse = viewport.screenToTime(zoomX); const timeCorrection = timeAtMouse - newTimeAtMouse; viewport.goToTime(viewport.getCenterTime() + timeCorrection); } else { viewport.setTimeRange(targetRange); } } } /** 处理触摸开始事件（支持双指缩放） */ handleTouchStart(touches: TouchList): void { if (touches.length === 2) { // 双指触摸，准备缩放 this.isTouchZooming = true; this.isDragging = false; const touch1 = touches[0]; const touch2 = touches[1]; this.lastTouchDistance = Math.sqrt( Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2) ); this.lastTouchCenter = { x: (touch1.clientX + touch2.clientX) / 2, y: (touch1.clientY + touch2.clientY) / 2 }; } else if (touches.length === 1 && !this.isTouchZooming) { // 单指触摸，准备拖拽 const touch = touches[0]; this.startDrag(touch.clientX, touch.clientY); } } /** 处理触摸移动事件 */ handleTouchMove(touches: TouchList, viewport: Viewport, canvas: HTMLCanvasElement): void { if (touches.length === 2 && this.isTouchZooming) { // 双指缩放 const touch1 = touches[0]; const touch2 = touches[1]; const currentDistance = Math.sqrt( Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2) ); const currentCenter = { x: (touch1.clientX + touch2.clientX) / 2, y: (touch1.clientY + touch2.clientY) / 2 }; if (this.lastTouchDistance && this.lastTouchCenter) { const scaleChange = currentDistance / this.lastTouchDistance; // 转换为画布坐标 const canvasRect = canvas.getBoundingClientRect(); const canvasX = currentCenter.x - canvasRect.left; if (this.discreteZoomLevels.length > 0) { // 对于离散缩放，当缩放变化超过阈值时触发 const threshold = 1.1; // 10% 的变化阈值 if (scaleChange > threshold) { this.handleDiscreteZoom(-100, canvasX, viewport); // 放大 this.lastTouchDistance = currentDistance; // 重置基准距离 } else if (scaleChange < 1 / threshold) { this.handleDiscreteZoom(100, canvasX, viewport); // 缩小 this.lastTouchDistance = currentDistance; // 重置基准距离 } } else { // 连续缩放 viewport.zoomAt(scaleChange, canvasX); this.lastTouchDistance = currentDistance; } } this.lastTouchCenter = currentCenter; } else if (touches.length === 1 && !this.isTouchZooming) { // 单指拖拽 - 转换为画布坐标 const touch = touches[0]; const canvasRect = canvas.getBoundingClientRect(); const canvasX = touch.clientX - canvasRect.left; const canvasY = touch.clientY - canvasRect.top; this.handleMouseMove(canvasX, canvasY, viewport); } } /** 处理触摸结束事件 */ handleTouchEnd(): void { this.isTouchZooming = false; this.lastTouchDistance = null; this.lastTouchCenter = null; this.endDrag(); } // Getters & Setters getZoomMode(): ZoomMode { return this.zoomMode; } setZoomMode(mode: ZoomMode): void { this.zoomMode = mode; } setZoomSensitivity(sensitivity: number): void { this.zoomSensitivity = Math.max(0.0001, Math.min(0.01, sensitivity)); } getIsDragging(): boolean { return this.isDragging; } } /** 实时时间轴主类 */ class RealTimeTimeline { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private viewport: Viewport; private scaleManager: ScaleManager; private interaction: InteractionHandler; private config: Required; private animationFrameId: number | null = null; private currentTimeUpdateInterval: number | null = null; private mousePosition: { x: number; y: number } | null = null; private showMouseIndicator: boolean = false; private pendingRender: boolean = false; constructor(canvas: HTMLCanvasElement, config?: TimelineConfig) { this.canvas = canvas; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Failed to get 2D context'); } this.ctx = ctx; // 应用配置 this.config = this.mergeConfig(config); // 初始化组件 this.viewport = new Viewport(canvas.width, canvas.height); this.viewport.goToTime(this.config.initialCenterTime); if (this.config.initialTimeRange && !this.config.initialZoomLevel) { this.viewport.setTimeRange(this.config.initialTimeRange); } if (this.config.initialZoomLevel && !this.config.initialTimeRange) { this.viewport.setTimeRange(this.viewport.getWidth() * this.config.initialZoomLevel); } this.scaleManager = new ScaleManager(); this.interaction = new InteractionHandler( this.config.zoomMode, this.config.zoomSensitivity, this.config.discreteZoomLevels, this.config.enableSmoothZoom, this.config.zoomAnimationDuration ); // 设置画布事件监听 this.setupEventListeners(); // 开始渲染 this.render(); // 如果显示当前时间线，定期更新 if (this.config.showCurrentTime) { this.startCurrentTimeUpdate(); } } /** 合并配置 */ private mergeConfig(config?: TimelineConfig): Required { // 默认离散缩放级别：从1分钟到10天 const defaultDiscreteZoomLevels = [ 1 * 60 * 1000, // 1分钟 2 * 60 * 1000, // 2分钟 5 * 60 * 1000, // 5分钟 10 * 60 * 1000, // 10分钟 20 * 60 * 1000, // 20分钟 30 * 60 * 1000, // 30分钟 60 * 60 * 1000, // 1小时 2 * 60 * 60 * 1000, // 2小时 6 * 60 * 60 * 1000, // 6小时 12 * 60 * 60 * 1000, // 12小时 24 * 60 * 60 * 1000, // 1天 2 * 24 * 60 * 60 * 1000, // 2天 7 * 24 * 60 * 60 * 1000, // 1周 14 * 24 * 60 * 60 * 1000, // 2周 30 * 24 * 60 * 60 * 1000 // 1个月 ]; const defaultConfig: Required = { initialCenterTime: Date.now(), initialTimeRange: 60 * 60 * 1000, // 1小时 initialZoomLevel: null, zoomMode: ZoomMode.MousePosition, zoomSensitivity: 0.001, discreteZoomLevels: defaultDiscreteZoomLevels, enableSmoothZoom: true, zoomAnimationDuration: 300, timezoneOffset: new Date().getTimezoneOffset(), colors: { background: '#1a1a1a', grid: '#2a2a2a', majorTick: '#d0d0d0', minorTick: '#606060', primaryLabel: '#e0e0e0', secondaryLabel: '#a0a0a0', currentTime: '#ff4444', weekend: 'rgba(100, 100, 255, 0.05)', timeMark: '#ff6b6b', timeMarkLabel: '#ffffff' }, sizes: { majorTickHeight: 12, minorTickHeight: 6, labelOffset: 8, primaryFontSize: 13, secondaryFontSize: 11, timeMarkHeight: 16, timeMarkWidth: 1 }, showCurrentTime: true, highlightWeekends: true, timeMarks: [], onDateChange: () => { } }; if (!config) return defaultConfig; return { initialCenterTime: config.initialCenterTime ?? defaultConfig.initialCenterTime, initialTimeRange: config.initialTimeRange ?? defaultConfig.initialTimeRange, initialZoomLevel: config.initialZoomLevel ?? defaultConfig.initialZoomLevel, zoomMode: config.zoomMode ?? defaultConfig.zoomMode, zoomSensitivity: config.zoomSensitivity ?? defaultConfig.zoomSensitivity, discreteZoomLevels: config.discreteZoomLevels ?? defaultConfig.discreteZoomLevels, enableSmoothZoom: config.enableSmoothZoom ?? defaultConfig.enableSmoothZoom, zoomAnimationDuration: config.zoomAnimationDuration ?? defaultConfig.zoomAnimationDuration, timezoneOffset: config.timezoneOffset ?? defaultConfig.timezoneOffset, colors: { ...defaultConfig.colors, ...config.colors }, sizes: { ...defaultConfig.sizes, ...config.sizes }, showCurrentTime: config.showCurrentTime ?? defaultConfig.showCurrentTime, highlightWeekends: config.highlightWeekends ?? defaultConfig.highlightWeekends, timeMarks: config.timeMarks ?? defaultConfig.timeMarks, onDateChange: config.onDateChange ?? defaultConfig.onDateChange }; } /** 设置事件监听器 */ private setupEventListeners(): void { // 获取统一的坐标处理函数 const getEventCoordinates = (e: MouseEvent | TouchEvent): { x: number; y: number } => { const rect = this.canvas.getBoundingClientRect(); if ('touches' in e && e.touches.length > 0) { // 触摸事件 return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top }; } else if ('changedTouches' in e && e.changedTouches.length > 0) { // 触摸结束事件 return { x: e.changedTouches[0].clientX - rect.left, y: e.changedTouches[0].clientY - rect.top }; } else { // 鼠标事件 const mouseEvent = e as MouseEvent; return { x: mouseEvent.clientX - rect.left, y: mouseEvent.clientY - rect.top }; } }; // 统一的开始拖拽处理（鼠标） const handleMouseStart = (e: MouseEvent) => { e.preventDefault(); const { x, y } = getEventCoordinates(e); this.interaction.startDrag(x, y); this.canvas.style.cursor = 'grabbing'; }; // 统一的移动处理（鼠标） const handleMouseMove = (e: MouseEvent) => { const { x, y } = getEventCoordinates(e); // 更新鼠标位置并显示指示线 this.mousePosition = { x, y }; this.showMouseIndicator = true; // 处理拖拽逻辑 this.interaction.handleMouseMove(x, y, this.viewport); // 使用节流渲染以优化性能 this.requestRender(); }; // 统一的结束拖拽处理（鼠标） const handleMouseEnd = (e: MouseEvent) => { const { x, y } = getEventCoordinates(e); // 检查是否为点击（而非拖拽） if (this.interaction.isClick()) { // 获取当前刻度信息用于吸附 const ticks = this.scaleManager.calculateTicks(this.viewport); const date = this.viewport.screenToTime(x, true, ticks); this.changeTime(new Date(date)); } this.interaction.endDrag(); this.canvas.style.cursor = 'crosshair'; }; // 触摸事件处理 const handleTouchStart = (e: TouchEvent) => { e.preventDefault(); this.interaction.handleTouchStart(e.touches); this.canvas.style.cursor = 'grabbing'; }; const handleTouchMove = (e: TouchEvent) => { e.preventDefault(); // 对于单指触摸，更新显示位置 if (e.touches.length === 1 && !this.interaction.getIsDragging()) { const { x, y } = getEventCoordinates(e); this.mousePosition = { x, y }; this.showMouseIndicator = true; } this.interaction.handleTouchMove(e.touches, this.viewport, this.canvas); this.requestRender(); }; const handleTouchEnd = (e: TouchEvent) => { // 检查是否为点击（单指轻触） if (e.changedTouches.length === 1 && this.interaction.isClick()) { const { x } = getEventCoordinates(e); const ticks = this.scaleManager.calculateTicks(this.viewport); const date = this.viewport.screenToTime(x, true, ticks); this.changeTime(new Date(date)); } this.interaction.handleTouchEnd(); this.canvas.style.cursor = 'crosshair'; }; // 鼠标事件 this.canvas.addEventListener('mousedown', (e) => { if (e.button === 0) { handleMouseStart(e); } else if (e.button === 2) { e.preventDefault(); } }); this.canvas.addEventListener('mousemove', handleMouseMove); this.canvas.addEventListener('mouseup', (e) => { if (e.button === 0) { handleMouseEnd(e); } else if (e.button === 2) { e.preventDefault(); } }); // 触摸事件 this.canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); this.canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); this.canvas.addEventListener('touchend', handleTouchEnd, { passive: false }); this.canvas.addEventListener('touchcancel', () => { this.interaction.handleTouchEnd(); this.canvas.style.cursor = 'crosshair'; this.showMouseIndicator = false; this.requestRender(); }); // 鼠标离开画布 this.canvas.addEventListener('mouseleave', () => { this.interaction.endDrag(); this.canvas.style.cursor = 'crosshair'; this.showMouseIndicator = false; this.requestRender(); }); // 滚轮事件 this.canvas.addEventListener('wheel', (e) => { e.preventDefault(); const rect = this.canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const markTimestamp = this.config.timeMarks?.find(mark => mark.type === 'custom')?.timestamp; if (markTimestamp) { const markX = this.viewport.timeToScreen(markTimestamp); if (markX >= 0 && markX <= this.viewport.getWidth()) { this.interaction.handleWheel(e.deltaY, mouseX, this.viewport, markX); this.render(); return } } this.interaction.handleWheel(e.deltaY, mouseX, this.viewport); this.render(); }); // 处理画布大小变化 const resizeObserver = new ResizeObserver(() => { this.handleResize(); }); resizeObserver.observe(this.canvas); // 设置初始光标 this.canvas.style.cursor = 'crosshair'; } /** 处理画布大小变化 */ private handleResize(): void { const rect = this.canvas.getBoundingClientRect(); this.canvas.width = rect.width * window.devicePixelRatio; this.canvas.height = rect.height * window.devicePixelRatio; this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio); this.viewport.updateSize(rect.width, rect.height); this.render(); } /** 开始当前时间更新 */ private startCurrentTimeUpdate(): void { this.currentTimeUpdateInterval = window.setInterval(() => { this.render(); }, 1000); // 每秒更新一次 } /** 请求渲染（使用 requestAnimationFrame 节流） */ private requestRender(): void { if (!this.pendingRender) { this.pendingRender = true; requestAnimationFrame(() => { this.render(); this.pendingRender = false; }); } } /** 渲染时间轴 */ render(): void { const width = this.viewport.getWidth(); const height = this.viewport.getHeight(); // 如果正在动画中，继续请求下一帧 if (this.viewport.isAnimating()) { requestAnimationFrame(() => this.render()); } // 清空画布 if (this.config.colors.background === 'transparent') { // 对于透明背景，使用 clearRect 来清空画布 this.ctx.clearRect(0, 0, width, height); } else { // 对于有颜色的背景，使用 fillRect 来填充 this.ctx.fillStyle = this.config.colors.background ?? '#1a1a1a'; this.ctx.fillRect(0, 0, width, height); } // 高亮周末（如果启用） if (this.config.highlightWeekends) { this.drawWeekends(); } // 计算并绘制刻度 const ticks = this.scaleManager.calculateTicks(this.viewport); this.drawTicks(ticks); // 绘制当前时间线（如果启用） if (this.config.showCurrentTime) { this.drawCurrentTime(); } // 绘制时间标记 this.drawTimeMarks(); // 绘制鼠标位置指示线 this.drawMouseIndicator(); } private changeTime(date: Date): void { this.interaction.setZoomMode(ZoomMode.MarkMode); this.replaceTimeMark({ timestamp: date.getTime(), color: '#ff6b6b', label: format(date, 'HH:mm:ss'), type: 'custom' }); this.config.onDateChange?.(date) } /** 绘制周末高亮 */ private drawWeekends(): void { const [startTime, endTime] = this.viewport.getVisibleRange(); const height = this.viewport.getHeight(); // 找到第一个周六或周日 let currentTime = TimeUtils.getDayStart(startTime); while (currentTime <= endTime) { const date = new Date(currentTime); if (TimeUtils.isWeekend(currentTime)) { const dayStart = currentTime; const dayEnd = dayStart + 24 * 60 * 60 * 1000; const x1 = this.viewport.timeToScreen(dayStart); const x2 = this.viewport.timeToScreen(dayEnd); if (x2 > 0 && x1 < this.viewport.getWidth()) { this.ctx.fillStyle = this.config.colors.weekend ?? 'rgba(100, 100, 255, 0.05)'; this.ctx.fillRect( Math.max(0, x1), 0, Math.min(x2, this.viewport.getWidth()) - Math.max(0, x1), height ); } } currentTime += 24 * 60 * 60 * 1000; // 下一天 } } /** 绘制刻度 */ private drawTicks(ticks: Tick[]): void { const height = this.viewport.getHeight(); // 先绘制网格线 ticks.filter(t => t.isMajor).forEach(tick => { this.ctx.strokeStyle = this.config.colors.grid ?? '#2a2a2a'; this.ctx.lineWidth = 0.5; this.ctx.beginPath(); this.ctx.moveTo(tick.position, 0); this.ctx.lineTo(tick.position, height); this.ctx.stroke(); }); // 绘制刻度线和标签 ticks.forEach(tick => { const x = tick.position; // 绘制刻度线 const tickHeight = tick.isMajor ? (this.config.sizes.majorTickHeight ?? 12) : (this.config.sizes.minorTickHeight ?? 6); this.ctx.strokeStyle = tick.isMajor ? (this.config.colors.majorTick ?? '#d0d0d0') : (this.config.colors.minorTick ?? '#606060'); this.ctx.lineWidth = tick.isMajor ? 1.5 : 1; this.ctx.beginPath(); this.ctx.moveTo(x, height - tickHeight); this.ctx.lineTo(x, height); this.ctx.stroke(); // 绘制标签（仅主刻度） if (tick.primaryLabel) { // 主标签 this.ctx.fillStyle = this.config.colors.primaryLabel ?? '#e0e0e0'; this.ctx.font = `${this.config.sizes.primaryFontSize ?? 13}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'bottom'; this.ctx.fillText( tick.primaryLabel, x, height - tickHeight - (this.config.sizes.labelOffset ?? 8) ); // 次标签（如日期） if (tick.secondaryLabel) { this.ctx.fillStyle = this.config.colors.secondaryLabel ?? '#a0a0a0'; this.ctx.font = `${this.config.sizes.secondaryFontSize ?? 11}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`; this.ctx.fillText( tick.secondaryLabel, x, height - tickHeight - (this.config.sizes.labelOffset ?? 8) - 12 ); } } }); } /** 绘制当前时间线 */ private drawCurrentTime(): void { const now = Date.now(); const x = this.viewport.timeToScreen(now); if (x >= 0 && x <= this.viewport.getWidth()) { const height = this.viewport.getHeight(); const currentTimeColor = this.config.colors.currentTime ?? '#ff4444'; this.ctx.save(); // 绘制毛玻璃背景条带 const backgroundWidth = 14; const gradient = this.ctx.createLinearGradient(x - backgroundWidth / 2, 0, x + backgroundWidth / 2, 0); // 使用当前时间颜色的红色调 gradient.addColorStop(0, `rgba(255, 68, 68, 0.02)`); gradient.addColorStop(0.5, `rgba(255, 68, 68, 0.18)`); gradient.addColorStop(1, `rgba(255, 68, 68, 0.02)`); this.ctx.fillStyle = gradient; this.ctx.fillRect(x - backgroundWidth / 2, 0, backgroundWidth, height); // 绘制外层辉光效果 this.ctx.shadowColor = `rgba(255, 68, 68, 0.7)`; this.ctx.shadowBlur = 10; this.ctx.shadowOffsetX = 0; this.ctx.shadowOffsetY = 0; // 绘制主指示线（实线） this.ctx.strokeStyle = `rgba(255, 68, 68, 0.95)`; this.ctx.lineWidth = 2.5; this.ctx.beginPath(); this.ctx.moveTo(x, 0); this.ctx.lineTo(x, height); this.ctx.stroke(); // 重置阴影，绘制内层亮线增强辉光效果 this.ctx.shadowBlur = 0; this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'; this.ctx.lineWidth = 1; this.ctx.beginPath(); this.ctx.moveTo(x, 0); this.ctx.lineTo(x, height); this.ctx.stroke(); this.ctx.restore(); // 绘制时间标签（可选，目前被注释掉） const timeStr = TimeUtils.format(new Date(now), 'HH:mm:ss'); this.ctx.font = `bold ${this.config.sizes.primaryFontSize ?? 13}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`; const metrics = this.ctx.measureText(timeStr); const labelWidth = metrics.width + 10; const labelHeight = 20; // this.ctx.fillStyle = currentTimeColor; // this.ctx.fillRect(x - labelWidth / 2, 0, labelWidth, labelHeight); // this.ctx.fillStyle = '#ffffff'; // this.ctx.textAlign = 'center'; // this.ctx.textBaseline = 'middle'; // this.ctx.fillText(timeStr, x, labelHeight / 2); } } /** 绘制时间标记 */ private drawTimeMarks(): void { if (!this.config.timeMarks || this.config.timeMarks.length === 0) { return; } const height = this.viewport.getHeight(); const markHeight = this.config.sizes.timeMarkHeight ?? 16; const markWidth = this.config.sizes.timeMarkWidth ?? 4; this.config.timeMarks.forEach(mark => { const x = this.viewport.timeToScreen(mark.timestamp); // 只绘制可见范围内的标记 if (x >= -markWidth && x <= this.viewport.getWidth() + markWidth) { // 绘制标记线 this.ctx.strokeStyle = mark.color || (this.config.colors.timeMark ?? '#ff6b6b'); this.ctx.lineWidth = markWidth; this.ctx.beginPath(); this.ctx.moveTo(x, 0); this.ctx.lineTo(x, height); this.ctx.stroke(); // 绘制标记标签（如果有） if (mark.label) { const labelHeight = 16; const labelWidth = 50; const labelY = Math.max(5, height - labelHeight - 5); // 绘制标签背景 this.ctx.fillStyle = mark.color || (this.config.colors.timeMark ?? '#ff6b6b'); // this.ctx.fillRect(x - 25, labelY, 50, labelHeight); this.ctx.fillRect(x - labelWidth / 2, 0, labelWidth, labelHeight) // 绘制标签文本 this.ctx.fillStyle = this.config.colors.timeMarkLabel ?? '#ffffff'; this.ctx.font = `${this.config.sizes.secondaryFontSize ?? 11}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'middle'; // this.ctx.fillText(mark.label, x, labelY + labelHeight / 2); this.ctx.fillText(mark.label, x, labelHeight / 2); } } }); } /** 绘制鼠标位置指示线 */ private drawMouseIndicator(): void { if (!this.showMouseIndicator || !this.mousePosition) { return; } const height = this.viewport.getHeight(); const x = this.mousePosition.x; // 确保指示线在画布范围内 if (x >= 0 && x <= this.viewport.getWidth()) { this.ctx.save(); // 绘制毛玻璃背景条带 const backgroundWidth = 12; const gradient = this.ctx.createLinearGradient(x - backgroundWidth / 2, 0, x + backgroundWidth / 2, 0); gradient.addColorStop(0, 'rgba(135, 206, 235, 0.02)'); gradient.addColorStop(0.5, 'rgba(135, 206, 235, 0.15)'); gradient.addColorStop(1, 'rgba(135, 206, 235, 0.02)'); this.ctx.fillStyle = gradient; this.ctx.fillRect(x - backgroundWidth / 2, 0, backgroundWidth, height); // 绘制外层辉光效果 this.ctx.shadowColor = 'rgba(135, 206, 235, 0.6)'; this.ctx.shadowBlur = 8; this.ctx.shadowOffsetX = 0; this.ctx.shadowOffsetY = 0; // 绘制主指示线（实线） this.ctx.strokeStyle = 'rgba(135, 206, 235, 0.9)'; this.ctx.lineWidth = 2; this.ctx.beginPath(); this.ctx.moveTo(x, 0); this.ctx.lineTo(x, height); this.ctx.stroke(); // 重置阴影，绘制内层亮线增强辉光效果 this.ctx.shadowBlur = 0; this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)'; this.ctx.lineWidth = 1; this.ctx.beginPath(); this.ctx.moveTo(x, 0); this.ctx.lineTo(x, height); this.ctx.stroke(); this.ctx.restore(); } } currentLevel(): number { return this.viewport.getZoomLevel() } /** 获取当前视口信息 */ getViewportInfo(): { centerTime: number; timeRange: number; visibleRange: [number, number]; currentLevel: TimeFormatLevel | null; } { const currentLevel = this.scaleManager.getCurrentLevel(); return { centerTime: this.viewport.getCenterTime(), timeRange: this.viewport.getTimeRange(), visibleRange: this.viewport.getVisibleRange(), currentLevel: currentLevel?.level || null }; } /** 跳转到指定时间 */ goToTime(timestamp: number): void { this.viewport.goToTime(timestamp); this.render(); } /** 跳转到当前时间 */ goToNow(): void { this.goToTime(Date.now()); } /** 设置时间范围 */ setTimeRange(range: number): void { this.viewport.setTimeRange(range); this.render(); } /** 设置缩放模式 */ setZoomMode(mode: ZoomMode): void { this.interaction.setZoomMode(mode); } /** 添加时间标记 */ addTimeMark(mark: TimeMark): void { this.config.timeMarks.push(mark); this.render(); } replaceTimeMark(mark: TimeMark): void { this.config.timeMarks.splice(0); this.config.timeMarks.push(mark); this.render(); } replaceTimeMarkByTimestamp(timestamp: number): void { this.replaceTimeMark({ timestamp: timestamp, color: '#ff6b6b', label: format(timestamp, 'HH:mm:ss'), type: 'custom' }); this.interaction.setZoomMode(ZoomMode.MarkMode) } forwardTimeMark(delta: number, timestamp?: number): void { if (!timestamp) { timestamp = this.config.timeMarks[0].timestamp; } const index = this.config.timeMarks.findIndex(mark => mark.timestamp === timestamp); if (index !== -1) { this.changeTime(new Date(timestamp + delta)) this.render(); } } backwardTimeMark(delta: number, timestamp?: number): void { if (!timestamp) { timestamp = this.config.timeMarks[0].timestamp; } const index = this.config.timeMarks.findIndex(mark => mark.timestamp === timestamp); if (index !== -1) { this.changeTime(new Date(timestamp - delta)) this.render(); } } /** 确保 Mark 处于当前视野内 */ ensureMarkInView(timestamp?: number): void { if (!timestamp) { const mark = this.config.timeMarks.find(mark => mark.type === 'custom'); if (!mark) return; timestamp = mark.timestamp; } const [startTime, endTime] = this.viewport.getVisibleRange(); const markX = this.viewport.timeToScreen(timestamp); // 如果 Mark 不在视野内，调整视口 if (markX < 0 || markX > this.viewport.getWidth()) { // 计算 Mark 应该位于视口左侧 1/3 位置（符合人体工学） const leftOffset = this.viewport.getWidth() / 3; const timeOffset = (leftOffset / this.viewport.getWidth()) * this.viewport.getTimeRange(); const targetCenterTime = timestamp + timeOffset; this.viewport.goToTime(targetCenterTime); this.render(); } } /** 播放翻页后确保 Mark 在视野内 */ playAndEnsureMarkInView(delta: number, timestamp?: number): void { // 先执行时间标记的前进 this.forwardTimeMark(delta, timestamp); // 然后确保 Mark 在视野内 this.ensureMarkInView(); } /** 后退翻页后确保 Mark 在视野内 */ playBackwardAndEnsureMarkInView(delta: number, timestamp?: number): void { // 先执行时间标记的后退 this.backwardTimeMark(delta, timestamp); // 然后确保 Mark 在视野内 this.ensureMarkInView(); } /** 移除时间标记 */ removeTimeMark(timestamp: number): void { const index = this.config.timeMarks.findIndex(mark => mark.timestamp === timestamp); if (index !== -1) { this.config.timeMarks.splice(index, 1); this.render(); } } /** 清除所有时间标记 */ clearTimeMarks(): void { this.config.timeMarks = []; this.render(); } /** 获取所有时间标记 */ getTimeMarks(): TimeMark[] { return [...this.config.timeMarks]; } /** 快速设置显示范围的辅助方法 */ showLastMinutes(minutes: number): void { this.setTimeRange(minutes * 60 * 1000); this.goToNow(); } showLastHours(hours: number): void { this.setTimeRange(hours * 60 * 60 * 1000); this.goToNow(); } showLastDays(days: number): void { this.setTimeRange(days * 24 * 60 * 60 * 1000); this.goToNow(); } showToday(): void { const now = new Date(); const dayStart = TimeUtils.getDayStart(now.getTime()); const dayEnd = dayStart + 24 * 60 * 60 * 1000; this.viewport.goToTime((dayStart + dayEnd) / 2); this.setTimeRange(24 * 60 * 60 * 1000); } showThisWeek(): void { const now = new Date(); const day = now.getDay(); const weekStart = TimeUtils.getDayStart(now.getTime() - day * 24 * 60 * 60 * 1000); const weekEnd = weekStart + 7 * 24 * 60 * 60 * 1000; this.viewport.goToTime((weekStart + weekEnd) / 2); this.setTimeRange(7 * 24 * 60 * 60 * 1000); } showThisMonth(): void { const now = new Date(); const monthStart = new Date(now.getFullYear(), now.getMonth(), 1).getTime(); const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0).getTime(); this.viewport.goToTime((monthStart + monthEnd) / 2); this.setTimeRange(monthEnd - monthStart); } /** 导出当前视图为图片 */ exportAsImage(filename: string = 'timeline.png'): void { this.canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } }); } /** 销毁时间轴 */ destroy(): void { if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); } if (this.currentTimeUpdateInterval) { clearInterval(this.currentTimeUpdateInterval); } // 停止任何正在进行的动画 this.viewport.stopAnimation(); } } // 导出 export { RealTimeTimeline as Timeline, ZoomMode, TimeFormatLevel, TimeUtils }; export type { TimelineConfig, Tick, ScaleLevel, TimeMark };