JayJiaJun/Xazn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

显卡完善

Browse Source
This commit is contained in:
1 2025-07-25 19:55:12 +08:00
parent 2355147ed5
commit 7236a95236
1 changed files with 352 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/iot/device/display.vue
View File

@ -2483,6 +2483,7 @@ export default {
this.addProgramForm.zones.forEach((zone, zIdx) => { this.addProgramForm.zones.forEach((zone, zIdx) => {
const asset = this.addProgramPreviewAssets[zIdx]; const asset = this.addProgramPreviewAssets[zIdx];
if (!asset) return; if (!asset) return;
const state = this.addProgramPreviewAnimState[zIdx] || {};
// 计算分区在画布中的位置（角度为90或270时，x/y/width/height互换） // 计算分区在画布中的位置（角度为90或270时，x/y/width/height互换）
let zoneX, zoneY, zoneWidth, zoneHeight; let zoneX, zoneY, zoneWidth, zoneHeight;
@ -2512,12 +2513,9 @@ export default {
ctx.rect(zoneX, zoneY, zoneWidth, zoneHeight); ctx.rect(zoneX, zoneY, zoneWidth, zoneHeight);
ctx.clip(); ctx.clip();
// 获取动画状态
const state = this.addProgramPreviewAnimState[zIdx];
if (zone.playType === 0 && asset.isText) { if (zone.playType === 0 && asset.isText) {
// 文本类型分区 // 获取当前页（使用状态中的当前页）
const page = state && typeof state.currentPage === 'number' ? state.currentPage : 0; const page = state.currentPage || 0;
const pageLines = asset.pages[page] || []; const pageLines = asset.pages[page] || [];
// 设置字体样式 // 设置字体样式
@ -2589,7 +2587,7 @@ export default {
ctx.fillText(line, x1, y); ctx.fillText(line, x1, y);
ctx.fillText(line, x2, y); ctx.fillText(line, x2, y);
} else { } else {
ctx.fillText(line, startX + (state ? state.currentX : 0), startY + lineIdx * lineHeight + (state ? state.currentY : 0)); ctx.fillText(line, startX + animOffsetX, startY + lineIdx * lineHeight + animOffsetY);
} }
}); });
} else if (zone.playType === 1 && asset.isImage) { } else if (zone.playType === 1 && asset.isImage) {
@ -2864,13 +2862,16 @@ export default {
return { lines, maxLines }; return { lines, maxLines };
}, },
resetAddProgramPreviewAnimState() { resetAddProgramPreviewAnimState() {
// 初始化每个分区动画状态
this.addProgramPreviewAnimState = this.addProgramForm.zones.map((zone, idx) => { this.addProgramPreviewAnimState = this.addProgramForm.zones.map((zone, idx) => {
return { return {
currentX: 0, currentX: 0,
currentY: 0, currentY: 0,
currentPage: this.addProgramPreviewPage[idx] || 0, currentPage: 0,
pageTimer: null, isMoving: false,
isPausing: false,
moveStart: 0,
pauseStart: 0,
currentChar: 0, // 当前显示的字符索引
effect: zone.effect, effect: zone.effect,
}; };
}); });
@ -2910,8 +2911,7 @@ export default {
if (!asset || !state || !asset.isText) return; if (!asset || !state || !asset.isText) return;
const effect = zone.effect; const effect = zone.effect;
const page = this.addProgramPreviewPage[idx] || 0; const pageLines = asset.pages[state.currentPage] || [];
const pageLines = asset.pages[page] || [];
const lineHeight = asset.lineHeight; const lineHeight = asset.lineHeight;
const totalHeight = asset.totalHeight; const totalHeight = asset.totalHeight;
const totalWidth = asset.totalWidth; const totalWidth = asset.totalWidth;
@ -2928,70 +2928,186 @@ export default {
const pauseMs = this.getPauseTime(zone.stayTime); const pauseMs = this.getPauseTime(zone.stayTime);
// 确保初始状态值存在 // 确保初始状态值存在
if (typeof state.isMoving !== 'boolean') state.isMoving = false;
if (typeof state.isPausing !== 'boolean') state.isPausing = false; if (typeof state.isPausing !== 'boolean') state.isPausing = false;
if (typeof state.pauseStart !== 'number') state.pauseStart = 0; if (typeof state.pauseStart !== 'number') state.pauseStart = 0;
if (typeof state.pausePhase !== 'string') state.pausePhase = 'start'; // 'start' | 'move' if (typeof state.moveStart !== 'number') state.moveStart = 0;
switch (effect) { switch (effect) {
case 0: // 立即显示
if (!state.isPausing && !state.isMoving) {
// 初始状态：直接进入停留阶段
state.isPausing = true;
state.pauseStart = Date.now();
} else if (state.isPausing) {
// 检查停留时间是否结束
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.isMoving = true; // 准备翻页
}
} else if (state.isMoving) {
// 翻页操作
state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
}
// 位置保持不变
state.currentX = 0;
state.currentY = 0;
break;
case 1: // 左移 case 1: // 左移
if (typeof state.currentX !== 'number') state.currentX = zoneWidth; if (!state.isMoving && !state.isPausing) {
state.currentX -= animSpeed; // 初始状态：设置初始位置（右侧外部）
if (state.currentX < -totalWidth) {
if (asset.pages.length > 1) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
}
state.currentX = zoneWidth; state.currentX = zoneWidth;
state.isMoving = true;
state.moveStart = Date.now();
} else if (state.isMoving) {
// 移动阶段
const elapsed = Date.now() - state.moveStart;
const progress = Math.min(1, elapsed / (totalWidth * 1000 / animSpeed));
// 计算移动位置（从右侧移动到左侧）
state.currentX = zoneWidth - progress * (zoneWidth + totalWidth);
// 检查是否到达目标位置
if (progress >= 1) {
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
}
} else if (state.isPausing) {
// 停留阶段
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.isMoving = true; // 准备翻页
}
} else if (!state.isPausing && state.isMoving) {
// 翻页操作
state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.currentX = zoneWidth; // 重置位置
state.isMoving = true;
state.moveStart = Date.now();
} }
state.currentY = 0; state.currentY = 0;
break; break;
case 2: // 右移 case 2: // 右移
if (typeof state.currentX !== 'number') state.currentX = -totalWidth; if (!state.isMoving && !state.isPausing) {
state.currentX += animSpeed;
if (state.currentX > zoneWidth) {
if (asset.pages.length > 1) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
}
state.currentX = -totalWidth; state.currentX = -totalWidth;
state.isMoving = true;
state.moveStart = Date.now();
} else if (state.isMoving) {
const elapsed = Date.now() - state.moveStart;
const progress = Math.min(1, elapsed / (totalWidth * 1000 / animSpeed));
state.currentX = -totalWidth + progress * (zoneWidth + totalWidth);
if (progress >= 1) {
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
}
} else if (state.isPausing) {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.isMoving = true; // 准备翻页
}
} else if (!state.isPausing && state.isMoving) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.currentX = -totalWidth;
state.isMoving = true;
state.moveStart = Date.now();
} }
state.currentY = 0; state.currentY = 0;
break; break;
case 3: // 上移 case 3: // 上移
if (typeof state.currentY !== 'number') state.currentY = zoneHeight; if (!state.isMoving && !state.isPausing) {
state.currentY -= animSpeed;
if (state.currentY < -totalHeight) {
if (asset.pages.length > 1) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
}
state.currentY = zoneHeight; state.currentY = zoneHeight;
state.isMoving = true;
state.moveStart = Date.now();
} else if (state.isMoving) {
const elapsed = Date.now() - state.moveStart;
const progress = Math.min(1, elapsed / (totalHeight * 1000 / animSpeed));
state.currentY = zoneHeight - progress * (zoneHeight + totalHeight);
if (progress >= 1) {
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
} }
state.currentX = 0; } else if (state.isPausing) {
break; if (Date.now() - state.pauseStart >= pauseMs) {
case 4: // 下移 state.isPausing = false;
if (typeof state.currentY !== 'number') state.currentY = -totalHeight; state.isMoving = true; // 准备翻页
state.currentY += animSpeed; }
if (state.currentY > zoneHeight) { } else if (!state.isPausing && state.isMoving) {
if (asset.pages.length > 1) {
state.currentPage = (state.currentPage + 1) % asset.pages.length; state.currentPage = (state.currentPage + 1) % asset.pages.length;
} state.currentY = zoneHeight;
state.currentY = -totalHeight; state.isMoving = true;
state.moveStart = Date.now();
} }
state.currentX = 0; state.currentX = 0;
break; break;
case 4: // 下移
if (!state.isMoving && !state.isPausing) {
state.currentY = -totalHeight;
state.isMoving = true;
state.moveStart = Date.now();
} else if (state.isMoving) {
const elapsed = Date.now() - state.moveStart;
const progress = Math.min(1, elapsed / (totalHeight * 1000 / animSpeed));
state.currentY = -totalHeight + progress * (zoneHeight + totalHeight);
if (progress >= 1) {
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
}
} else if (state.isPausing) {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.isMoving = true; // 准备翻页
}
} else if (!state.isPausing && state.isMoving) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.currentY = -totalHeight;
state.isMoving = true;
state.moveStart = Date.now();
}
state.currentX = 0;
break;
case 5: // 连续左移 (跑马灯效果) case 5: // 连续左移 (跑马灯效果)
// 确保初始位置在分区右侧外部 // 特殊处理 - 不分页
if (typeof state.currentX !== 'number') state.currentX = zoneWidth; if (typeof state.currentX !== 'number') state.currentX = zoneWidth;
// 向左移动文本
state.currentX -= animSpeed; state.currentX -= animSpeed;
// 当文本完全移出左侧边界时，重置到右侧重新开始（无缝循环）
if (state.currentX < -totalWidth) { if (state.currentX < -totalWidth) {
state.currentX += totalWidth; state.currentX += totalWidth;
} }
// Y轴居中显示
state.currentY = (zoneHeight - totalHeight) / 2; state.currentY = (zoneHeight - totalHeight) / 2;
break; break;
case 6: // 闪烁换页 case 6: // 闪烁换页
// 由自动翻页定时器控制，此处不处理动画位移 if (!state.isPausing && !state.isMoving) {
state.isPausing = true;
state.pauseStart = Date.now();
} else if (state.isPausing) {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.isMoving = true; // 准备翻页
}
} else if (state.isMoving) {
state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.isMoving = false;
state.isPausing = true;
state.pauseStart = Date.now();
}
state.currentX = 0; state.currentX = 0;
state.currentY = 0; state.currentY = 0;
break; break;