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 16:25:33 +08:00
parent 830f16a9f5
commit 2355147ed5
1 changed files with 227 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -752,7 +752,7 @@ export default {
imageSize: 1, // 32x32 imageSize: 1, // 32x32
imageColor: 0, // 红色（默认） imageColor: 0, // 红色（默认）
effect: 0, effect: 0,
speed: 4, speed: 0,
stayTime: 5, stayTime: 5,
hAlign: 1, hAlign: 1,
vAlign: 1, vAlign: 1,
@ -1053,7 +1053,7 @@ export default {
imageSize: 1, imageSize: 1,
imageColor: 0, // 红色（默认） imageColor: 0, // 红色（默认）
effect: 0, effect: 0,
speed: 4, speed: 0,
stayTime: 5, stayTime: 5,
hAlign: 1, hAlign: 1,
vAlign: 1, vAlign: 1,
@ -1093,7 +1093,7 @@ export default {
// 解析动画效果 // 解析动画效果
if (item.anim) { if (item.anim) {
zone.effect = item.anim.typ ? item.anim.typ - 1 : 0; // 动画类型需要减1 zone.effect = item.anim.typ ? item.anim.typ - 1 : 0; // 动画类型需要减1
zone.speed = item.anim.spd || 4; // 动画速度 zone.speed = item.anim.spd || 0; // 动画速度
zone.stayTime = item.anim.pauseT ? this.getStayTimeIndex(item.anim.pauseT) : 5; // 暂停时间索引 zone.stayTime = item.anim.pauseT ? this.getStayTimeIndex(item.anim.pauseT) : 5; // 暂停时间索引
} }
} }
@ -1117,7 +1117,7 @@ export default {
imageSize: 1, imageSize: 1,
imageColor: 0, // 红色（默认） imageColor: 0, // 红色（默认）
effect: 0, effect: 0,
speed: 4, speed: 0,
stayTime: 5, stayTime: 5,
hAlign: 1, hAlign: 1,
vAlign: 1, vAlign: 1,
@ -2231,7 +2231,7 @@ export default {
imageSize: 1, imageSize: 1,
imageColor: 0, // 红色（默认） imageColor: 0, // 红色（默认）
effect: 0, effect: 0,
speed: 4, speed: 0,
stayTime: 5, stayTime: 5,
hAlign: 1, hAlign: 1,
vAlign: 1, vAlign: 1,
@ -2275,7 +2275,7 @@ export default {
imageSize: 1, imageSize: 1,
imageColor: 0, // 红色（默认） imageColor: 0, // 红色（默认）
effect: 0, effect: 0,
speed: 4, speed: 0,
stayTime: 5, stayTime: 5,
hAlign: 1, hAlign: 1,
vAlign: 1, vAlign: 1,
@ -2413,7 +2413,7 @@ export default {
// 只下发当前节目 // 只下发当前节目
const programData = { const programData = {
del_prog: 0, // 不删除节目 // del_prog: 0, // 不删除节目
prog_list: [programObj] prog_list: [programObj]
}; };
@ -2517,7 +2517,7 @@ export default {
if (zone.playType === 0 && asset.isText) { if (zone.playType === 0 && asset.isText) {
// 文本类型分区 // 文本类型分区
const page = this.addProgramPreviewPage[zIdx] || 0; const page = state && typeof state.currentPage === 'number' ? state.currentPage : 0;
const pageLines = asset.pages[page] || []; const pageLines = asset.pages[page] || [];
// 设置字体样式 // 设置字体样式
@ -2580,7 +2580,17 @@ export default {
if (effect === 3 || effect === 4) animOffsetY = state.currentY; if (effect === 3 || effect === 4) animOffsetY = state.currentY;
} }
ctx.fillText(line, startX + animOffsetX, startY + lineIdx * lineHeight + animOffsetY); // 连续左移效果（无缝循环）
if (zone.effect === 5 && state) {
let x1 = zoneX + state.currentX;
let x2 = x1 + textWidth;
// 垂直居中
let y = zoneY + (zoneHeight - lineHeight) / 2;
ctx.fillText(line, x1, y);
ctx.fillText(line, x2, y);
} else {
ctx.fillText(line, startX + (state ? state.currentX : 0), startY + lineIdx * lineHeight + (state ? state.currentY : 0));
}
}); });
} else if (zone.playType === 1 && asset.isImage) { } else if (zone.playType === 1 && asset.isImage) {
// 图片类型分区 // 图片类型分区
@ -2685,10 +2695,8 @@ export default {
this.addProgramPreviewAssets = this.addProgramForm.zones.map(zone => { this.addProgramPreviewAssets = this.addProgramForm.zones.map(zone => {
if (zone.playType === 1 && zone.image) { if (zone.playType === 1 && zone.image) {
console.log('加载图片', zone.image);
// 图片类型，异步加载图片 // 图片类型，异步加载图片
const img = new window.Image(); const img = new window.Image();
// img.crossOrigin = 'Anonymous';
const asset = { img, isImage: true, loaded: false }; const asset = { img, isImage: true, loaded: false };
img.onload = () => { img.onload = () => {
asset.loaded = true; asset.loaded = true;
@ -2720,27 +2728,27 @@ export default {
// 创建临时canvas测量文本 // 创建临时canvas测量文本
const measureCanvas = document.createElement('canvas'); const measureCanvas = document.createElement('canvas');
const measureCtx = measureCanvas.getContext('2d'); const measureCtx = measureCanvas.getContext('2d');
const fontFamilies2 = [ const enFontMap = [
'SimSun, 宋体, Songti SC, serif',
'SimHei, 黑体, Heiti SC, sans-serif',
'KaiTi, 楷体, Kaiti SC, serif'
];
const enFontMap2 = [
'Courier New', 'Arial Black', 'Arial Italic', 'Lucida Console', 'Impact', 'Gothic', 'Arial Narrow', 'Comic Sans MS', 'Brush Script MT', 'Century Gothic', 'Times New Roman' 'Courier New', 'Arial Black', 'Arial Italic', 'Lucida Console', 'Impact', 'Gothic', 'Arial Narrow', 'Comic Sans MS', 'Brush Script MT', 'Century Gothic', 'Times New Roman'
]; ];
let fontFamily2; let fontFamilyUsed;
if (/^[A-Za-z0-9\s]+$/.test(zone.displayText)) { if (/^[A-Za-z0-9\s]+$/.test(zone.displayText)) {
fontFamily2 = enFontMap2[zone.fontEn] || fontFamilies2[0]; fontFamilyUsed = enFontMap[zone.fontEn] || fontFamily[0];
} else { } else {
fontFamily2 = fontFamilies2[zone.font] || fontFamilies2[0]; fontFamilyUsed = fontFamily[zone.font] || fontFamily[0];
} }
measureCtx.font = `${fontWeight} ${scaledFontSize}px ${fontFamily2}`; measureCtx.font = `${fontWeight} ${scaledFontSize}px ${fontFamilyUsed}`;
// 分行逻辑 // 分行逻辑 - 特殊处理连续左移效果
let lines = [];
if (zone.effect === 5) { // 连续左移效果
// 强制不分行，整个文本作为一行
lines = [zone.displayText];
} else {
// 正常的分行逻辑
const zoneRenderWidth = swapWH ? zone.height : zone.width; const zoneRenderWidth = swapWH ? zone.height : zone.width;
const maxWidth = zoneRenderWidth * scale - 4; // 预留4px边距 const maxWidth = zoneRenderWidth * scale - 4; // 预留4px边距
let currentLine = ''; let currentLine = '';
const lines = [];
for (const char of zone.displayText) { for (const char of zone.displayText) {
const testLine = currentLine + char; const testLine = currentLine + char;
@ -2755,6 +2763,7 @@ export default {
} }
if (currentLine) lines.push(currentLine); if (currentLine) lines.push(currentLine);
}
// 计算每页最大行数 // 计算每页最大行数
const zoneRenderHeight = swapWH ? zone.width : zone.height; const zoneRenderHeight = swapWH ? zone.width : zone.height;
@ -2769,23 +2778,24 @@ export default {
if (pages.length === 0) pages.push([]); if (pages.length === 0) pages.push([]);
// 新增：计算总宽高和区域宽高，供动画用 // 计算总宽高和区域宽高，供动画用
const totalWidth = Math.max(...lines.map(line => measureCtx.measureText(line).width), 0); const totalWidth = Math.max(...pages.flat().map(line => measureCtx.measureText(line).width), 0);
const totalHeight = lines.length * lineHeight; const totalHeight = Math.min(lines.length, maxLines) * lineHeight;
return { return {
pages, pages,
isText: true, isText: true,
scaledFontSize, scaledFontSize,
fontFamily: fontFamily2, fontFamily: fontFamilyUsed,
fontWeight, fontWeight,
lineHeight, lineHeight,
totalWidth, totalWidth,
totalHeight, totalHeight,
zoneRenderWidth: zoneRenderWidth * scale, zoneRenderWidth: (swapWH ? zone.height : zone.width) * scale,
zoneRenderHeight: zoneRenderHeight * scale zoneRenderHeight: (swapWH ? zone.width : zone.height) * scale
}; };
}); });
}, },
resetAddProgramPreviewPage() { resetAddProgramPreviewPage() {
this.addProgramPreviewPage = this.addProgramForm.zones.map(() => 0); this.addProgramPreviewPage = this.addProgramForm.zones.map(() => 0);
}, },
@ -2884,8 +2894,6 @@ export default {
// 动画主循环，更新每个分区的动画状态 // 动画主循环，更新每个分区的动画状态
const renderWidth = 640; const renderWidth = 640;
const renderHeight = 240; const renderHeight = 240;
// const scale = Math.min(renderWidth / 32, renderHeight / 64);
// 使用与 prepareAddProgramPreviewAssets 中相同的 scale 计算方式
let screenW = this.screenParams.width || 32; let screenW = this.screenParams.width || 32;
let screenH = this.screenParams.height || 64; let screenH = this.screenParams.height || 64;
const angle = this.screenParams.angle; const angle = this.screenParams.angle;
@ -2895,7 +2903,6 @@ export default {
} }
const scale = Math.min(renderWidth / screenW, renderHeight / screenH); const scale = Math.min(renderWidth / screenW, renderHeight / screenH);
this.addProgramForm.zones.forEach((zone, idx) => { this.addProgramForm.zones.forEach((zone, idx) => {
const asset = this.addProgramPreviewAssets[idx]; const asset = this.addProgramPreviewAssets[idx];
const state = this.addProgramPreviewAnimState[idx]; const state = this.addProgramPreviewAnimState[idx];
@ -2906,13 +2913,9 @@ export default {
const page = this.addProgramPreviewPage[idx] || 0; const page = this.addProgramPreviewPage[idx] || 0;
const pageLines = asset.pages[page] || []; const pageLines = asset.pages[page] || [];
const lineHeight = asset.lineHeight; const lineHeight = asset.lineHeight;
// const totalHeight = pageLines.length * lineHeight; // 原始计算
// const totalWidth = Math.max(...pageLines.map(line => measureCtx.measureText(line).width), 0); // 原始计算
// 使用 prepareAddProgramPreviewAssets 中预先计算好的值
const totalHeight = asset.totalHeight; const totalHeight = asset.totalHeight;
const totalWidth = asset.totalWidth; const totalWidth = asset.totalWidth;
// 动画速度 // 动画速度
const speedMap = [1, 2, 3, 4, 5]; const speedMap = [1, 2, 3, 4, 5];
const animSpeed = (speedMap[zone.speed] || 3) * scale * 0.5; // 像素/帧 const animSpeed = (speedMap[zone.speed] || 3) * scale * 0.5; // 像素/帧
@ -2929,217 +2932,62 @@ export default {
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.pausePhase !== 'string') state.pausePhase = 'start'; // 'start' | 'move'
switch (effect) { switch (effect) {
case 1: // 左移 case 1: // 左移
// 确保初始 state.currentX 值存在 if (typeof state.currentX !== 'number') state.currentX = zoneWidth;
if (typeof state.currentX !== 'number') state.currentX = 0;
// 确保初始 pausePhase 值存在
if (!state.pausePhase) state.pausePhase = 'start'; // 'start' | 'move'
// 初始位置停留阶段
if (!state.isPausing && state.pausePhase === 'start') {
state.isPausing = true;
state.pauseStart = Date.now();
}
// 检查初始停留是否结束
if (state.isPausing && state.pausePhase === 'start') {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.pausePhase = 'move';
}
// 移动阶段
} else if (!state.isPausing && state.pausePhase === 'move') {
// --- 强制多移动的逻辑 ---
// !!! 核心修改点 !!!
// 原判断: if (state.currentX + totalWidth > 0)
// 新判断: 计算从起始位置(0)到当前位置已经移动的距离 (-state.currentX)
// 并与一个我们认为足够"移出"的距离进行比较
const pixelsMoved = -state.currentX; // 从 X=0 开始，向左移动了多远
const distanceToTriggerReset = zoneWidth + 100; // <--- 关键：移出区域宽度 + 额外距离
// 例如：区域宽 32 + 额外 100 = 132
// 你可以调整这个 100 为你觉得合适的值
if (pixelsMoved < distanceToTriggerReset) {
// 移动距离还不够，继续移动
state.currentX -= animSpeed; state.currentX -= animSpeed;
} else { if (state.currentX < -totalWidth) {
// 移动距离足够了（强制认为已经移出），立即重置 if (asset.pages.length > 1) {
// console.log(`Zone ${idx} - Left Move: Forcefully reset after moving ${pixelsMoved.toFixed(2)} pixels.`); // 调试信息 state.currentPage = (state.currentPage + 1) % asset.pages.length;
state.currentX = 0; // 回到起始位置
state.pausePhase = 'start'; // 回到初始停留阶段
} }
// --- 强制多移动逻辑结束 --- state.currentX = zoneWidth;
} }
// Y轴不移动
state.currentY = 0; state.currentY = 0;
break; break;
case 2: // 右移 case 2: // 右移
// 确保初始 state.currentX 值存在 if (typeof state.currentX !== 'number') state.currentX = -totalWidth;
if (typeof state.currentX !== 'number') state.currentX = 0; // 通常从左侧开始向右移
// 确保初始 pausePhase 值存在
if (!state.pausePhase) state.pausePhase = 'start'; // 'start' | 'move'
// 初始位置停留阶段
if (!state.isPausing && state.pausePhase === 'start') {
state.isPausing = true;
state.pauseStart = Date.now();
}
// 检查初始停留是否结束
if (state.isPausing && state.pausePhase === 'start') {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.pausePhase = 'move';
}
// 移动阶段
} else if (!state.isPausing && state.pausePhase === 'move') {
// --- 修正后的逻辑 ---
// 判断是否还可以继续向右移动
// 条件：当前文本左边缘距离完全移出右边界还有距离 (currentX < zoneWidth)
if (state.currentX < zoneWidth) {
state.currentX += animSpeed; state.currentX += animSpeed;
// 可选：边界检查 if (state.currentX > zoneWidth) {
// if (state.currentX > zoneWidth) { if (asset.pages.length > 1) {
// state.currentX = zoneWidth; // 精确设置到边界 state.currentPage = (state.currentPage + 1) % asset.pages.length;
// }
} else {
// 内容完全移出右侧，立即重置，准备下一轮
// 不再进入 'end' 停留阶段
state.currentX = 0; // 回到左侧起始位置
state.pausePhase = 'start'; // 回到初始停留阶段
} }
// --- 修正结束 --- state.currentX = -totalWidth;
} }
// Y轴不移动
state.currentY = 0; state.currentY = 0;
break; break;
case 3: // 上移 case 3: // 上移
// 确保初始 state.currentY 值存在 if (typeof state.currentY !== 'number') state.currentY = zoneHeight;
if (typeof state.currentY !== 'number') state.currentY = 0;
// 确保初始 pausePhase 值存在
if (!state.pausePhase) state.pausePhase = 'start'; // 'start' | 'move'
// 初始位置停留阶段
if (!state.isPausing && state.pausePhase === 'start') {
state.isPausing = true;
state.pauseStart = Date.now();
}
// 检查初始停留是否结束
if (state.isPausing && state.pausePhase === 'start') {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.pausePhase = 'move';
}
// 移动阶段
} else if (!state.isPausing && state.pausePhase === 'move') {
// --- 修正后的逻辑 ---
// 判断是否还可以继续向上移动
// 条件：当前文本底边距离完全移出顶边还有距离 (currentY + totalHeight > 0)
if (state.currentY + totalHeight > 0) {
state.currentY -= animSpeed; state.currentY -= animSpeed;
// 可选：边界检查 if (state.currentY < -totalHeight) {
// if (state.currentY + totalHeight < 0) { if (asset.pages.length > 1) {
// state.currentY = -totalHeight; state.currentPage = (state.currentPage + 1) % asset.pages.length;
// }
} else {
// 内容完全移出顶部，立即重置，准备下一轮
// 不再进入 'end' 停留阶段
state.currentY = 0; // 回到顶部起始位置
state.pausePhase = 'start'; // 回到初始停留阶段
} }
// --- 修正结束 --- state.currentY = zoneHeight;
} }
// X轴不移动
state.currentX = 0; state.currentX = 0;
break; break;
case 4: // 下移 case 4: // 下移
// 确保初始 state.currentY 值存在 if (typeof state.currentY !== 'number') state.currentY = -totalHeight;
if (typeof state.currentY !== 'number') state.currentY = 0; // 通常从顶部开始向下移
// 确保初始 pausePhase 值存在
if (!state.pausePhase) state.pausePhase = 'start'; // 'start' | 'move'
// 初始位置停留阶段
if (!state.isPausing && state.pausePhase === 'start') {
state.isPausing = true;
state.pauseStart = Date.now();
}
// 检查初始停留是否结束
if (state.isPausing && state.pausePhase === 'start') {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.pausePhase = 'move';
}
// 移动阶段
} else if (!state.isPausing && state.pausePhase === 'move') {
// --- 修正后的逻辑 ---
// 判断是否还可以继续向下移动
// 条件：当前文本顶边距离完全移出底边还有距离 (currentY < zoneHeight)
if (state.currentY < zoneHeight) {
state.currentY += animSpeed; state.currentY += animSpeed;
// 可选：边界检查 if (state.currentY > zoneHeight) {
// if (state.currentY > zoneHeight) { if (asset.pages.length > 1) {
// state.currentY = zoneHeight; state.currentPage = (state.currentPage + 1) % asset.pages.length;
// }
} else {
// 内容完全移出底部，立即重置，准备下一轮
// 不再进入 'end' 停留阶段
state.currentY = 0; // 回到顶部起始位置
state.pausePhase = 'start'; // 回到初始停留阶段
} }
// --- 修正结束 --- state.currentY = -totalHeight;
} }
// X轴不移动
state.currentX = 0; state.currentX = 0;
break; break;
case 5: // 连续左移 (跑马灯效果)
case 5: // 连续左移 (立即显示 -> 左移 -> 立即显示 -> ...) // 确保初始位置在分区右侧外部
// 确保初始 state.currentX 值存在 if (typeof state.currentX !== 'number') state.currentX = zoneWidth;
if (typeof state.currentX !== 'number') state.currentX = 0; // 向左移动文本
// 确保初始 pausePhase 值存在
if (!state.pausePhase) state.pausePhase = 'start'; // 'start' | 'move'
// 初始立即显示阶段 (或一轮结束后的显示阶段)
if (!state.isPausing && state.pausePhase === 'start') {
// 立即显示阶段，不移动，停留 pauseMs 时间
state.isPausing = true;
state.pauseStart = Date.now();
}
// 检查立即显示阶段是否结束
if (state.isPausing && state.pausePhase === 'start') {
if (Date.now() - state.pauseStart >= pauseMs) {
state.isPausing = false;
state.pausePhase = 'move'; // 进入移动阶段
}
// 移动阶段 (左移)
} else if (!state.isPausing && state.pausePhase === 'move') {
// --- 修正后的逻辑 (连续左移的移动逻辑与普通左移一致) ---
// 判断是否还可以继续向左移动
if (state.currentX > -totalWidth) {
state.currentX -= animSpeed; state.currentX -= animSpeed;
// 可选边界检查 // 当文本完全移出左侧边界时，重置到右侧重新开始（无缝循环）
// if (state.currentX < -totalWidth) { if (state.currentX < -totalWidth) {
// state.currentX = -totalWidth; state.currentX += totalWidth;
// }
} else {
// 内容完全移出，进入下一个立即显示阶段
// 连续左移的效果是在这里停留 pauseMs 后再显示下一轮
state.isPausing = true;
state.pauseStart = Date.now();
state.currentX = 0; // 回到起始位置显示
state.pausePhase = 'start'; // 回到 'start' 阶段进行显示停留
} }
// --- 修正结束 --- // Y轴居中显示
} state.currentY = (zoneHeight - totalHeight) / 2;
state.currentY = 0; // Y轴不移动
break; break;
case 6: // 闪烁换页 case 6: // 闪烁换页
@ -3151,22 +2999,10 @@ export default {
default: // 立即显示 (effect === 0) 或其他未知效果 default: // 立即显示 (effect === 0) 或其他未知效果
state.currentX = 0; state.currentX = 0;
state.currentY = 0; state.currentY = 0;
// 可以考虑添加立即显示的停留逻辑，如果需要的话
// if (!state.isPausing && state.pausePhase === 'start') {
// state.isPausing = true;
// state.pauseStart = Date.now();
// }
// if (state.isPausing && state.pausePhase === 'start') {
// if (Date.now() - state.pauseStart >= pauseMs) {
// state.isPausing = false;
// state.pausePhase = 'end'; // 或者重置为 'start'
// }
// }
// state.pausePhase = 'start'; // 重置状态以便下次循环
break; break;
} }
}); });
}, },
measureTextWidth(text, asset) { measureTextWidth(text, asset) {
// 用于动画宽度测量 // 用于动画宽度测量
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');