Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How could I rotate the text? #3

Open
ngregrichardson opened this issue May 9, 2022 · 0 comments
Open

How could I rotate the text? #3

ngregrichardson opened this issue May 9, 2022 · 0 comments

Comments

@ngregrichardson
Copy link

ngregrichardson commented May 9, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant