NanoVG - single path, multiple lines, different colours, possible?

I am probably expecting too much from NanoVG here, but does anyone know if it is possible to draw lines of different colours in a single path?

I want the lines to be the same path so that they are connected and respect the nvgLineJoin property, but I would like the lines to be different colours.

Here is what I am currently at code-wise:

rack::math::Vec panelTL{rack::math::Vec(0.0f, 0.0f)};
rack::math::Vec panelBR{rack::math::Vec(widget->box.size.x, widget->box.size.y)};
rack::math::Vec borderTL{rack::math::Vec(panelTL.x + 2.5f, panelTL.y + 2.5f)};
rack::math::Vec borderBR{rack::math::Vec(panelBR.x - 2.5f, panelBR.y - 2.5f)};

nvgSave(vg);

nvgBeginPath(vg);

nvgRect(vg, panelTL.x, panelTL.y, panelBR.x, panelBR.y);
nvgFillColor(vg, panelColour);
nvgFill(vg);

nvgStrokeWidth(vg, 5.0f);

nvgMoveTo(vg, borderTL.x, borderTL.y);
nvgLineTo(vg, borderBR.x, borderTL.y);
nvgStrokeColor(vg, borderColourT);
nvgStroke(vg);

nvgLineTo(vg, borderBR.x, borderBR.y);
nvgStrokeColor(vg, borderColourR);
nvgStroke(vg);

nvgLineTo(vg, borderTL.x, borderBR.y);
nvgStrokeColor(vg, borderColourB);
nvgStroke(vg);

nvgLineTo(vg, borderTL.x, borderTL.y);
nvgStrokeColor(vg, borderColourL);
nvgStroke(vg);

nvgRestore(vg);

This doesn’t work because the final call to nvgStroke applies the last set nvgStrokeColor to all the lines.

I have achieved the four lines being different colours by using multiple nvgBeginPath and nvgClosePath, but this is also not correct, because the lines are not joined (you will have to excuse the ugly debug colour choice :wink: )

image

1 Like

No, a path is either filled or stroked with a single set of properties. If you are trying for a bevelled edge, I did filled trapezoids.

2 Likes

Well I guess trapezoids it is then…

It is a little bit more hassle, but actually, I can use gradient fills instead of solid stroke colours this way

If you are like me you are going to find that it is difficult to find a text color that will be legible against that entire gradient. I ended up using multiple gradients so that I could get all the text area “dark enough” to put white text on top of it.

Yep that’s a concern, although that image was just a test, the colours are on the extreme ends so that I could see what was going on.

In actual fact, the bevelled panel is just an experiment that I am doing, in another new plugin I am considering creating, for all my experimental modules. So that might not be an issue there…

In my NuMetal plugin the gradient is more subtle, the colour of the panel and the text is user configurable, I am adding a texture on top too, and I think it works quite well

1 Like

Yeah, that does look plenty legible! haha - is that texture supposed to remind us of certain guitar amplifiers? :wink:

1 Like

Actually I just wanted to make it look like the panel was a metal plate, you know, because the plugin is called NuMetal but now that you mention it, it probably was a subconscious thing, yeah…

Plus that amp is very commonly used in Nu Metal music, so it works for me! I guess I need to create some big red lights and silver knobs now as well

haha, yes, that’s the one, and I do remember many bands using these.