feat: 优化波形预览脚本绘制逻辑,支持单比特和多比特信号的不同绘制方式

This commit is contained in:
Roe-xin
2025-12-30 15:35:35 +08:00
parent d415d8ee4e
commit 0f458f6299

View File

@ -263,61 +263,63 @@ export function getWaveformPreviewScript(): string {
const timeRange = maxTime - minTime || 1;
// 绘制波形
let pathData = '';
let lastX = leftMargin;
let lastValue = signal.values[0].value;
if (signal.width === 1) {
// 单比特信号 - 绘制数字波形
let pathData = '';
const yHigh = y;
const yLow = y + signalHeight;
signal.values.forEach((point, i) => {
const x = leftMargin + ((point.time - minTime) / timeRange) * waveformWidth;
const value = point.value;
if (signal.width === 1) {
// 单比特信号 - 绘制数字波形
const yHigh = y;
const yLow = y + signalHeight;
const currentY = (value === '1') ? yHigh : yLow;
signal.values.forEach((point, i) => {
const x = leftMargin + ((point.time - minTime) / timeRange) * waveformWidth;
const currentY = (point.value === '1') ? yHigh : yLow;
if (i === 0) {
pathData = \`M \${x} \${currentY}\`;
} else {
// 绘制垂直跳变
const prevY = (lastValue === '1') ? yHigh : yLow;
const prevValue = signal.values[i - 1].value;
const prevY = (prevValue === '1') ? yHigh : yLow;
if (prevY !== currentY) {
pathData += \` L \${x} \${prevY} L \${x} \${currentY}\`;
} else {
pathData += \` L \${x} \${currentY}\`;
}
}
});
lastValue = value;
lastX = x;
} else {
// 多比特信号 - 绘制总线波形(梯形)
const yTop = y + 5;
const yBottom = y + signalHeight - 5;
const transitionWidth = 5;
if (i === 0) {
pathData = \`M \${x} \${yTop + (yBottom - yTop) / 2}\`;
} else {
// 绘制梯形过渡
pathData += \` L \${x - transitionWidth} \${yTop} L \${x} \${yTop + (yBottom - yTop) / 2}\`;
}
lastX = x;
}
});
// 延伸到右边界
if (signal.width === 1) {
const lastY = (lastValue === '1') ? y : (y + signalHeight);
// 延伸到右边界
const lastValue = signal.values[signal.values.length - 1].value;
const lastY = (lastValue === '1') ? yHigh : yLow;
pathData += \` L \${leftMargin + waveformWidth} \${lastY}\`;
} else {
const yMid = y + signalHeight / 2;
pathData += \` L \${leftMargin + waveformWidth} \${yMid}\`;
}
svgContent += \`<path d="\${pathData}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
svgContent += \`<path d="\${pathData}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
} else {
// 多比特信号 - 绘制总线波形(上下双线)
const yTop = y + 5;
const yBottom = y + signalHeight - 5;
const transitionWidth = 4;
let topPath = \`M \${leftMargin} \${yTop}\`;
let bottomPath = \`M \${leftMargin} \${yBottom}\`;
signal.values.forEach((point, i) => {
const x = leftMargin + ((point.time - minTime) / timeRange) * waveformWidth;
// 上线和下线都延伸到变化点
topPath += \` L \${x} \${yTop}\`;
bottomPath += \` L \${x} \${yBottom}\`;
// 绘制梯形过渡
topPath += \` L \${x + transitionWidth} \${yBottom} L \${x + transitionWidth} \${yTop}\`;
bottomPath += \` L \${x + transitionWidth} \${yTop} L \${x + transitionWidth} \${yBottom}\`;
});
// 延伸到右边界
topPath += \` L \${leftMargin + waveformWidth} \${yTop}\`;
bottomPath += \` L \${leftMargin + waveformWidth} \${yBottom}\`;
svgContent += \`<path d="\${topPath}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
svgContent += \`<path d="\${bottomPath}" stroke="\${color}" stroke-width="1.5" fill="none"/>\`;
}
});
// 绘制时间轴