8.3 KiB
8.3 KiB
盐场战绩图片导出优化 v2.1.1
📅 更新时间
2025-10-12 23:00
🎯 优化内容
新增功能
-
✅ 荣誉称号区域（顶部）
- 🏆 击杀王：击杀数最多的成员
- ⚔️ 城墙毁灭者：攻城数最多的成员
-
✅ 复活丹系统
- 逻辑：死亡 ≤ 6 时，复活丹 = 0
- 逻辑：死亡 > 6 时，复活丹 = 死亡数 - 6
- 新增"复活丹"列显示
- 紫色显示，易于识别
-
✅ 布局优化
- 增加荣誉称号区域（100px）
- 调整列宽，优化信息密度
- 昵称过长自动截断（8字符+...）
📊 图片结构
1. 荣誉称号区（100px）
┌─────────────────────────────────────────┐
│ 🏆 击杀王 ⚔️ 城墙毁灭者 │
│ 赛罗誉 (48杀) 赛罗誉 (145城) │
└─────────────────────────────────────────┘
- 金色背景高亮
- 左侧：击杀王 + 昵称 + 击杀数
- 右侧：城墙毁灭者 + 昵称 + 攻城数
2. 标题区（180px）
战场周报
2025/10/11
热场荣誉
3. 表头（45px）
# 昵称 击杀 死亡 攻城 复活丹 KD
4. 数据行（每行 45px）
1 赛罗誉 48 4 145 0 12.00
2 648-1 0 1 193 0 0.00
3 654-1 0 1 134 0 0.00
...
5. 总计行（45px）
总计: 20人 48 25 1705 167 1.92
6. 页脚（100px）
导出时间: 2025/10/12 23:00:15
🎨 颜色方案
荣誉称号
- 背景：
rgba(241, 196, 15, 0.2)- 金色半透明 - 击杀王标题：
#f1c40f- 金色 - 城墙毁灭者标题：
#e67e22- 橙色 - 文字：
#ecf0f1- 白色
表格数据
- 击杀：
#2ecc71- 绿色 ✅ - 死亡：
#e74c3c- 红色 ❌ - 攻城：
#f39c12- 橙色 🏰 - 复活丹：
#9b59b6- 紫色 💊（新增） - KD：
#ecf0f1- 白色
前三名高亮
- 🥇 第一名：
#f1c40f- 金色左侧条 - 🥈 第二名：
#95a5a6- 银色左侧条 - 🥉 第三名：
#cd7f32- 铜色左侧条
💊 复活丹计算逻辑
规则
复活丹 = 死亡数 <= 6 ? 0 : 死亡数 - 6
示例
| 死亡数 | 复活丹 | 说明 |
|---|---|---|
| 0 | 0 | 无死亡，无需复活丹 |
| 3 | 0 | 死亡 ≤ 6，免费复活 |
| 6 | 0 | 临界值，免费复活 |
| 7 | 1 | 超过6次，需要1个复活丹 |
| 10 | 4 | 超过6次，需要4个复活丹 |
| 25 | 19 | 超过6次，需要19个复活丹 |
总计
总复活丹 = Σ(每位成员的复活丹)
🏆 荣誉称号计算
击杀王
击杀王 = 击杀数最多的成员
- 显示格式：
昵称 (击杀数杀) - 示例：
赛罗誉 (48杀)
城墙毁灭者
城墙毁灭者 = 攻城数最多的成员
- 显示格式：
昵称 (攻城数城) - 示例：
赛罗誉 (145城)
并列处理
- 当前逻辑：取第一个最大值
- 后续可优化：并列显示多人
📐 布局尺寸调整
画布尺寸
宽度: 800px
高度: 荣誉区(100) + 标题区(180) + 表头(45) + 数据行(成员数×45) + 总计(45) + 页脚(100)
列宽分配
| 列名 | X坐标 | 宽度 | 说明 |
|---|---|---|---|
| # | 40 | 80 | 排名 |
| 昵称 | 150 | 150 | 成员名称（限8字符） |
| 击杀 | 300 | 100 | 击杀数 |
| 死亡 | 400 | 100 | 死亡数 |
| 攻城 | 500 | 100 | 攻城数 |
| 复活丹 | 610 | 100 | 新增 |
| KD | 720 | 80 | KD比率 |
🔧 技术实现
击杀王和城墙毁灭者
// 遍历所有成员，找出最大值
let killKing = null
let maxKills = 0
let wallDestroyer = null
let maxSieges = 0
sortedMembers.forEach(member => {
const kills = member.winCnt || 0
const sieges = member.buildingCnt || 0
if (kills > maxKills) {
maxKills = kills
killKing = member
}
if (sieges > maxSieges) {
maxSieges = sieges
wallDestroyer = member
}
})
复活丹计算
sortedMembers.forEach(member => {
const deaths = member.loseCnt || 0
// 死亡 <= 6 为 0，死亡 > 6 则为 (死亡数 - 6)
member.revivePills = deaths <= 6 ? 0 : deaths - 6
})
荣誉区绘制
// 背景
ctx.fillStyle = 'rgba(241, 196, 15, 0.2)'
ctx.fillRect(20, 20, width - 40, 70)
// 击杀王
if (killKing) {
ctx.fillStyle = '#f1c40f'
ctx.fillText('🏆 击杀王', 40, 50)
ctx.fillStyle = '#ecf0f1'
ctx.fillText(`${killKing.name} (${maxKills}杀)`, 40, 75)
}
// 城墙毁灭者
if (wallDestroyer) {
ctx.fillStyle = '#e67e22'
ctx.fillText('⚔️ 城墙毁灭者', 400, 50)
ctx.fillStyle = '#ecf0f1'
ctx.fillText(`${wallDestroyer.name} (${maxSieges}城)`, 400, 75)
}
🎯 导出示例数据
示例战绩（根据用户提供）
总计: 20人
- 击杀总数: 48
- 死亡总数: 25
- 攻城总数: 1705
- 复活丹总数: 167
- 总KD: 1.92
击杀王
赛罗誉 (48杀)
- 遥遥领先，其他成员击杀数都是个位数
城墙毁灭者
赛罗誉 (145城)
- 同样是赛罗誉，攻城数最多
复活丹统计
根据死亡数计算：
- 死亡 ≤ 6 的成员：复活丹 = 0
- 死亡 > 6 的成员：按公式计算
- 总计 167 个复活丹（推算总死亡数约为 167 + 120 = 287）
🐛 Bug 修复
问题1：头像不显示
原因：Canvas 绘制图片需要先加载图片资源
当前状态：
- 目前未实现头像显示（需要额外处理图片加载）
后续方案：
// 预加载头像
const loadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => resolve(img)
img.onerror = reject
img.src = url
})
}
// 绘制头像
const img = await loadImage(member.headImg)
ctx.drawImage(img, x, y, 32, 32)
📋 修改文件清单
已修改文件（1个）
src/utils/clubBattleUtils.js - exportToImage 函数
主要变更
- ✅ 新增荣誉称号区域（100px）
- ✅ 计算击杀王和城墙毁灭者
- ✅ 添加复活丹计算逻辑
- ✅ 调整画布高度（+100px）
- ✅ 修改表头，添加"复活丹"列
- ✅ 调整列宽和X坐标
- ✅ 数据行添加复活丹显示（紫色）
- ✅ 总计行添加复活丹总数
- ✅ 昵称过长自动截断（>8字符）
🧪 测试验证
测试用例1：正常数据
成员: 20人
击杀王: 赛罗誉 (48杀)
城墙毁灭者: 赛罗誉 (145城)
总复活丹: 167个
✅ 预期：荣誉区正确显示，复活丹数量正确
测试用例2：全员低死亡（≤6）
所有成员死亡数 ≤ 6
✅ 预期：所有成员复活丹 = 0，总计 = 0
测试用例3：长昵称
昵称: "一二三四五六七八九十"（10字符）
✅ 预期：显示为 "一二三四五六七八..."（8字符+省略号）
测试用例4：并列第一
两人同时48杀
✅ 预期：显示第一个遍历到的成员
💡 使用说明
导出步骤
- 进入 游戏功能 → 俱乐部信息
- 切换到 盐场战绩 Tab
- 点击右上角 导出 按钮
- 选择 导出为图片
- 等待图片生成（通常 1-2 秒）
- 图片自动下载：
军团战战绩-2025-10-11.png
分享建议
- ✅ 微信/QQ 群：直接发送图片
- ✅ 朋友圈/空间：可直接上传
- ✅ 论坛发帖：支持多数图床
🔮 后续优化方向
1. 头像显示（P1）
- 实现头像预加载
- 处理跨域问题
- 添加默认头像
- 圆形头像裁剪
2. 更多荣誉称号（P2）
- 💀 死神（死亡最多）
- 🛡️ 不死战神（击杀最多且死亡为0）
- 🎯 精准狙击手（KD最高）
- 🏰 攻城略地（攻城>0且KD>1）
3. 数据可视化（P2）
- 添加击杀/死亡/攻城的柱状图
- 添加KD分布饼图
- 添加进度条显示
4. 自定义设置（P3）
- 自定义主题颜色
- 自定义字体大小
- 自定义图片尺寸
- 添加俱乐部Logo水印
更新时间：2025-10-12 23:00
开发人员：Claude Sonnet 4.5
状态：✅ 完成并可测试
🎊 现在刷新页面，导出图片试试吧！ 🚀