Discord.JS, Отображение нескольких изображений профиля пользователя в цикле For с использованием холста

#javascript #canvas #discord #discord.js

Вопрос:

Я создаю таблицу лидеров пользователей с помощью Canvas, и вся статистика работает нормально. Одна вещь, с которой у меня возникают проблемы, — это отображение изображения профиля для каждого пользователя в таблице лидеров. В последнем месте отображается пфу пользователя, и я предполагаю, что остальные находятся под ним, но у меня возникают проблемы с подключением каждого пфу к новой строке. Любая помощь будет признательна. Спасибо!

Код:

   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}.nn`
    
    usernames  =  `${user.username}- Level ${level[i].data}nn` 
    
  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. Похоже, что вы каждый раз рисуете изображение в одном и том же месте. Вам нужно будет нарисовать его в размерах, которые меняются в зависимости от количества пользователей на фоне, соответствующем этому количеству.

Ответ №1:

Все аватары нарисованы на холсте, единственная причина, по которой вы можете видеть только последний, заключается в том, что вы нарисовали их в одном и том же положении друг над другом.

У вас уже есть переменная ( i ), которая увеличивается после каждой итерации. Вы должны использовать это для увеличения координаты Y изображений, что-то вроде этого:

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

Вторым drawImage и третьим параметрами метода являются координаты X и Y изображения.