Boolean Substraction doesn't work as expected

[Thammarith]

Hi, I'm super new to Affinity Designer and I am trying to subtract curves from the outer shape. I want to make the LINE letters transparent in the bubble icon.

However, when I select the letter curves and click subtract, only the letter N is behaving as I expect. The rest isn't subtracted. (This file I got from others so I don't know how they drew it)

What should I do? I can solve this by using the Alternate (even-odd) filling mode but the SVG JavaScript framework I'm using doesn't support even-odd so I'm stuck with Winding (non-zero). Also, it's weird that only letter N is working, the rest doesn't. It should behave in the same way, shouldn't it?

Thanks in advance!

Before:

After subtraction:

 

subtraction.afdesign

Edited September 13, 2021 by Thammarith

[Thammarith]

On 9/3/2020 at 4:59 AM, wigglepixel said:

[edit] please read the last line of this post, which I think could be the solution to the issue

I just did some more testing and found out how to make it work without tricks in the file I'm working on.

In this file there are a few paths that work with subtract and others that don't (see previous post). So I tried reversing the paths of the 'non-subtracting' paths, and after that the subtract is working as expected.

So it looks like the issue of boolean subtract not (always) working has to do with the direction of the paths not being the same as the path to subtract from. (But ofcoarse this shouldn't be an issue and should always work, so this is more of a workaround than a solution)

Second video below (workaround 1): first paths without correction resulting in wrong subtract, then first reverse path directions of 'non-subtracting' paths before subtracting resulting in expected subtract. (btw, it would be nice if this forum would let us move videos around in a post)

Hope this helps the developers to fix the issue.

 

[edit] workaround 2: changing fill mode of all paths to alternate
I just found out that when changing ALL paths needed for the subtraction to 'Alternate (even-odd)' fill mode, subtraction works as expected, no matter the direction of the paths, but when switching to 'Winding (non-zero)' we get the subtraction issues back again.

In the video below all paths are in fill-mode 'Winding (non-zero)' first. And you see this is causing issues when subtracting. After that I change the mode to 'Alternate' and subtraction works fine. Changing it back to 'Winding' again and subtraction fails again.  So to me it seems like 'Winding (non-zero)' is throwing these issues with the boolean subtract operators.

And now I also understand why @anon2 's workaround works: convert to curves ALWAYS puts the created path/curve into 'Alternate (Even-Odd)' fill mode. And with that fill-mode there are no subtract issues. So the workaround in there is basically not the non-destructive subtract, neither the 'convert to curves', but the switch to 'Alternate' fill mode.

So my guess is that the issue would be fixed if subtract would automatically switch all selected paths to alternate mode first before subtracting.

 

 

 

workaround 1 (when in 'winding' mode): reversing direction of 'non-subtracting' paths before subtract:

 

I found the solution. Just reverse the direction of the curve. Solved!

[Alfred]

Welcome to the Serif Affinity Forums, @Thammarith.

11 minutes ago, Thammarith said:

I found the solution. Just reverse the direction of the curve. Solved!

I’m glad you managed to find a workable solution in this particular case, but in general if you have multiple curves that you want to subtract from another curve you can select those curves and add them to create a single ‘Curves’ object. Subtracting the new object from the outer shape should then give you the result you expected.

[Thammarith]

22 hours ago, Alfred said:

Welcome to the Serif Affinity Forums, @Thammarith.

I’m glad you managed to find a workable solution in this particular case, but in general if you have multiple curves that you want to subtract from another curve you can select those curves and add them to create a single ‘Curves’ object. Subtracting the new object from the outer shape should then give you the result you expected.

Thanks for the suggestion. I tried what you suggested but it didn't work the way I expected

 

[R C-R]

6 hours ago, Thammarith said:

Thanks for the suggestion. I tried what you suggested but it didn't work the way I expected

That's odd. It works fine for me, like in this Curves subtract.afdesign file. I included the history of the last few steps so you can use the History panel slider to see that it works.

[telemax]

On 9/13/2021 at 5:36 PM, Thammarith said:

I found the solution. Just reverse the direction of the curve. Solved!

I found a second solution, which is a non-destructive boolean mode. Hold Alt before the boolean operation.

[PixelPest]

What´s odd is that just "N" has the right path direction from the text. If you reverse L, I, E before Geometry add all will work as expected.

[R C-R]

34 minutes ago, PixelPest said:

What´s odd is that just "N" has the right path direction from the text. If you reverse L, I, E before Geometry add all will work as expected.

Hmmm. In my Curves subtract file, I divided the Curves layer, changed two of the curve's directions (so two each way), added them to get a Curves object again (still with two each way), & subtracted again. No difference for me -- it did not matter which way the curves went.

[telemax]

17 minutes ago, R C-R said:

No difference for me -- it did not matter which way the curves went.

We are talking about the file the author provided.

[R C-R]

2 hours ago, telemax said:

We are talking about the file the author provided.

Understood. I just don't know why that makes a difference in that file but not in mine.

[Xzenor]

5 hours ago, R C-R said:

Understood. I just don't know why that makes a difference in that file but not in mine.

Because you drew a new bubble.

If I draw a new shape in the author's file then I can subtract all the letters without a problem. It's when subtracting them from the bubble when suddenly the curve direction matters. Subtracting new shapes from the bubble work the same as the letters. one direction works, other direction doesn't.

The problem is in the bubble but I can't find it.

I pasted his bubble in your image and tried to subtract the text from that bubble, same issue. You need to reverse curve on the letters before being able to remove them.

[PixelPest]

20 minutes ago, Xzenor said:

The problem is in the bubble but I can't find it.

No it´s not the bubble - it´s the "N". What you seem to get with a new object and Geometry->Subtract (Geometry merge) is the fill-rule Even-odd which will open the "holes" but is cheating. When you look at the stroke orientation/direction you will instantly discover why it´s not working with fill-rule non-zero. Fill-Mode should not alter the appearance of compound paths.

[Xzenor]

28 minutes ago, PixelPest said:

No it´s not the bubble - it´s the "N". What you seem to get with a new object and Geometry->Subtract (Geometry merge) is the fill-rule Even-odd which will open the "holes" but is cheating. When you look at the stroke orientation/direction you will instantly discover why it´s not working with fill-rule non-zero. Fill-Mode should not alter the appearance of compound paths.

Then add a new shape and subtract the letters from that. That goes without a problem. Even when you change the curve direction, no problem.

Yet when you try it with the bubble, suddenly the curve direction matters.

[PixelPest]

As I said; this is when Even-odd is enabled which seems the default setting for combining paths and Boolean operandi. Try to enable non-zero and see how that goes.  

This might give you a clue. Orientation can be made visible:

[Xzenor]

Quote

this is when Even-odd is enabled

I missed that part.

How would you enable/disable that and how can you see the current status?

I know you can make the direction visible but it didn't have any effect on new shapes I made, probably because it wasn't enabled on the new shape.

[PixelPest]

Go Layer->Fill Mode … I still guess Even-Odd is a default setting for conveniency.

But my question remains why just one of the 4 glyphs wear the opposite direction of the path or why they are not all equal? That not should happen with text and doesn´t make sense.

[Xzenor]

Quote

Try to enable non-zero and see how that goes.  

Changed my fresh new shape to "Winding (Non-zero)". No change.. all letters still subtract fine, even if I change the curve direction 🙄

I'm lost..... I'll jump in the helpfiles for some explanation of the differences..

[PixelPest]

Are you using Tammarith´s file from the thread opening?

[Xzenor]

20 minutes ago, PixelPest said:

Are you using Tammarith´s file from the thread opening?

yes

[PixelPest]

Can´t explain it better than this here:

[R C-R]

4 hours ago, PixelPest said:

But my question remains why just one of the 4 glyphs wear the opposite direction of the path or why they are not all equal?

Just guessing but maybe the OP accidentally clicked the Reverse Curves button in the Context toolbar to change the direction of the N curve, & also at some point changed the fill mode to Winding (Non-zero)?

[Thammarith]

21 minutes ago, R C-R said:

Just guessing but maybe the OP accidentally clicked the Reverse Curves button in the Context toolbar to change the direction of the N curve, & also at some point changed the fill mode to Winding (Non-zero)?

I took the SVG from FontAwesome (https://fontawesome.com/v5.15/icons/line?style=brands), then I removed the outer square and it behaves weirdly like this.

This also happens on Figma as well. I guess it's something to do with the direction.

Figma:

[PixelPest]

Then it is all due to the laziness of the author. It should show up with Fill mode:Even odd but this is a cosmetic treatment and I guess some browser can´t display it correctly.

[Alfred]

1 hour ago, Thammarith said:

I took the SVG from FontAwesome (https://fontawesome.com/v5.15/icons/line?style=brands), then I removed the outer square and it behaves weirdly like this.

I downloaded the SVG file, opened it in AD on iPad, and performed the following steps:

1. Select the ‘Curves’ object

2. Divide shapes

3. Select the letter shapes

4. Add to create a new ‘Curves’ object

5. Subtract the letter curve from the speech balloon

6. Hide the rounded rectangle background shape

Result:

[PixelPest]

Here it´s with the Node tool.

Select 1 node of the rectangle - hit cmd+A - backspace to delete

Select 1 node of bubble and "N" - hit cmd+A - reverse curves: Done