Vector Flood Fill

[Ash]

Apps: Designer
Platforms: All

A new vector flood tool has been added to Affinity Designer. This is denoted by a paint bucket icon in the Tools Panel (on iPad you can find it nested with the gradient fill tool, on Windows it will currently need to be manually added via Customising the Tools Panel).

This tool allows you to automatically fill areas created by overlapping / intersecting shapes and open curves in your document. This tool requires you to make a selection first of the curves / shapes you want the tool to consider. You can then choose a colour from the colour or swatches panel, and tap within any enclosed area to create a new shape with that fill colour. While in the tool you can also drag swatches from the swatches panel onto any area.

There are two insertion modes to this tool you can select from the context toolbar:

• Inside. This will attempt to create the new shapes / fills and place them inside existing shapes where possible.
• In-between. This will break fills and strokes apart in existing shapes, and insert the new fills in-between. 

The difference between the two is shown below. 

While using the tool you can hold Cmd (macOS / iPad) or Ctrl (Windows) to make new selections (also combining with Shift to add / remove items from your selection). You can also click-drag the tool to quickly fill many areas all at once, a simple example is shown below with some text:

The tool works with any type of fill - solid colour, gradient or bitmap. The options in the context toolbar for min, max and stretch to fit are relevant only to gradient and bitmap fills, and refers to the method used to scale the fill to the new shape.

For bitmap fills you can select a bitmap fill swatch to use, alternatively you can create bitmap fills on the fly by dragging a texture file or asset directly into the active colour in the toolbar. Below is a video showing that in action with using assets to create bitmap fills:

Texture Fills.mov

For bitmap fills if the texture has any transparency then the fill will be added as an additional fill to the shape. This allows for overlay style textures to be easily added on top of an existing colour fill. We will look at a way to make this behaviour optional.

Finally it's also worth pointing out that when you are in the tool you can also drag swatch from your swatches panel directly into any area in your selection, to quickly add multiple different colours to areas without having to select them first.

We would love you to try this new tool out and let us know what you think or if you encounter any bugs or unexpected results.

[Patrick Connor]

Known Issues

• Stroke order (specifically when stroke is set to draw behind) is ignored when creating shapes in-between
• After creating fills with in-between mode, the created objects should be added to the current selection so alternate fill colours could be given to them immediately.
• The tool is not made available by default in the Windows toolbar as referenced at top of post.
• AFD-6396 - Unable to use Ctrl click to select objects on Windows with the Vector Flood Fill Tool
• AFD-6397 - Vector Flood Fill tool gives differing results between filled and unfilled object
• AFD-6401 - Vector Flood Fill ignores the results of Warp Group objects when filling.
• AFD-6415 - Using Vector Flood Fill on text creates a Text Frame fill which cannot be removed
• AFD-6418 - Pressing the 'Set Fill to None' shortcut with the Vector Tool sets it to medium grey
• AFD-6431 - Vector Flood - add scale: none as option
• AFD-6462 - Dragging Bitmap onto Tools Panel with the Vector Flood Fill switches to Move Tool (Win only)
• AFD-6463 - Unable to drag Asset to load Vector Flood Fill if it passes over document
• AFD-6529 - Vector Flood Fill Tool: One-click flooding of stock images does not work on Windows
• AFD-6549 - Applying Vector Flood Fill to an empty, non-overlapping curve will cause Windows to crash
• PD-565 - Vector Flood Fill Tool - 'Fill to visible boundaries' button is missing tooltip on Windows
• APL-1515 - Allow the use of the Alt key to pick colour with the Vector Flood Fill Tool

 

Further known issues will be added to this list as they are reported to us by customers in this thread

[JhonatanS]

Hi, a very welcome feature for sure.

Here is an example of what I was trying to do to get a expected result,

This is a function that we use a lot to fill areas like coloring book.

One of the things that I wish to do, it that the app could generate a shape based on the area selected.

The result that we got on Raster Flood fill in Raster is what it should do I think, but creating a vector shape based on the area selected.

I made a video to test and see the result,

Here is attached the Skull coloring example.
Where I tried to paint the White areas, but it's kind of generating a fill color over the same shape.

 

 

[Bryan Rieger]

I can see use cases for both behaviours; one that respects the outlines of the existing shapes, and one that merges adjacent flood fill shapes together. Perhaps a 'merge adjacent', 'combine fills', etc. check-box could be added to the toolbar allowing the user to select the desired flood fill behaviour?

[Sean P]

18 hours ago, JhonatanS said:

Hi, a very welcome feature for sure.

Here is an example of what I was trying to do to get a expected result,

This is a function that we use a lot to fill areas like coloring book.

One of the things that I wish to do, it that the app could generate a shape based on the area selected.
 

If you click and drag through the areas you want to fill (though I have found these to require the shapes to have no fill) you should find you're able to create a single connected curve of all the areas, rather than a bit of each segment separately.

[Sean P]

1 hour ago, Red Sands said:

If I have selected another curve X with the move tool, and then select the flood fill tool, and THEN click on a group Y, nothing happens.
If I then select the group Y in the layers panel, then I can use the flood fill tool on the group's (Y) contents.

This is correct - your selection defines what parts are to be filled.

If I've misunderstood what you're seeing please feel free to attach a video. 

[EricP]

love it so far

[postmadesign]

This is nice addition! It seems to build up on the shapebuilder tool, but it adds enough extra functionality to separate it as a tool.

[StuartRc]

Wow! this has grown on me this afternoon....Playing around with complex mesh type vectors and trees...
1. A really quick way to weld all your vector shapes and create a new asset at the same time...A real time saver! Fantastic!😀
2. Colour individual elements of a compound and lift out of the curve
3. Split complex objects without the knife tool....
4. Create overlays inside objects and use as shadows!

 

[R C-R]

On 2/7/2023 at 11:05 PM, Ash said:

This is denoted by a paint bucket icon in the toolbar

For the sake of clarity it perhaps should say this is on the Tools panel, not the toolbar?

[Hangman]

Without doubt, my new favourite tool, really well implemented, as smooth as a hot knife through butter and an incredibly quick way to create some very imaginative and creative vector effects in your sleep that would otherwise have taken substantially more work... 👏

[jc4d]

 I did a quick test and I noticed that if you have some curves under a wrap group, the vector flood fill tool "reads" the original curves and not the wrapped ones. Would be great to have an option for it.

[MxHeppa]

and i found after filling i can select filling panel and change it to gradient even. indeed nice addintion when i see text top of this thread before is harder imagined what is possible. indeed nice little thing.

[JhonatanS]

On 2/15/2023 at 11:46 AM, Sean P said:

If you click and drag through the areas you want to fill (though I have found these to require the shapes to have no fill) you should find you're able to create a single connected curve of all the areas, rather than a bit of each segment separately.

Hi, I'll attach a video to show the result,

it doesn't seem to apply correctly, considering the colors of connected shapes.

But I see when the Shape is Empty it works nice,
but when having color actually the Color tolerance doesn't seem to be used.

Is a bug, or am I doing something wrong? 😅

 

 

[spidermurph]

Just gave this a try. I thought is was going to work like the flood fill in DrawPlus but it only works on vectors.

[walt.farrell]

14 minutes ago, spidermurph said:

I thought is was going to work like the flood fill in DrawPlus but it only works on vectors.

That's why it's a Vector Flood Fill.

If you want a pixel flood fill, can't you use the one in the Pixel Persona?

[spidermurph]

The one in DrawPlus makes a vector fill from a part of an imported bitmap image.

 

[JhonatanS]

4 minutes ago, spidermurph said:

The one in DrawPlus makes a vector fill from a part of an imported bitmap image.

 

I see what you meant, it grabs the color on the bitmap area and extract making a Vector Shape based on it right?

I believe in the new Vector flood fill in Affinity, just applies in Shapes and Curves, it doesn't recognize the bitmap as curve.

[Alfred]

2 minutes ago, spidermurph said:

The one in DrawPlus makes a vector fill from a part of an imported bitmap image.

Doesn’t the one in DrawPlus simply make a vector shape based on the colour boundaries in the bitmap image? Unless I’m misremembering, it doesn’t actually create a fill based on that image.

[albertkinng]

Impressed. Works perfect! The fact that create the fills as standalone vector parts is insanely good.

[artmischke]

Works fine for me on Mac. Not self explaining to me using it the first time. But now, as I now how to use it a welcome add. on. 

Maybe a small hint or note would be welcome, when selecting the flood fill tool like: Please select first all areas you want to use the tool before going ahead.

BR Steffen

[iuli]

This feature is perhaps the most useful I had the pleasure to try out in over 15 years of doing vector work; it completely revolutionises my workflow. Bra-vo!

(It works great on the iPad even with complex projects, which normally would take several times more to complete)

Edited February 17, 2023 by iuli

[jmwellborn]

This opens up Pandora's box for fiddling with type!  The only thing I haven't been able to do is to change fonts after creating the effect.  I tried with Black Chancery on both the top and lower text lines, coloured them both, then changed the lower text line to Braganza.  That was a dismal flop, as the two colours on the lower text line jumbled together in rather a mess.

I then created a new text line and a new curve layer to replace the lower text line and was easily able to flip back and forth between the top line and the lower line, using the Vector Flood Tool to keep the colors the same.    The moral of the story is decide on your font first and stick with it.  The Vector Flood Tool works like a charm.

 

 

[albertkinng]

1 hour ago, jmwellborn said:

I then created a new text line and a new curve layer to replace the lower text line

You were very brave trying to do that with live text! I don’t even think that’s possible. The way I always do it is converting the text in curves first then make the cuts and colors. It would be amazing if you can do that with editable text! 

[loukash]

3 hours ago, jmwellborn said:

The only thing I haven't been able to do is to change fonts after creating the effect.

That's because what the flood fill tool does here is essentially just converting text to curves on the fly and then boolean dividing it based on the other selected curves. Depending on the fill mode, it places those curves either on top or inside the live text as its children.

In other words, the Vector Flood Fill tool is more or less a kind of macro for workflows that were already available previously if you were performing multiple steps manually (even possible in v1, albeit plagued by boolean operations bugs and limitations).