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

Posted 2023-03-14

【中文标题】如何在画布构造函数中将文本放在特定宽度和长度之间

【英文标题】：how to put text between a specific width and length in canvas-constructor

【发布时间】：2020-08-27 18:26:35

【问题描述】：

有什么办法可以把那些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.`);
        
    

【参考方案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());
  ,