Skip to content

feat(wallet-card): upgrade watermark pattern from square to diamond layout #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gaubee merged 3 commits into from
Jan 4, 2026
Merged

feat(wallet-card): upgrade watermark pattern from square to diamond layout #155

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75715ae
feat(wallet-card): upgrade watermark pattern from square to diamond l…
Gaubee Jan 4, 2026
2faf4db
fix: maintain original watermark density with diamond pattern
Gaubee Jan 4, 2026
e672d37
fix: use logicalSpacing=3 for better density and pattern offset
Gaubee Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions src/components/wallet/refraction/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,9 +218,10 @@ function ensurePatternCache(
}

/**
* 创建水印 pattern（图标居中在 cell 内）
* 创建水印 pattern（菱形排布）
* 使用 2x2 的 tile，在对角位置放置图标，重复后形成菱形网格
* 逻辑间距固定为 WATERMARK_LOGICAL_SPACING
* @param cellPx cell 物理尺寸（用于创建 tile）
* @param cellPx 单个 cell 的物理尺寸
* @param iconPx 图标物理尺寸
*/
function ensureWatermarkCache(
Expand All @@ -233,20 +234,30 @@ function ensureWatermarkCache(
): PatternCache | null {
if (cache && cache.key === key) return cache

const tileSize = cellPx
// 创建 2x2 cell 大小的 tile，实现菱形排布
const tileSize = cellPx * 2
const tile = new OffscreenCanvas(tileSize, tileSize)
const tctx = tile.getContext('2d')
if (!tctx) return null

tctx.clearRect(0, 0, tile.width, tile.height)
// 图标在 cell 内居中绘制
const iconOffset = (tileSize - iconPx) / 2

// 图标在 cell 内居中的偏移量
const iconOffset = (cellPx - iconPx) / 2

// 位置 1: 左上 cell 的中心 (0.5, 0.5) in cell units
tctx.drawImage(image, iconOffset, iconOffset, iconPx, iconPx)

// 位置 2: 右下 cell 的中心 (1.5, 1.5) in cell units
tctx.drawImage(image, cellPx + iconOffset, cellPx + iconOffset, iconPx, iconPx)

const pattern = ctx.createPattern(tile, 'repeat')
if (!pattern) return null

return { key, pattern, logicalSpacing: WATERMARK_LOGICAL_SPACING, tileSize }
// 使用 3 作为逻辑间距：
// 1. 密度适中（比原来的 2 稍稀，视觉更舒适）
// 2. 与纹理层（间距 1）错开，避免视觉重复
return { key, pattern, logicalSpacing: 3, tileSize }
}

function renderMaskedLayer(
Expand Down