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

Development
1

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
2

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
3

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

image
image347Ă—1196 81.6 KB

4

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.

panels
panels657Ă—832 143 KB

5

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

image
image761Ă—967 153 KB

1 Like
6

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

1 Like
7

image
image800Ă—327 88.8 KB

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

8

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