NanoVG - drawing lines beneath control widgets?

If I draw a line with NanoVG onto my panel, is there a way to have the line underneath (obscured by) any control widgets? Does this happen automatically, or do I need to do something special? Or do I need to break up the line into multiple segments and avoid the control(s)?


I think this happens automatically. At least it seems to work that way with port widgets in my modules.

1 Like

That is what I was hoping to hear! Thanks.

If anyone knows differently, or of complicating factors - please chime in.

1 Like

widgets have a z order. it is always the case that a child is ‘above’ (draws on top of) the parent but if multiple widgets have the same parent their order determines who gets the last swing at the buffer. There’s not a bring to front / send to back like in some other apis but there is addChidlBefore/After which does the same thing roughly.

unlike juce, seems there’s no ‘paint’ and ‘paintOverChildren’ so if you are doing ‘draw’ your children’s paint will always be called after you (both from experience and peeking at the code).

1 Like

Draw before calling base class draw to be underneath your child widgets. Draw after the base class to draw on top of children.

This gets tricky if you want to use the stock svg panel, because you then want to draw the panel (your first child), do your custom drawing, then draw the remaining children. and never call the base class draw.

Another way to is add a transparent widget the size of the panel that draws your lines, added after createPanel and before all the control widgets.


Oh I never thought of that! Right be a container and choose when to call parent::draw. Thanks for that comment!

Ooh - those are the kind of details I need - Thank you!

Ouch - I don’t like the sound of that, and it would have taken me a long time (and suffering) to discover any of that on my own.

I like it! My mind was heading toward something like this, but not in a concrete way that I could express. Presented clearly and concisely as you did, I think I now have what I need to continue.

I will likely mark your post as the answer once I have my code up and running. Thanks again.

1 Like

Large numbers of my modules have no svg asset and add a background widget as step one which is a frame buffer deferring to a draw lambda. This works super well for me! All of baconmusic and airwindows works this way. (Surge has some svg assets but then mostly draws the components in code as children in order also)

That class which binds a lambda and draws it in a frame buffer is basically the one I use all the time to do this. Add a full panel instance of that after your svg and it will do what you want. (I don’t remember if that compiles with c++11 but it looks like it should)

1 Like

Yeah, I can see advantages with that technique. I seriously considered going down that road at one point, but I had enough invested in svg panels that I stuck with them. I’ve gotten to the point where maintaining different themes is pretty efficient. But if I ever decide I want to add or change color schemes, I will definitely be cursing my decision!

I made a nonvg-style single file library for themeing in-place at runtime using a master svg, specific element labelling, and a json config for the alt colors. Not limited to light/dark themes:

1 Like