With Raphael API, how to do flood-filling over a background raster image?

[meta_leap (Phil)]

Bit of a rare hobbyist usecase here.. Using React and SVGs (no paper.js yet) I built this proto app shown below. On the right a color selector operated via keyboard. Center is one big SVG that contains a full-canvas-filling background raster image (all the black line art and black fills) and 4 groups denoting the 4 comic panels. Each of the groups in this example has some manually-placed fills I did in Inkscape, but the idea is to make my own tool for this, via some vector-graphics API such as Raphael.

So in Raphael terms, I guess I want display this kind of SVG canvas, interactively induce the vector graphics operations "flood-fill against backing-raster-provided line-art outlines" and later simply "brush of thickness B" to be performed with mouse operations, then save the resulting SVG with its newly added paths/polygons etc.

So how might Raphael allow implementing "flood-fill against the backing raster line-art's outlines", how would you vector-graphics veterans tackle such a use-case? (Inkscape can do it but for ergonomics and flow reasons I'm building my own UX for this single-purpose job since all general-purpose graphics programs make it too cumbersome, although otherwise great programs.)

[Ian]

I'd be tempted to use Snap.svg rather than Raphael.js these days (basically its newer sister library). It's not really clear though what the line arts outline is...is that pure raster, do you have no representation of the area you want to fill already ? Is it or can be transparent (as opposed to white) so you could simply place something behind it ?

[meta_leap (Phil)]

Thanks Ian, will check out Snap! The line arts is pure raster, indeed a transparent PNG (put into the SVG as <image> tag with local relative path href), so the white there is just a CSS bgcolor on the svg elem in my GUI. I generate these empty-with-lineart-backdrop template SVGs (with one <group> aka layer per panel) from my own code, originally so I could flood-fill them via Inkscape, as it has this capability and generates sufficiently-filling polygons, which is what I'd like to code up here too. (Like I said, I'm going for my own more rapid less clunky UX in this dev.) The reason for this is that after doing fills in SVG, my software picks up changes in it and generates actual final background PNGs, so if you check out the first panel on this sample comic, then the generated-from-the-filled-in-SVG background PNG is actually this.

So that's what my niche workflow was via Inkscape and generated template SVGs to be manually filled and then generated backdrop-colors PNGs per group from those filled SVGs  =)  and yeah, aiming to generate flood-filling-polygons in the live in-DOM SVG with respect to the raster outlines line-art..