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

My icons are always blurry, looking forward to a solution #231

Open
NVO-2021 opened this issue Jun 26, 2024 · 1 comment
Open

My icons are always blurry, looking forward to a solution #231

NVO-2021 opened this issue Jun 26, 2024 · 1 comment

Comments

@NVO-2021
Copy link

NVO-2021 commented Jun 26, 2024

image

System: macOS 14.5
Chip: Apple M2

As shown in the picture, my configuration parameters are:

        // script.js
        let duration = 5 * 1000; // 5 seconds
        let end = Date.now() + duration;
        (function frame() {
            console.log("do.invoke.confetti", 777)

            var defaultOptions = {
                scalar: 2,
                flat: true,
                // flat: false,
            }

            const shapes = [
                // confetti.shapeFromText({text: '🎉', }),
                // confetti.shapeFromText({text: '️🎄',}),
                // confetti.shapeFromText({text: '💰',}),
                // confetti.shapeFromText({text: '🥇',}),
                confetti.shapeFromText({text: '💴',}),

            ];
            confetti({
                ...defaultOptions,
                particleCount: 1,
                angle: 60,
                spread: 55,
                origin: {x: 0},
                shapes: [...shapes]
            });
            confetti({
                ...defaultOptions,
                particleCount: 1,
                angle: 120,
                spread: 55,
                origin: {x: 1},
                shapes: [...shapes]
            });

            if (Date.now() < end) {
                requestAnimationFrame(frame);
            }
        }());
    })
@NVO-2021 NVO-2021 changed the title 我的图标总是很模糊,期待解决 My icons are always blurry, looking forward to a solution Jun 26, 2024
@Zatheos
Copy link

Zatheos commented Jul 1, 2024

You need to provide the scalar argument when you call confetti.shapeFromText()
So try doing something like this:
confetti.shapeFromText({text: '💴', scalar: 2})
This is used to determine how large the text is rendered to the canvas when it's being turned into a bitmap image. Without this you're rendering the text (or emoji) very small and then scaling it up so it ends up blurry.

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

2 participants