From 8b594fa5783ee7629bfbbea259dc1f7f08817aa3 Mon Sep 17 00:00:00 2001 From: zihanjian Date: Fri, 9 May 2025 14:33:05 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E7=9A=84=E8=BE=85=E5=8A=A9=E5=87=BD=E6=95=B0=E5=92=8C=E4=B8=8B?= =?UTF-8?q?=E8=BD=BD=E7=BB=9F=E8=AE=A1=E5=9B=BE=E5=83=8F=E7=9A=84=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E4=BB=A5=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB=E6=80=A7?= =?UTF-8?q?=E5=92=8C=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 43 ------------------------------------ src/utils/imageDownloader.ts | 10 ++++----- 2 files changed, 5 insertions(+), 48 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 5481d61..11582f1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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; diff --git a/src/utils/imageDownloader.ts b/src/utils/imageDownloader.ts index a596dd4..21d19e2 100644 --- a/src/utils/imageDownloader.ts +++ b/src/utils/imageDownloader.ts @@ -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); } });