search

r-flash / PathBool.js

A low-level library for performing boolean operations on SVG paths.
https://r-flash.github.io/PathBool.js/
MIT License
26 stars 1 forks source link

Inconsistent arc union behavior #4

Open alex-r-bigelow opened 3 weeks ago

alex-r-bigelow commented 3 weeks ago

Thanks for this awesome library!

Just reporting a few cases where very similar paths sometimes succeed, and sometimes fail, in case they're useful.

Note that, in order to actually see these paths on the demo page, tweaking the viewBox to be a bit bigger helps (these screenshots use 200x200).

I'll look closer at the code and attempt a PR in a bit. My first guess would be that there's a problem related to the SVG arc syntax itself, in that it's impossible to specify a 360-degree circle without breaking it into semicircles; see also: https://stackoverflow.com/a/10477334

Working Correctly

pathBoolean(
  'M68,39a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  'M112,70a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  PathBooleanOperation.Union)

image

The first path disappears, when the second is shifted slightly

pathBoolean(
  'M68,39a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  'M102,70a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  PathBooleanOperation.Union)

image

Union not performed, with another position

pathBoolean(
  'M68,39a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  'M105,73a32,32,0,1,0,-64,0a32,32,0,1,0,64,0',
  FillRule.NonZero,
  PathBooleanOperation.Union)

image

r-flash commented 3 weeks ago

Thank you so much for contributing! Let me know if you have any problems understanding the code. Thorough commenting and explanation of the code is still a TODO unfortunately. I'll look into your reported bugs too.