Giter Club home page Giter Club logo

Comments (5)

hfutrell avatar hfutrell commented on May 30, 2024 2

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.

joostdecock avatar joostdecock commented on May 30, 2024 1

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.

Here's an example:

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.

Pomax avatar Pomax commented on May 30, 2024

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.

hoomanaskari avatar hoomanaskari commented on May 30, 2024

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.

Pomax avatar Pomax commented on May 30, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.