Is there a way to fill in background color but crop to Diagram's trace?

16 views
Skip to first unread message

Javran Cheng

unread,
Aug 30, 2021, 3:14:30 AM8/30/21
to diagrams-discuss
Hi diagrams users,

I'm recently playing with diagrams to see if I can render a Chess board with it. With the help of FontForge and SVGFonts, I managed to import drawing of Chess pieces as `Path V2 Double`s and render them through diagrams (see attached board.svg) 

However I get into troubles when I put background colors into squares: as you can see from the attached images, background color shows up through hollow part of the Chess piece path - ideally I want all hollow parts of Chess pieces to be filled with a specific color (say white in this example), but I don't know how to achieve that: there's `bg` function, but it simply addes a bounding rectangle rather than respecting the shape of Chess pieces (see attached board-with-bg.svg).

I also attached another image board-with-trace.svg, which shows results after applying `showTrace` to each Chess pieces. This looks more promosing if there's a way to turn trace into paths and `cropBy` it. I don't know much about diagrams' implementation details but as I examine the document, `showTrace` looks like a sample-based approach so I don't feel that is the right way to go as I do intent to render vector graphics if possible.

Another alternative that I have in mind might be to break Paths loaded from SVGFonts and remove some Trails from it so that only those "border trails" remain. But this appears rather involved to implement (say when it comes to test whether a specific trail is entirely inside / is needed to form the outter bound of the shape and probably other difficulties that I'm not aware of yet).

Have you run into a similar issue before and are there existing solutions to this kind of issue? Also my toy repo is at https://github.com/Javran/sxako if anyone wants to experiment a bit with it.

Thanks!
Javran
board-with-bg.svg
board-with-trace.svg
board.svg

Brent Yorgey

unread,
Aug 30, 2021, 10:39:39 PM8/30/21
to Javran Cheng, diagrams-discuss
Hi Javran,

You're right that looking at traces is likely to be a dead end here. However, I think there is a better way.

The path corresponding to each piece consists of a bunch of located trails.  For each piece, one of those trails must be the one that traces completely around the outside; you can extract that one trail, stroke it with a white fill, and place it behind the piece.  Unfortunately, after playing around with it a bit, there does not seem to be any rhyme or reason to *which* trail is the outer one for each piece. You could probably figure it out computationally by e.g. picking the trail with the biggest minimum and maximum x or y-values over all its vertices, but honestly, if it were me I might just play with it and manually figure out which index corresponds to the outer trail for each piece.

Here is a (hastily thrown together) modification of your code that assumes the trail at index 1 is always the outside one.  This is false in general, but it happens to be true for rooks (and I think also pawns?), and you can see that it does work for rooks in the attached image.  Hope this helps!

renderPiece :: PreparedFont Double -> Piece -> Diagram B
renderPiece font p = strokeP path # fc black # lw 0 <> outline # fc white # lw none
  where
    path = textSVG' opts [ch]
    outline = strokeLocTrail (pathTrails path !! 1)
    opts = TextOpts font INSIDE_H KERN False 1 70
    ch = pieceToFontChar p

out.png

--
You received this message because you are subscribed to the Google Groups "diagrams-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to diagrams-discu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/diagrams-discuss/a54f6ddc-e88e-4660-917c-d7c342a3ed72n%40googlegroups.com.

Javran Cheng

unread,
Aug 31, 2021, 7:39:29 AM8/31/21
to Brent Yorgey, diagrams-discuss
Quick update: I ended up rendering an auxiliary image (breakpath.png) to pair each trail together with its offset to manually figure out the table - it's actually a bit more involved as white queen's outline consists of 6 paths (5 of them are circles making up her crown), and with hard-coded list of trails, it now works nicely!

On Mon, Aug 30, 2021 at 9:43 PM Javran Cheng <javr...@gmail.com> wrote:
Hi Brent,

Thanks for the suggestion! I'll give it a shot as I'm fine hard-coding indices - agreed that a general approach does look possible but I'll leave that to my future self :)

Cheers,
Javran
--
Javran (Fang) Cheng


--
Javran (Fang) Cheng
breakpath.png
board.png

Javran Cheng

unread,
Aug 31, 2021, 7:39:29 AM8/31/21
to Brent Yorgey, diagrams-discuss
Hi Brent,

Thanks for the suggestion! I'll give it a shot as I'm fine hard-coding indices - agreed that a general approach does look possible but I'll leave that to my future self :)

Cheers,
Javran

On Mon, Aug 30, 2021 at 7:39 PM Brent Yorgey <byo...@gmail.com> wrote:


--
Javran (Fang) Cheng

Brent Yorgey

unread,
Aug 31, 2021, 10:51:20 AM8/31/21
to Javran Cheng, diagrams-discuss
Great!  Nice idea to make an image to show you the trail info!
Reply all
Reply to author
Forward
0 new messages