bezierjs
bezierjs copied to clipboard
offset messes up on tighter curves
A picture is worth a thousand words:
What I'm actually trying to do is create a uniform inset for a larger closed shape, consisting of a number of bezier curves. Obviously there will be issues if the shape has any intersections on its path, but I don't care about that case too much. Can you recommend any information that would allow me to calculate a continuous non-self-intersecting offset path derived from a continuous set of bezier curves defining a closed shape?
on the "it's wrong": yeah that definitely looks wrong...marking as bug.
As for getting a non-intersecting outline, offsetting cannot generate a G1 or higher continuous offset, but you can perform a path simplification (find the intersections on the offset path, discard any segments "between" the offset and the real curve).
As the output of offset()
is only a negligible number of curves, I guess it's ok to suffer the O(n2) performance of testing for intersection between each of the resultant curves and, if found, (a) drop the intermediate curves and (b) splice the two intersecting curves to drop the overlapping segments. For non-intersecting offsets, it seems like drawing an arc between the two endpoints, using the originating bezier point as the arc centre, would produce an ideal result.
ideal, but technically wrong, of course. It won't be the actual offset curve, but it will be aesthetically pleasing, and that's really more important.
Sure, and aesthetics is all I care about in this case.
Hi, thank you for great library.
Also, when the curve is simple, this issue seems to occur.
This picture is a part of http://pomax.github.io/bezierjs/.
I saw a incomplete path several times when I was moving control points.
But I don't know when that occur.
thanks - I should probably add some details to the bezierjs sketches to show coordinate values (somewhere, probably not directly in the sketch itself)