Intersecting shapes with typography SVG

[Keegan Leary]

Hello,

I'm having trouble intersecting shapes with SVGs created from typography.

In particular, take the letters o or e, which are each made up of two paths, and outer and an inner.

if I overlay another shape, say a rectangle, the path1.intersect(path2), where path1 is the letter 1 and path 2 is the rectangle, the blue outline shape is returned, not the red outline shape.

https://drive.google.com/file/d/1HGOSr7-BoBqWd7mMrrM6pa2qXRw5w-wF/view?usp=share_link

How can I use paperjs methods to get the red outline space only?

Ideas:

In the boolean operations example, the ring is created by subtracting the inner from the outer. should I loop through my SVG CompoundPath and figure out which path is inner, subtract that from the outer, then remove the inner?  I have about 6 enclosed letters in the text I want to use. This seems feasible though cumbersome. Is there a better way perhaps?

Thank you!

[Paul Badger]

Just get the sizes of the shapes and throw choose the larger one?

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/4a979525-3c1e-4502-9fa2-fcb8cf2556b6n%40googlegroups.com.

[Keegan Leary]

Thanks for responding. I need to detect intersection with just the outer - inner section of the letter "O" for example.

https://drive.google.com/file/d/1Tx5eD6z6lUZvm55nzl2RFfhLKwpLOxIf/view?usp=sharing

I also tried fillRule evenodd but not getting the desired result :(.

[Keegan Leary]

I made a lot of progress with this but still having trouble getting my circles "inside the hole of the letter o" to color differently than the shapes intersecting with the body of the letter.

Sketch here.

[Keegan Leary]

I think the issue stems from this line in the docs: "All the paths in a compound path take on the style of the compound path and can be accessed through its item.children list."

However, when I set the color of individual children, it still colors the whole compound path. Is there a smart way to color individual children, or to "separate" the sub-paths of a compound path? I think I have a flawed understanding of how subpaths work 😭

On Tuesday, February 7, 2023 at 2:43:51 PM UTC-8 Keegan Leary wrote:

[Paul Badger]

On Feb 7, 2023, at 3:48 PM, Keegan Leary <leary....@gmail.com> wrote:

Hello,

I'm having trouble intersecting shapes with SVGs created from typography.

In particular, take the letters o or e, which are each made up of two paths, and outer and an inner.

if I overlay another shape, say a rectangle, the path1.intersect(path2), where path1 is the letter 1 and path 2 is the rectangle, the blue outline shape is returned, not the red outline shape.

https://drive.google.com/file/d/1HGOSr7-BoBqWd7mMrrM6pa2qXRw5w-wF/view?usp=share_link

Can you just make a copy of the inner shapes and then intersect your other shape with that, and subsequently delete it.

I have never worked with subpaths either though.