xiaji/game-cards-poker-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 对齐前后端 joker 渲染，消除预览与导出不一致

Browse Source
This commit is contained in:
Poker Design Developer
2026-06-01 22:23:15 +08:00
parent 35529e3738
commit 10eb05e675
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
backend/apps/exports/utils.py
View File

@@ -294,8 +294,8 @@ def draw_joker(canvas, design, which, project, card_key, asset):
# 主体图 # 主体图
body_pad_x = int(w * 0.15) body_pad_x = int(w * 0.15)
body_pad_y_top = int(h * 0.15) body_pad_y_top = int(h * 0.18)
body_pad_y_bot = int(h * 0.20) body_pad_y_bot = int(h * 0.22)
body_w = w - 2 * body_pad_x body_w = w - 2 * body_pad_x
body_h = h - body_pad_y_top - body_pad_y_bot body_h = h - body_pad_y_top - body_pad_y_bot
if asset: if asset:
@@ -308,11 +308,11 @@ def draw_joker(canvas, design, which, project, card_key, asset):
offset_y = int(body_h * image_dy) offset_y = int(body_h * image_dy)
img_copy = asset.copy() img_copy = asset.copy()
img_copy.thumbnail((body_w, half_h), Image.LANCZOS)
if image_scale != 1: if image_scale != 1:
sw = max(1, int(img_copy.width * image_scale)) sw = max(1, int(img_copy.width * image_scale))
sh = max(1, int(img_copy.height * image_scale)) sh = max(1, int(img_copy.height * image_scale))
img_copy = img_copy.resize((sw, sh), Image.LANCZOS) img_copy = img_copy.resize((sw, sh), Image.LANCZOS)
img_copy.thumbnail((body_w, half_h), Image.LANCZOS)
x = body_pad_x + offset_x + (body_w - img_copy.width) // 2 x = body_pad_x + offset_x + (body_w - img_copy.width) // 2
y_top = body_pad_y_top + offset_y + (half_h - img_copy.height) // 2 y_top = body_pad_y_top + offset_y + (half_h - img_copy.height) // 2
canvas.alpha_composite(img_copy, (x, y_top)) canvas.alpha_composite(img_copy, (x, y_top))
@@ -372,11 +372,11 @@ def draw_back(canvas, design, asset):
offset_y = int(body_h * image_dy) offset_y = int(body_h * image_dy)
img = asset.copy() img = asset.copy()
img.thumbnail((body_w, body_h), Image.LANCZOS)
if image_scale != 1: if image_scale != 1:
sw = max(1, int(img.width * image_scale)) sw = max(1, int(img.width * image_scale))
sh = max(1, int(img.height * image_scale)) sh = max(1, int(img.height * image_scale))
img = img.resize((sw, sh), Image.LANCZOS) img = img.resize((sw, sh), Image.LANCZOS)
img.thumbnail((body_w, body_h), Image.LANCZOS)
x = body_pad_x + offset_x + (body_w - img.width) // 2 x = body_pad_x + offset_x + (body_w - img.width) // 2
y = body_pad_y_top + offset_y + (body_h - img.height) // 2 y = body_pad_y_top + offset_y + (body_h - img.height) // 2
canvas.alpha_composite(img, (x, y)) canvas.alpha_composite(img, (x, y))

6
frontend/src/utils/cardRenderer.js
View File

@@ -318,8 +318,9 @@ async function drawJokerBody(ctx, w, h, which, design, project) {
const pad = Math.max(10, w * 0.04) const pad = Math.max(10, w * 0.04)
// 左上角标 // 左上角标
ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif` ctx.font = `${textSize}px ${design.font_family || 'Times New Roman'}, serif`
ctx.fillText('JOKER', pad, pad) ctx.fillText('JOKER', pad, pad)
ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif`
ctx.fillText(label, pad, pad + textSize + 4) ctx.fillText(label, pad, pad + textSize + 4)
// 右下角标 // 右下角标
@@ -329,8 +330,9 @@ async function drawJokerBody(ctx, w, h, which, design, project) {
ctx.fillStyle = '#FFFFFF' ctx.fillStyle = '#FFFFFF'
ctx.textAlign = 'left' ctx.textAlign = 'left'
ctx.textBaseline = 'top' ctx.textBaseline = 'top'
ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif` ctx.font = `${textSize}px ${design.font_family || 'Times New Roman'}, serif`
ctx.fillText('JOKER', 0, 0) ctx.fillText('JOKER', 0, 0)
ctx.font = `bold ${labelSize}px ${design.font_family || 'Times New Roman'}, serif`
ctx.fillText(label, 0, textSize + 4) ctx.fillText(label, 0, textSize + 4)
ctx.restore() ctx.restore()