fix(share): 分享海报大数字压状态文案+删二维码与顶部品牌名

- 根因:状态文案 y=172(22px)、大数字基线 y=230(最大90px),多位数
  分钟数字顶部≈165 落入文案区(150~172),压住"完成"文案
- 重排垂直节奏:卡片放大,状态文案 y=184,大数字基线 y=286(上限84px,
  与文案下沿间距 34 安全),连续打卡 y=332
- 删顶部"平板的支撑"品牌名、删右下角二维码及"扫码一起打卡"引导
- 删除废弃资源 static/share-qr.jpg;导出改为绘制完直接导出无需等图
This commit is contained in:
2026-08-14 09:22:04 +08:00
parent 8ca709b86b
commit 9d2c752043
3 changed files with 33 additions and 65 deletions
+26 -64
View File
@@ -1037,30 +1037,23 @@ Page({
ctx.fillStyle = '#F7F8FA'
ctx.fillRect(0, 0, W, H)
// --- top brand ---
ctx.fillStyle = '#888888'
ctx.font = 'normal 400 18px sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'alphabetic'
ctx.fillText('平板的支撑', W / 2, 36)
// --- main card shadow ---
ctx.save()
ctx.fillStyle = 'rgba(0,0,0,0.06)'
roundRect(38, 54, 424, 250, 22)
roundRect(38, 44, 424, 320, 22)
ctx.fill()
ctx.restore()
// --- main card ---
ctx.save()
ctx.fillStyle = '#FFFFFF'
roundRect(35, 52, 430, 246, 20)
roundRect(35, 42, 430, 316, 20)
ctx.fill()
ctx.restore()
// --- gradient circle icon (same feel as completion-emoji-wrap) ---
const circleX = W / 2
const circleY = 108
const circleY = 104
const circleR = 40
const grad = ctx.createLinearGradient(circleX - circleR, circleY - circleR, circleX + circleR, circleY + circleR)
grad.addColorStop(0, '#4CAF50')
@@ -1075,23 +1068,24 @@ Page({
drawStar(circleX, circleY, 20, 8, 5)
ctx.fill()
// --- status text ---
// --- status text (kept well above the big number so a multi-digit
// minute count never overlaps it) ---
ctx.fillStyle = '#333333'
ctx.font = 'normal 600 22px sans-serif'
ctx.font = 'normal 600 24px sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'alphabetic'
ctx.fillText(message, W / 2, 172)
ctx.fillText(message, W / 2, 184)
// --- big number + unit ---
const fmt = this._formatShareDuration(elapsed)
const numLen = fmt.num.length
const numSize = numLen <= 2 ? 90 : numLen <= 3 ? 76 : numLen <= 4 ? 60 : 48
const numSize = numLen <= 2 ? 84 : numLen <= 3 ? 70 : numLen <= 4 ? 56 : 44
ctx.font = `normal 800 ${numSize}px sans-serif`
ctx.textAlign = 'right'
ctx.textBaseline = 'alphabetic'
ctx.fillStyle = primary
const numX = W / 2 + 4
const numY = 230
const numY = 286
ctx.fillText(fmt.num, numX, numY)
ctx.fillStyle = '#666666'
@@ -1104,57 +1098,25 @@ Page({
ctx.fillStyle = primary
ctx.font = 'normal 500 18px sans-serif'
ctx.textAlign = 'center'
ctx.fillText(`连续打卡 ${streak}`, W / 2, 272)
ctx.fillText(`连续打卡 ${streak}`, W / 2, 332)
}
// --- bottom left: CTA text ---
ctx.textAlign = 'left'
ctx.textBaseline = 'alphabetic'
ctx.fillStyle = '#333333'
ctx.font = 'normal 700 22px sans-serif'
ctx.fillText('扫码一起打卡', 48, 338)
ctx.fillStyle = '#999999'
ctx.font = 'normal 400 15px sans-serif'
ctx.fillText('平板的支撑 · 每天进步一点点', 48, 366)
// --- bottom right: QR code ---
const qrSize = 88
const qrX = W - 48 - qrSize
const qrY = 308
const doExport = () => {
wx.canvasToTempFilePath({
canvas,
width: W,
height: H,
destWidth: W,
destHeight: H,
fileType: 'jpg',
quality: 0.9,
success: (r) => {
this._shareImageUrl = r.tempFilePath
},
fail: (err) => {
console.warn('[sharePoster] export failed', err)
}
})
}
const img = canvas.createImage()
img.src = '/static/share-qr.jpg'
img.onload = () => {
ctx.save()
ctx.fillStyle = '#FFFFFF'
roundRect(qrX - 6, qrY - 6, qrSize + 12, qrSize + 12, 8)
ctx.fill()
ctx.drawImage(img, qrX, qrY, qrSize, qrSize)
ctx.restore()
doExport()
}
img.onerror = () => {
// 二维码加载失败时仍导出一张无二维码的海报,避免分享按钮失效
doExport()
}
// --- export (no QR; draw immediately) ---
wx.canvasToTempFilePath({
canvas,
width: W,
height: H,
destWidth: W,
destHeight: H,
fileType: 'jpg',
quality: 0.9,
success: (r) => {
this._shareImageUrl = r.tempFilePath
},
fail: (err) => {
console.warn('[sharePoster] export failed', err)
}
})
})
},