如何在Canvas-Constructor中添加橡皮擦,颜色选项等?

时间:2019-06-26 23:37:16

标签: discord.js

只想问一下我将如何添加橡皮擦,颜色选项并修复一个错误,即在完成绘制后,它将两次将画布发送/超时的错误。我目前正在使用Canvas构造函数在Discord.JS Bot中使用此Draw命令,但存在一些错误,我需要帮助。

这是代码:

const {
    Canvas
} = require("canvas-constructor");

const zoomfactor = 10;
const reactions = ["⬅", "➡", "⬆", "⬇", "✅", "?", "?"];
let channels = [];

/**
 * Executes the command
 * @param {Message} message
 * @param {String} command
 * @param {Array<String>} args
 */
exports.run = (client, message, args, func, prefix) => {
    if (channels.includes(message.channel.id)) {
        message.reply("**Draw ? |** You can't have more than one Canvas in a channel!");
        return;
    }
    var size;
    if (+args[0] >= 5 && +args[0] <= 100) {
        size = +args[0];
    } else {
        message.channel.send("**Draw ? |** Canvas Size must be between `5` and `100`");
        return;
    }
    message.channel.send("**Draw ? »** **Loading Canvas...**").then((msg) => {
        channels.push(message.channel.id);
        const drawing = new Drawing(msg, size, args[1], args[2]);
    });
};


class Drawing {
    constructor(msg, size, fg, bg) {
        this.msg = msg;
        this.canvasmsg;
        this.size = size;
        this.realsize = size * zoomfactor;
        this.penx = Math.floor(size / 2);
        this.peny = this.penx;
        this.penstate = false; // true: on, false: off
        this.fcolor = fg || "rgb(0, 0, 0)";
        this.bcolor = bg || "rgb(255, 255, 255)";

        this.initPixels();
        this.c = new Canvas(this.realsize, this.realsize).setColor(this.bcolor).addRect(0, 0, this.realsize, this.realsize);
        this.drawCanvas();

        msg.edit("**Draw ? |** Use the reactions below to move the pen:\n✅ Finish Drawing | ?Enable Pen | ? Disable Pen");
        this.reactArrows(0);
        this.collector = msg.createReactionCollector((reaction, user) => {
            return user.id !== msg.client.user.id && reactions.includes(reaction.emoji.name);
        });
        let self = this;
        this.collector.on("collect", (reaction) => {
            self.handleReaction(reaction)
        });
    }

    stop(reason = "") {
        this.collector.stop();
        this.drawCanvas(true);
        this.msg.edit("**Draw ? »** **Finished Drawing** - Thanks for Drawing with Nate Bot!" + reason);
        this.msg.clearReactions();
        channels = channels.filter(item => item !== this.msg.channel.id);
    }

    handleReaction(reaction) {
        // console.log(`${reaction.emoji.name} from ${reaction.users.last().username}`);
        const rid = reactions.indexOf(reaction.emoji.name);
        if (rid < 4) this.movePen(rid);
        else if (rid === 4) this.stop();
        else this.togglePenstate();
        reaction.remove(reaction.users.last()).catch(e => {
            if (e.code === 50013) reaction.message.channel.send("**Draw ? |** Nate Bot needs the **'Manage Messages'** permission for the Draw Command to work!");
        });
        this.drawCanvas();
    }

    /*
     * 0: Left
     * 1: Right
     * 2: Up
     * 3: Down
     */
    movePen(dir) {
        const xactions = [-1, 1, 0, 0];
        const yactions = [0, 0, -1, 1];
        if ((this.penx > 0 || xactions[dir] === 1) && (this.penx < this.size || xactions[dir] === -1)) this.penx += xactions[dir];
        if ((this.peny > 0 || yactions[dir] === 1) && (this.peny < this.size || yactions[dir] === -1)) this.peny += yactions[dir];
    }

    togglePenstate() {
        this.penstate = !this.penstate;
        if (this.penstate) {
            this.msg.reactions.find(val => val.emoji.name === reactions[5]).remove();
            this.msg.react(reactions[6]);
        } else {
            this.msg.reactions.find(val => val.emoji.name === reactions[6]).remove();
            this.msg.react(reactions[5]);
        }
    }

    initPixels() {
        this.pixels = [];
        for (let i = 0; i < Math.pow(this.size, 2); i++) {
            this.pixels.push(false);
        }
    }

    setPixel(x, y) {
        this.pixels[x + (y * this.size)] = true;
    }

    setCanvasPixel(x, y, color) {
        this.c.setColor(color).addRect(x * zoomfactor, y * zoomfactor, zoomfactor, zoomfactor);
    }

    drawCanvas(end = false) {
        if (this.penstate) this.setPixel(this.penx, this.peny);
        for (let x = 0; x < this.size; x++) {
            for (let y = 0; y < this.size; y++) {
                this.setCanvasPixel(x, y, this.pixels[x + (y * this.size)] ? this.fcolor : this.bcolor);
            }
        }
        if (!end) {
            this.setCanvasPixel(this.penx, this.peny, this.pixels[this.penx + (this.peny * this.size)] ? "#5A0000" : "red");
        }
        this.sendCanvas();
    }

    async sendCanvas() {
        if (this.canvasmsg) this.canvasmsg.delete().catch(e => console.error(e));
        this.msg.channel.send(`Canvas: ${this.size}px`, {
            files: [
                this.c.toBuffer()
            ]
        }).then(msg => {
            this.canvasmsg = msg;
        });
    }

    reactArrows(arrow) {
        if (arrow === 6) return;
        this.msg.react(reactions[arrow]).then(_ => {
            this.reactArrows(arrow + 1);
        }).catch(
            e => console.error(`Reaction Error: ${e}`)
        );
    }
}
exports.help = {
  name: 'draw', 
  description: 'Game of draw', 
  usage: 'draw'
} 

谢谢

0 个答案:

没有答案