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

consider adding path shape type #81

Closed
catdad opened this issue Nov 22, 2019 · 2 comments
Closed

consider adding path shape type #81

catdad opened this issue Nov 22, 2019 · 2 comments
Labels
feature request A neat new idea for this project help wanted Issue could use a contributor
Projects

Comments

@catdad
Copy link
Owner

catdad commented Nov 22, 2019

Example code (limited to more modern browsers):

function path(context, x, y, scaleX, scaleY, rotation, path) {
  context.save();
  context.translate(x, y);
  context.rotate(rotation);
  context.scale(scaleX, scaleY);
  context.fill(new Path2D(path));
  context.restore();
}
...
path(context, fetti.x + fetti.wobble, fetti.y + fetti.wobble, Math.abs(x2 - x1) * 0.2, Math.abs(y2 - y1) * 0.2, Math.PI / 10 * fetti.wobble, fetti.shape.path);
...
confetti({
    particleCount: 100,
    shapes: ['circle', { type: 'path', path: 'M1 1 h 8 v 8 h -8 Z' }]
});

A path will probably need to provide a width and height or a scale factor, so that the resulting path can be scaled appropriately.

This code has very poor performance. Any acceptable solution will need to solve that.

@catdad catdad created this issue from a note in workboard (pending) Nov 22, 2019
@catdad catdad added the feature request A neat new idea for this project label Nov 22, 2019
@catdad catdad added the help wanted Issue could use a contributor label Dec 14, 2019
@catdad
Copy link
Owner Author

catdad commented Oct 23, 2022

Ooh, Path2D can be transformed directly with a DOMMatrix with is far more performant than changing the canvas context, and bonus points... it takes a css transform string.

catdad added a commit that referenced this issue Sep 28, 2023
catdad added a commit that referenced this issue Sep 28, 2023
@catdad catdad moved this from pending to in-progress in workboard Oct 2, 2023
catdad added a commit that referenced this issue Oct 2, 2023
catdad added a commit that referenced this issue Oct 2, 2023
catdad added a commit that referenced this issue Oct 3, 2023
adding support for custom confetti using path shapes
@catdad catdad moved this from in-progress to pending release in workboard Oct 3, 2023
@catdad
Copy link
Owner Author

catdad commented Oct 3, 2023

This has been shipped in version 1.8.0.

@catdad catdad closed this as completed Oct 3, 2023
workboard automation moved this from pending release to done Oct 3, 2023
catdad added a commit that referenced this issue Oct 5, 2023
adding support for text confetti (a.k.a. emoji!!)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request A neat new idea for this project help wanted Issue could use a contributor
Projects
workboard
  
done
Development

No branches or pull requests

1 participant