shen/perler-beads
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

移除未使用的辅助函数和下载统计图像的逻辑，优化代码结构以提升可读性和维护性。

Browse Source
This commit is contained in:
zihanjian
2025-05-09 14:33:05 +08:00
parent 824f118589
commit 8b594fa578
2 changed files with 5 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/page.tsx
View File

@@ -35,15 +35,6 @@ const floatAnimation = `
}
`;
// Helper function to get contrasting text color (simple version) - 保留原有实现，因为未在utils中导出
function getContrastColor(hex: string): string {
const rgb = hexToRgb(hex);
if (!rgb) return '#000000'; // Default to black
// Simple brightness check (Luma formula Y = 0.2126 R + 0.7152 G + 0.0722 B)
const luma = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
return luma > 0.5 ? '#000000' : '#FFFFFF'; // Dark background -> white text, Light background -> black text
}
// Helper function for sorting color keys - 保留原有实现，因为未在utils中导出
function sortColorKeys(a: string, b: string): number {
const regex = /^([A-Z]+)(\d+)$/;
@@ -685,40 +676,6 @@ export default function Home() {
});
};
// --- Download Stats Image function (ensure filename includes palette) ---
const handleDownloadStatsImage = () => {
if (!colorCounts || Object.keys(colorCounts).length === 0 || activeBeadPalette.length === 0) {
console.error("下载统计图失败: 颜色统计数据无效或色板为空。"); alert("无法下载统计图，数据未生成、无效或无可用颜色。"); return;
}
const sortedKeys = Object.keys(colorCounts).sort(sortColorKeys);
const rowHeight = 25; const padding = 10; const swatchSize = 18;
const textOffsetY = rowHeight / 2; const column1X = padding; const column2X = padding + swatchSize + 10;
const canvasWidth = 250; const canvasHeight = (sortedKeys.length * rowHeight) + (2 * padding);
const canvas = document.createElement('canvas');
canvas.width = canvasWidth; canvas.height = canvasHeight;
const ctx = canvas.getContext('2d');
if (!ctx) { console.error("下载失败: 无法创建 Canvas Context。"); alert("无法生成统计图。"); return; }
ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.font = '13px sans-serif'; ctx.textBaseline = 'middle';
sortedKeys.forEach((key, index) => {
const yPos = padding + (index * rowHeight); const cellData = colorCounts[key];
ctx.fillStyle = cellData.color; ctx.strokeStyle = '#CCCCCC'; ctx.lineWidth = 1;
ctx.fillRect(column1X, yPos + (rowHeight - swatchSize) / 2, swatchSize, swatchSize);
ctx.strokeRect(column1X + 0.5, yPos + (rowHeight - swatchSize) / 2 + 0.5, swatchSize-1, swatchSize-1);
ctx.fillStyle = '#333333'; ctx.textAlign = 'left'; ctx.fillText(key, column2X, yPos + textOffsetY);
ctx.textAlign = 'right'; ctx.fillText(`${cellData.count} 颗`, canvasWidth - padding, yPos + textOffsetY);
});
try {
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = `bead-stats-palette_${selectedPaletteKeySet}.png`; // Filename includes palette
link.href = dataURL;
document.body.appendChild(link); link.click(); document.body.removeChild(link);
console.log("Statistics image download initiated.");
} catch (e) { console.error("下载统计图失败:", e); alert("无法生成统计图下载链接。"); }
};
// --- Handler to toggle color exclusion ---
const handleToggleExcludeColor = (key: string) => {
const currentExcluded = excludedColorKeys;

10
src/utils/imageDownloader.ts
View File

@@ -133,7 +133,7 @@ export function downloadImage({
const statsTopMargin = 24; // 与下方渲染时保持一致
// 根据可用宽度动态计算列数
let numColumns = Math.max(1, Math.min(4, Math.floor(preCalcAvailableWidth / 250)));
const numColumns = Math.max(1, Math.min(4, Math.floor(preCalcAvailableWidth / 250)));
// 根据可用宽度动态计算样式参数，使用更积极的线性缩放
const baseSwatchSize = 18; // 略微增大基础大小
@@ -144,7 +144,7 @@ export function downloadImage({
// widthFactor 在前面已经计算了，这里不需要重复
const swatchSize = Math.floor(baseSwatchSize + (widthFactor * 20)); // 增大最大增量幅度
// statsFontSize 在前面已经计算了，这里不需要重复
const itemPadding = Math.floor(baseItemPadding + (widthFactor * 12)); // 增大最大增量幅度
// const itemPadding = Math.floor(baseItemPadding + (widthFactor * 12)); // 增大最大增量幅度 // 移除未使用的 itemPadding
// 计算实际需要的行数
const numRows = Math.ceil(colorKeys.length / numColumns);
@@ -183,7 +183,7 @@ export function downloadImage({
ctx.fillRect(0, 0, downloadWidth, downloadHeight);
// 绘制标题栏背景
const gradientHeight = titleBarHeight;
// const gradientHeight = titleBarHeight; // 移除未使用的 gradientHeight
const gradient = ctx.createLinearGradient(0, 0, downloadWidth, 0); // 水平渐变更美观
gradient.addColorStop(0, '#4F46E5'); // 靛蓝色 (indigo-600)
gradient.addColorStop(0.5, '#7C3AED'); // 紫色 (violet-600)
@@ -413,7 +413,7 @@ export function downloadImage({
// widthFactor 在前面已经计算了，这里不需要重复
const swatchSize = Math.floor(baseSwatchSize + (widthFactor * 20)); // 增大最大增量幅度
// statsFontSize 在前面已经计算了，这里不需要重复
const itemPadding = Math.floor(baseItemPadding + (widthFactor * 12)); // 增大最大增量幅度
// const itemPadding = Math.floor(baseItemPadding + (widthFactor * 12)); // 增大最大增量幅度 // 移除未使用的 itemPadding
// 计算每个项目所占的宽度
const itemWidth = Math.floor(availableStatsWidth / renderNumColumns);
@@ -472,7 +472,7 @@ export function downloadImage({
ctx.fillText(countText, downloadWidth - statsPadding, rowY);
} else {
// 多列时，在每个单元格右侧偏内绘制
ctx.fillText(countText, itemX + itemWidth - itemPadding, rowY);
ctx.fillText(countText, itemX + itemWidth - 10, rowY);
}
});