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

优化颜色统计逻辑，移除背景色排除条件，更新相关日志信息以反映合并后的数据状态，提升代码可读性和维护性。

Browse Source
This commit is contained in:
zihanjian
2025-05-25 01:19:55 +08:00
parent 65770880ab
commit 61a89f12fe
1 changed files with 5 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/page.tsx
View File

@@ -114,7 +114,6 @@ const TRANSPARENT_KEY = 'ERASE';
const transparentColorData: MappedPixel = { key: TRANSPARENT_KEY, color: '#FFFFFF', isExternal: true };
// ++ Add definition for background color keys ++
const BACKGROUND_COLOR_KEYS = ['T01', 'H01', 'H02']; // 修正为与映射表一致的格式
// 1. 导入新组件
import PixelatedPreviewCanvas from '../components/PixelatedPreviewCanvas';
@@ -482,14 +481,14 @@ export default function Home() {
keyToColorDataMap.set(p.key, p);
});
// 2. 统计初始颜色数量 (排除背景色)
// 2. 统计初始颜色数量
const initialColorCounts: { [key: string]: number } = {};
initialMappedData.flat().forEach(cell => {
if (cell && cell.key && !BACKGROUND_COLOR_KEYS.includes(cell.key)) {
if (cell && cell.key) {
initialColorCounts[cell.key] = (initialColorCounts[cell.key] || 0) + 1;
}
});
console.log("Initial color counts (excluding background):", initialColorCounts);
console.log("Initial color counts:", initialColorCounts);
// 3. 创建一个颜色排序列表，按出现频率从高到低排序
const colorsByFrequency = Object.entries(initialColorCounts)
@@ -574,66 +573,6 @@ export default function Home() {
console.log("No colors were similar enough to merge.");
}
// --- 结束新的全局颜色合并逻辑 ---
console.log("Global color merging complete. Starting background removal.");
// --- Flood Fill Background Process ---
// ... 保持洪水填充算法不变，但在mergedData上操作 ...
const visitedForFloodFill: boolean[][] = Array(M).fill(null).map(() => Array(N).fill(false));
// 将递归的floodFill改为迭代实现，使用队列避免栈溢出
const iterativeFloodFill = (startR: number, startC: number) => {
// 先检查起始点是否有效
if (startR < 0 || startR >= M || startC < 0 || startC >= N ||
visitedForFloodFill[startR][startC]) {
return;
}
const startCell = mergedData[startR]?.[startC];
if (!startCell || !BACKGROUND_COLOR_KEYS.includes(startCell.key)) {
return;
}
const queue: { r: number; c: number }[] = [{ r: startR, c: startC }];
visitedForFloodFill[startR][startC] = true;
startCell.isExternal = true;
while (queue.length > 0) {
const { r, c } = queue.shift()!;
// 检查四个方向的邻居
const neighbors = [
{ nr: r + 1, nc: c },
{ nr: r - 1, nc: c },
{ nr: r, nc: c + 1 },
{ nr: r, nc: c - 1 }
];
for (const { nr, nc } of neighbors) {
// 检查边界和访问状态
if (nr >= 0 && nr < M && nc >= 0 && nc < N && !visitedForFloodFill[nr][nc]) {
const neighborCell = mergedData[nr]?.[nc];
// 检查是否是背景色
if (neighborCell && BACKGROUND_COLOR_KEYS.includes(neighborCell.key)) {
visitedForFloodFill[nr][nc] = true;
neighborCell.isExternal = true;
queue.push({ r: nr, c: nc });
}
}
}
}
};
// 保留原始的循环，但改用迭代版本的flood fill
for (let i = 0; i < N; i++) {
if (!visitedForFloodFill[0][i] && mergedData[0]?.[i] && BACKGROUND_COLOR_KEYS.includes(mergedData[0][i].key)) iterativeFloodFill(0, i);
if (!visitedForFloodFill[M - 1][i] && mergedData[M - 1]?.[i] && BACKGROUND_COLOR_KEYS.includes(mergedData[M - 1][i].key)) iterativeFloodFill(M - 1, i);
}
for (let j = 0; j < M; j++) {
if (!visitedForFloodFill[j][0] && mergedData[j]?.[0] && BACKGROUND_COLOR_KEYS.includes(mergedData[j][0].key)) iterativeFloodFill(j, 0);
if (!visitedForFloodFill[j][N - 1] && mergedData[j]?.[N - 1] && BACKGROUND_COLOR_KEYS.includes(mergedData[j][N - 1].key)) iterativeFloodFill(j, N - 1);
}
console.log("Background flood fill marking complete.");
// --- 绘制和状态更新 ---
if (pixelatedCanvasRef.current) {
@@ -656,8 +595,8 @@ export default function Home() {
setColorCounts(counts);
setTotalBeadCount(totalCount);
setInitialGridColorKeys(new Set(Object.keys(counts)));
console.log("Color counts updated based on merged data (excluding external background):", counts);
console.log("Total bead count (excluding background):", totalCount);
console.log("Color counts updated based on merged data (after merging):", counts);
console.log("Total bead count (total beads):", totalCount);
console.log("Stored initial grid color keys:", Object.keys(counts));
} else {
console.error("Pixelated canvas ref is null, skipping draw call in pixelateImage.");