How do you procedurally fill SVG paths?

General JUCE discussion
1

I’m working on a procedural, modular system for putting Knob parts together, inspired by KnobMan but informed by modern UI component design.

I have a vector for an arc representing the fill region of a rotary slider.

I would like to learn how to extract the path from the SVG file, and procedurally draw the path with a certain stroke radius in relation to the current thumb rotation.

FillPath seems to be all or nothing. I’m looking for an alternative.

2

If the components of the UI are static SVG elements, wouldn’t you just be doing a transform on those components, instead of draw calls?

3

I’m not sure I understand what you mean.

Wouldn’t a transform affect the scale of the component? Or am I misunderstanding the concept?

4

This might help:

I originally wrote it to test the D2D renderer but there’s nothing specific to D2D; should work cross platform.

Matt

1 Like
5

You can apply Transforms to the path, rather than the component. You can rotate them, scale them, draw them with different stroke sizes…

Extracting a path from an svg:

std::unique_ptr<Drawable> createDrawableFromSVG (const char* data)
{
    auto xml = parseXML (data);
    jassert (xml != nullptr);
    return Drawable::createFromSVG (*xml);
}

Use like this, where svgData is the BinaryData of the svg:

    std::unique_ptr<Drawable> d = createDrawableFromSVG(svgData);
    Path path = d->getOutlineAsPath();

Now you have the path, you can rotate it, scale it, shift it etc. with Transforms:

        path.applyTransform(AffineTransform(AffineTransform::translation(offsetX, offsetY)));

Apply different strokes to it in paint():

            g.strokePath (path, PathStrokeType (1.0f));

I don’t know if that helps or I didn’t understand your question.

1 Like
6

Thanks guys. All of your comments were helpful!