Discord.JS，使用 Canvas 在 For 循环中显示多个用户个人资料图片

Posted 2023-03-14

【中文标题】Discord.JS，使用 Canvas 在 For 循环中显示多个用户个人资料图片

【英文标题】：Discord.JS, Displaying multiple user Profile Pictures in For Loop using Canvas

【发布时间】：2021-09-15 17:59:55

【问题描述】：

我正在使用 Canvas 创建用户排行榜，所有统计数据都运行良好。我遇到的一件事是在排行榜上显示每个用户的个人资料图片。最后一个地方用户的 pfp 出现了，我假设其余的都在它下面，但是我无法将每个 pfp 放在一个新的行上。任何帮助表示赞赏。谢谢！

代码：

  for (var i in level) 
   
  let user = await client.users.fetch(`$level[i].ID.replace('guild_646074330249429012_level_', '')`).catch(console.error);


    numList += `$level.indexOf(level[i])+1.\n\n`
    
    usernames +=  `$user.username- Level $level[i].data\n\n` 
    
  ctx.font = "15px coolvetica_rg";
  ctx.textAlign - "center";
  ctx.fillStyle = "#FFFFFF";
  ctx.fillText(numList, 22, 80);

  ctx.font = "24px coolvetica_rg";
  ctx.textAlign - "center";
  ctx.fillStyle =  "#FFFFFF";
  ctx.fillText(usernames, 50, 80);
  ctx.width = "30px";
  ctx.length = "200px";
  ctx.margin = "30px";

  const avatar = await Canvas.loadImage(user.displayAvatarURL( format: 'jpg' ));
  ctx.drawImage(avatar, 10, 10, 50, 50); 
  

结果：仅显示一个用户的个人资料图片（最后一个排行榜位置的用户）

【问题讨论】：

看起来您每次都在同一个位置绘制图像。您需要以适合该数量的背景上的用户数量而变化的尺寸绘制它。

【参考方案1】：

所有头像都绘制在画布上，您只能看到最后一个的唯一原因是因为您将它们绘制在彼此顶部的相同位置。

您已经有一个变量 (i) 在每次迭代后都会增加。您应该使用它来增加图像的 Y 坐标，如下所示：

let size = 50
let padding = 10
ctx.drawImage(avatar, padding, padding + i * (size + padding), size, size); 

drawImage 方法的第二个和第三个参数是图像的 X 和 Y 坐标。

【讨论】：

哦，伙计，出于某种原因，我没有想到我可以使用 i var，您的解决方案成功了，非常感谢！！