Affinity Designer: Cut Out Vector Graphics that Fall Outside of a Shape

[andren]

I drew a square with the shape tool and then I drew some circles on top of that square. Some of the shapes that I drew on top fall outside of the square. I want to know if there's a way in Affinity Designer for the parts that fall outside of a shape to be trimmed off.

Take a look at the image I have attached to get a better idea of what I mean. Basically, I drew a green square and then I drew several red circles on top of it. What I would like to do is cut out the parts of the red circles that fall outside of the green square.

Is there a way I can accomplish this in Affinity Designer? (I'm using the Mac OS version btw.)

Thank you

[MmmMaarten]

@andren Yes, and it's actually very simple and quick to do: just drag the layers of the circles as children under the layer with the rectangle.

While dragging under the rectangle you should see an indented line in the layer panel. When it's indented you know it's going to be a child. If it's not indented, just move your cursor a little to the right so it will be indented and then let it drop. Hope this makes sense.

BTW, the fun part is: it's non destructive!

[andren]

2 hours ago, MmmMaarten said:

@andren Yes, and it's actually very simple and quick to do: just drag the layers of the circles as children under the layer with the rectangle.

While dragging under the rectangle you should see an indented line in the layer panel. When it's indented you know it's going to be a child. If it's not indented, just move your cursor a little to the right so it will be indented and then let it drop. Hope this makes sense.

BTW, the fun part is: it's non destructive!

 

Thanks a lot for your help!

I totally forgot that this feature existed.

[Alfred]

7 hours ago, MmmMaarten said:

BTW, the fun part is: it's non destructive!

The not so fun part is: you can’t easily make it destructive! There are many scenarios where you can’t use the rectangle (or a copy of it) to cut away the overhanging parts of other objects so that they’re completely removed.

[andren]

2 hours ago, Alfred said:

The not so fun part is: you can’t easily make it destructive! There are many scenarios where you can’t use the rectangle (or a copy of it) to cut away the overhanging parts of other objects so that they’re completely removed.

That's okay. Just being able to clip the circles to the square underneath them will work fine for my purpose :)

[MmmMaarten]

4 hours ago, Alfred said:

The not so fun part is: you can’t easily make it destructive!

@Alfred

True. I needed that so many times. It would definitely be very welcome to have a feature to 'apply' a non-destructive crop to be destructive. What I now do to accomplish this is, to follow this example, copy the rectange the amount of circles I have and do a destructive boolean extract with each circle on one of the rectangle copies. But especially when creating illustrations where you have lots of parts that's a lot of work.

The other part: to be able to export elements to svg that are outside of the 'canvas' isn't possible at the moment unfortunately. I needed this multiple times too, because when creating animating and interactive graphics that need to move from the outside in for example, we need to be able to put elements off the screen first. Ofcoarse I can program everything to be offscreen when the interactive gets loaded in the app and I do that now as a workaround, but it would be a lot better if we could just put elements offscreen in the editor so we can see it in designtime instead of creating all kind of workarounds.

But this workaround isn't possible for all issues with this. It doesn't work when the dimensions of the element don't fit in the 'canvas'. For instance when we have a huge background layer that needs to roll by and so is much wider than the scene, like a street or a landscape, this workaround never works and we need to put that layer in a different artboard or file because of the different dimensions. Which is not ideal, because we want to see the result in Affinity while designing and we just can't.

How cool would it be if these two things are improved in version 2 😀

Anyway, glad it's fine for your use case @andren, and it's a great and quick feature in most cases tho! 

[v_kyr]

On 7/23/2022 at 8:17 AM, Alfred said:

The not so fun part is: you can’t easily make it destructive! There are many scenarios where you can’t use the rectangle (or a copy of it) to cut away the overhanging parts of other objects so that they’re completely removed.

True, though there are other (more time consuming) ways like converting the outer overlapping circles to pies and adjusting those accordingly.

In cases where a drawn rect and then the cuted out outer overlapping circles won't have to be changed afterwards anymore, one can fake that look with another underneath same size rect and a geometrical subtract of the main rect and the outer circles..