javascript - 如何在画布构造函数中将文本放在特定宽度和长度之间

Question

有没有办法把那些vvvv放在白盒子里，直到黑线所在的地方 like it starts from the end of the blue color and ends at that black line in the white color and the whole paragraph stays inside it

代码

const { Canvas } = require('canvas-constructor');
const { createCanvas, loadImage } = require('canvas');
const { MessageAttachment } = require('discord.js');
const { get } = require('node-superfetch');
const db = require('quick.db');
const fsn = require('fs-nextra');
const { crFormat } = require('../../functions')

Canvas.registerFont(`${process.cwd()}/assets/font/NotoEmoji-Regular.ttf`, "NotoEmoji")
Canvas.registerFont(`${process.cwd()}/assets/font/Roboto-Regular.ttf`, "RobotoRegular")

module.exports = {
    config: {
        name: "profile2",
        aliases: ['prof'],
        category: 'economy',
        description: 'Shows User Profile',
        usage: '[mention | username | nickname | ID]',
        accessableby: "everyone"
    },
    run: async (bot, message, args) => {

        let user = message.mentions.members.first() || message.guild.members.cache.get(args[0]) || message.guild.members.cache.find(r => r.user.username.toLowerCase() === args.join(' ').toLocaleLowerCase()) || message.guild.members.cache.find(r => r.displayName.toLowerCase() === args.join(' ').toLocaleLowerCase()) || message.member;
        if (user.user.bot) return message.channel.send(`**Bots Don't Have A Profile!**`);

        let works = await db.fetch(`works_${user.id}`)
        if (works === null) works = 0;

        let bg = await db.fetch(`bg_${user.id}`)
        if (bg === null) bg = 'https://images.wallpaperscraft.com/image/cat_profile_muzzle_eyes_113734_3840x2400.jpg'

        let money = await db.fetch(`money_${message.guild.id}_${user.id}`)
        if (money === null) money = 0;

        let bank = await db.fetch(`bank_${message.guild.id}_${user.id}`)
        if (bank === null) bank = 0;

        let level = await db.fetch(`level_${message.guild.id}_${user.id}`)
        if (level === null) level = 0;

        let info = await db.fetch(`info_${user.id}`)
        if (info === null) info = 'No Info'

        let xp = await db.fetch(`messages_${message.guild.id}_${user.id}`)
        if (xp == null) xp = 1

        let vip = await db.fetch(`bronze_${message.guild.id}_${user.id}`)
        if (vip === null) vip = '0'
        if (vip === true) vip = '1'

        let shoes = await db.fetch(`nikes_${message.guild.id}_${user.id}`)
        if (shoes === null) shoes = '0'

        let newcar = await db.fetch(`car_${message.guild.id}_${user.id}`)
        if (newcar === null) newcar = '0'

        let newhouse = await db.fetch(`house_${message.guild.id}_${user.id}`)
        if (newhouse === null) newhouse = '0'

        let uLevel = level + 1;
        let nxtLvlXp = uLevel * 100;
        let difference = xp / nxtLvlXp * 297;
        let balance = money;
        let Info = info
        let background = bg;
        let work = works;

        try {
            async function createCanvas() {
                var username = user.user.username;
                var name = username.length > 10 ? username.substring(0, 12) + "..." : username;
                var { body: avatar } = await get(user.user.displayAvatarURL({ format: 'jpg', size: 1024 }));
                var { body: background1 } = await get(background)
                var background2  = await fsn.readFile('assets/images/profile.png');

                return new Canvas(600, 600)
                    .setColor('#000000')
                    .addImage(background1, 0, 0, 600, 500)
                    .addBeveledImage(background2, 0, 0, 600, 400)
                    .setTextFont('30px Impact')
                    .addText(`${name}'s Profile Card`, 190, 105)
                    .setTextFont('30px Impact')
                    .addText('|', 280, 380)
                    .addText('|', 280, 400)
                    .addText('|', 280, 420)
                    .addText('|', 280, 450)
                    .addText('|', 280, 470)
                    .addText('|', 280, 495)
                    .addText('__   ___', 495, 420)
                    .addText('_______', 495, 460)
                    .addText('__   ___', 495, 520)
                    .addText('_______', 495, 560)
                    .addText('_______________________', 150, 500)
                    .setTextFont('bold 28px Courier New')
                    .addText(` About ${user.user.username}`, 180, 182)
                    .setTextFont('30px Impact')
                    .addText('Level', 190, 140)
                    .addText('Ranks', 310, 140)
                    .addText('Works', 445, 140)
                    .setTextFont('30px Impact')
                    .addText('Total XP', 180, 530)
                    .addText('Balance', 180, 560)
                    .addText(`${crFormat(xp)}`, 370, 530)
                    .addText(`$${crFormat(balance)}`, 370, 560)
                    .setTextAlign('center')
                    .setTextFont('bold 20px Courier New')
                    .setTextFont('30px Impact')
                    .addText(`${uLevel}`, 280, 140)
                    .addText(`${vip}`, 410, 140)
                    .addText(`${crFormat(work)}`, 555, 140)
                    .addText('-', 260, 140)
                    .addText('-', 393, 140)
                    .addText('-', 535, 140)
                    .setColor("#459466")
                    .addRect(150, 570, difference, 34)
                    .setTextFont("16px RobotoRegular")
                    .setColor("#000000")
                    .setTextAlign('right')
                    .addText(`${Info}`, 210, 200)
                    .setTextAlign("center")
                    .addText(`XP: ${xp} / ${nxtLvlXp}`, 330, 590)
                    .addCircularImage(avatar, 90, 93, 89, 104)
                    .toBufferAsync();
            }

            const msg = `**User profile card for ${user.user.tag}**`;
            const attachment = new MessageAttachment(await createCanvas(), 'profile.png')
            message.channel.send(`${msg}`, attachment)

        } catch (e) {
            console.log(e)
            return message.channel.send(`Oh no an error occurred :( \`${e.message}\` try again later.`);
        }
    }
}

标签： javascriptcanvasdiscord.js

Answer 1

getWrapText: function (text, length) {
    const temp = [];
    for (let i = 0; i < text.length; i += length) {
      temp.push(text.slice(i, i + length));
    }
    return temp.map(x => x.trim());
  },