Comments (5)
Thanks for the detailed post! This is actually on my todo list - basically if you have a multishape with n
shapes, your single shape currently needs at least n+2
vertices in order to get triangulated into enough pieces. So in your case, using the default maxSegmentLength
for those circles looks like it gives you a nonagon, so any feature with 8 or more parts would fail.
This fix has been delayed a little because rather than add colinear points on the original shape, which can result in weird slivers, I think the right approach is to still triangulate normally first, but then to split those triangles in half if needed, and that's a bit more involved to implement. But hopefully I should have it in there in the next few days.
In the meantime, as you mention you could decrease maxSegmentLength
, or you could limit the shapes to the eight largest polygons, or simplify the geometry until none of the features have that many.
from flubber.
My fallback for now is to return d3.interpolateString()
instead if flubber.combine()
fails.
If you'd like me to integrate that directly into flubber and submit a PR let me know. I just figured it's probably best to avoid silent errors and instead have users handle them explicitly.
from flubber.
Nice, I was thinking something along the same lines (recursively splitting up the triangles until there are enough pieces) but don't know my way around the code quite well enough yet to know the best place to implement.
from flubber.
I pushed v0.2.5 which should fix this error - I'll look into other splitting strategies later this week to see whether the results are any better.
from flubber.
Thought about this a bit more and I think the way to go is probably to split any triangle that's more than x% of the total area from the midpoint of its longest side to the opposite vertex before the merge step. That ought to result in fewer sliver triangles that span the whole width/height of the shape, and it would never result in more than a handful of extra ops.
from flubber.
Related Issues (20)
- Typescript typings
- Jest test fails: r.getTotalLength is not a function HOT 2
- Can we use flubber to animate from svg shape to path HOT 1
- Interpolate fills the shape HOT 2
- Using in Gatsby with IE11 HOT 1
- Animation typical doesn't work over time
- Error: 'svgPathProperties' is not exported HOT 1
- Broken in latest Chromium HOT 4
- output precision for path strings need not use 16 digits
- Reanimatedv2 HOT 1
- Porting to other languages HOT 2
- async API / non-blocking interpolation (using webworkers)
- Factor out `Number.isFinite` HOT 1
- Expose an API that outputs the compatible to/from path strings HOT 1
- Multiple instances of flubber.js HOT 1
- Improving performance: aka To-Do for Performance HOT 1
- Flubber performs differently when loaded via webpack/babel. HOT 4
- Add flubber.align()?
- flubber with greensock HOT 3
- Support for open/unclosed polygons (polylines) HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flubber.