0

Right now, I am working with bezier curves in fabric.js. Assuming, for instance, 3 of them, with intersections between them. I need to find the exactly crossing point and, even more difficult, draw the selection in other canvas. For fabric.path, I'm using

   perPixelTargetFind: true,

Image to clarify the situation:

Crossing bezier curves

Paul-Jan
  • 16,746
  • 1
  • 63
  • 95
JDaniel
  • 139
  • 9
  • Finding the intersection between bezier curves is rather hard (see http://stackoverflow.com/questions/16052689/how-to-find-intersection-points-between-two-cubic-bezier-curve, for example), so I'd be (pleasantly) suprised if someone comes up with a ready-made solution to your problem. – Paul-Jan Jan 11 '16 at 15:04
  • You can find many different forms of Bézier intersection [here](http://www.kevlindev.com/geometry/2D/intersections/). There's also a nice library wrapped up as an npm package [`svg-intersections`](https://www.npmjs.com/package/svg-intersections). To use with Fabric you'll need to convert to SVG, find the intersections, and take back to Fabric land. – Phrogz Jan 11 '16 at 15:12
  • Note that it's not clear from your example why any particular segments are being chosen (drawn in red). Leftmost? Longest segments? Smallest angle of intersection? There are, to my mind, four possible ways of connecting those three paths. – Phrogz Jan 11 '16 at 15:18
  • My fault. The user must choose a part of a bezier to start but, for the moment i have enough whit find the intersection of the lines, clicking only in one of them. I will implement kevLinDev library, to show some of result. Thank you very much for this help. – JDaniel Jan 12 '16 at 07:44

1 Answers1

2

Finally, after a long time, I can't find any solution in fabric library, a workaround pass for convert to svg, use a another library or program your own proccess (pretty hard) and convert back to fabric. The final solution is use paper.js, it has some functions to detect intersections and colissions, and, also, is very powerful for some other task.

JDaniel
  • 139
  • 9