Comments (5)
My code may help here. BezierKit began as a Swift port of Bezier.js. I ran into the issues with reduce() and offset() mentioned in this thread, and fixed them. They're just in Swift in stead of Javascript.
https://github.com/hfutrell/BezierKit/blob/master/BezierKit/Library/BezierCurve.swift
@joostdecock As I recall, the issue with offset() is that in the degenerate case the derivative is zero. My version gets around this by using a unit normal vector instead, where the normal is calculated carefully to work correctly in degenerate cases (so long as not all control points are equal where the normal cannot be defined).
from bezierjs.
For those who ended up here after Googling; The same problem occurs when you try to get the .offset()
of a Bezier curve that has one of it's control points identical to the start or end point.
The black solid curve has it's start control point identical to its start point (the curve goes upwards). As you can see, the dotted offset stops short.
The pink curve has its control point shifted away from the start point, and as you can see, the dotted offset is correct.
If you find yourself in this situation, here is the workaround I use:
Check that start=cp1 or end=cp2. When it is, shift that control point slighty along the curve (you can use get()
for that). If you shift it in some random direction, even by just a smidge, the offset will make a weird wobble at the end (not weird actually, but expected). But if you shift it along the curve, the offset will look just fine. Like this:
I'm sharing this here in the hopes it might save others some time.
from bezierjs.
Yeah there is currently no logic in place for checking curves that are obviously degenerate (exact overlapping coordinates, curves that are actually perfectly straight lines, etc)
from bezierjs.
Hi, first of all, thanks for this wonderful library.
Any news on this to be fixed?
Most design apps (Sketch, Figma, Illustrator) have this feature. The solution above works only when you have 1 curve, I am building a pen tool (multiple curves and lines) with this library, everything else works like a charm, except for this 1 issue. I am trying the split the curves on a given point (mouse pointer). Works perfect when the curve is not "degenerate".
from bezierjs.
I've not had any time free to work on this, unfortunately. The code solution is still "detecting degenerate curves, with special affordances for those cases", but I'm quite focussed on some license-encumbered projects atm that don't really give me much free time =(
from bezierjs.
Related Issues (20)
- _lut caching doesn't work: steps is off by one HOT 5
- Release v6.1.2 broken HOT 3
- Why get(t = 0.5) point is not the middle point of the curve? HOT 5
- Find optmal D1 - Bezier.cubicFromPoints HOT 1
- PolyBezier is not exported correct for ES Module. HOT 3
- Rational Bezier Curve Support HOT 1
- Example usage of `dist/bezier.js` HOT 4
- How to make a "strict" version of bezier.project(point)? HOT 2
- Should bezier.lineIntersects(line) work for line-line intersections? HOT 3
- intersects bug Bezier to Bezier HOT 3
- Suspicious line in `utils.compute()` HOT 2
- The intersection of the two bezier is empty HOT 10
- The intersection of two identical curves HOT 2
- Intersect line method does not always return existing intersections HOT 6
- Ability to get and estimate the centerline of a list of 3D points HOT 3
- PR for extending API to interpolate values along curve and find point on curve at distance?
- Artifact when offsetting an SVG path
- Split curves do not follow old curve. HOT 2
- Missing LICENSE file HOT 1
- How to Find Y-Coordinate for a Given X-Coordinate on a Bezier Curve 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 bezierjs.