bezierjs: Intersection of two curves returns an exception

Thanks for building this library 🙏 I would like to get the intersection of two curves (a circle and a bezier path): screenshot 2018-06-29 17 02 29

with the following SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="269px" height="288px" viewBox="0 0 269 288">
    <g stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M138.406787,51.9034859 C138.406787,51.9034859 74.8695308,-25.4868408 21.9358155,9.81888414 C-30.9978998,45.1246091 32.5393566,122.514936 32.5393566,122.514936" id="Circle" stroke="#FF0000"></path>
        <path d="M133.38,286.76 C59.7162601,286.76 0,227.04374 0,153.38 C0,79.7162601 59.7162601,20 133.38,20 C207.04374,20 266.76,79.7162601 266.76,153.38 C266.76,227.04374 207.04374,286.76 133.38,286.76 Z" id="Path" stroke="#979797"></path>
    </g>
</svg>

When I use BezierJS to determine the interesection:

const Bezier = require('bezier-js');
const circleBezier = Bezier.fromSVG(document.getElementById('Circle').getAttribute('d'));
const pathBezier = Bezier.fromSVG(document.getElementById('Path').getAttribute('d'));
const intersection = pathBezier.intersects(circleBezier);
console.log(instersection);

I get the following exception:

Uncaught TypeError: Cannot read property 'filter' of undefined
    at Bezier.<anonymous> (bezier.js:475)
    at Array.forEach (<anonymous>)
    at Bezier.extrema (bezier.js:467)
    at Bezier.reduce (bezier.js:542)
    at Bezier.intersects (bezier.js:712)

Any idea why it’s not working?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 26 (19 by maintainers)

Most upvoted comments

Not yet, but let’s find out.

Pomax on Jun 30, 2018

Oh wow! Indeed, the Array.concat() is immutable function. At least, I hope I helped in some way testing a use case that improved this library.

Thanks again 🙏You totally rock!

melalj on Jul 2, 2018

So, step 1: fix the svg parser. It was not updating the “start” coordinate for subsequent curves (that’s been fixed and updated on npm). Next up: why are intersections not working…

Also note you called your circle “path” and your path “circle”, so I switched that in my own test now =)

Pomax on Jul 2, 2018

I’ve pushed up 2.2.10, which adds Bezier.SVGtoBeziers, which yields a PolyBezier object with a very limited API:

addCurve(<Bezier>) grow the polybezier by a segment
length() total arc length of the polybezier (not the number of segments in the polybezier)
curve(<index>) get segment at index from the polybezier
bbox() get the total bounding box for the polybezier
offset(<distance>) in theory, get the combined offset curve for this polybezier, but I make no guarantees that that actually works =P

Pomax on Jun 30, 2018