大小王对称渲染

背景

当前大小王在有素材图片时，将整张图居中适配绘制在躯体区域，无对称处理。需要改为：上半区显示原图，下半区显示原图的垂直镜像，实现类似 JQK 人像的对称效果。

需求

上传的素材图片作为上半部分的源图
躯体区域纵向平分：上半区绘制原图（居中适配），下半区绘制垂直翻转后的同一张图
角标 JOKER + BIG/SMALL 不变
无素材时回退到白字 "JOKER" 居中（不变）

修改范围

文件	函数
`frontend/src/utils/cardRenderer.js`	`drawJokerBody()`
`backend/apps/exports/utils.py`	`draw_joker()`

前端实现 (Canvas2D)

在 drawJokerBody 中，当有素材图片时：

// 躯体区域上下平分
const halfH = bodyH / 2

// 上半区：原图居中适配
const fit = fitSize(imgW, imgH, bodyW, halfH)
ctx.drawImage(img, bodyX + (bodyW - fit.w) / 2, bodyY + (halfH - fit.h) / 2, fit.w, fit.h)

// 下半区：垂直翻转后居中适配
ctx.save()
ctx.translate(0, bodyY + halfH)         // 移动到下半区中线
ctx.scale(1, -1)                         // 垂直翻转
ctx.drawImage(img, bodyX + (bodyW - fit.w) / 2, -(halfH - fit.h) / 2, fit.w, fit.h)
ctx.restore()

后端实现 (PIL)

在 draw_joker 中，当有素材图片时：

half_h = body_h // 2

# 上半区：原图居中适配
img.thumbnail((body_w, half_h), Image.LANCZOS)
x1 = body_x + (body_w - img.width) // 2
y1 = body_y + (half_h - img.height) // 2
canvas.paste(img, (x1, y1), img)

# 下半区：垂直翻转后居中适配
img_flipped = img.transpose(Image.FLIP_TOP_BOTTOM)
y2 = body_y + half_h + (half_h - img_flipped.height) // 2
canvas.paste(img_flipped, (x1, y2), img_flipped)

Note: thumbnail 是原地修改，所以上半区粘贴完成后需要重新加载原图再做翻转，或者先复制一份。

修正：

img_copy = img.copy()
img_copy.thumbnail((body_w, half_h), Image.LANCZOS)
# 上半区粘贴 img_copy
img_flipped = img_copy.transpose(Image.FLIP_TOP_BOTTOM)
# 下半区粘贴 img_flipped

注意事项

前端当前使用 Math.max (fill) 适配策略，改为对称后每个半区内图片尺寸一致
后端当前使用 thumbnail (contain) 适配，保持一致即可
躯体 padding 前端 18%/22%，后端 15%/20%，各自保持不变

2.3 KiB Raw Blame History

大小王对称渲染

背景

需求

修改范围

前端实现 (Canvas2D)

后端实现 (PIL)

注意事项

2.3 KiB

Raw Blame History