terence410 / ultimate-text-to-image

MIT License
32 stars 6 forks source link

How could I rotate the text? #3

Open ngregrichardson opened 2 years ago

ngregrichardson commented 2 years ago

I'm looking to rotate the text in the image and I'm running into problems. The only way I see to do it is in preRender, but when I do the text seems to get cropped off. I know this seems like something with canvas, but maybe this library could provide a rotate param in IImage or something that will rotate an image when it's placed on another one.

Code (I have more steps applying the background and "test" text, but this is the applicable code)

const textImage = await getCanvasImage({
        buffer: new UltimateTextToImage(
            interaction.user.username,
            {
                width: 130,
                height: 50,
                alignToCenterIfHeightLE: 1,
                fontSize: 72,
                minFontSize: 8,
                align: "center",
                valign: "middle",
                fontColor: "#c96b8e",
                fontFamily: "Mario64",
            },
            {
                preRender: (canvas) => {
                    const canvasContext = canvas.getContext("2d");

                    canvasContext.rotate(-0.523599);
                },
            }
        )
            .render()
            .toBuffer(),
    });

    const textToImage = new UltimateTextToImage("", {
        width: backgroundImage.width,
        height: backgroundImage.height,
        images: [
            {
                canvasImage: textImage,
                x: 215,
                y: 365,
            },
        ],
    });

Result (the pink text in the bottom right-hand corner of the letter) image