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:
+26
-64
@@ -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)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user