Best way to draw a line with NanoVg?

Development
1

I’ve always used a filled rectangle with a height of like one or two pixels to draw a horizontal line. But most drawing programs would actually have a horizontal line with a one or two pix stroke on in.

So - in VCV (NanoVg) what’s the “best” way to draw a line?

2

I use nvgMoveTo() to set the initial coordinate (one end of the line), and then nvgLineTo() to create the path to the other end. After that I set parameters with nvgStrokeColor() and nvgStrokeWidth(), and finally nvgStroke() to actually draw the line on the path.

If there is a better way, I’d love to know.

No NanoVG thread would be complete without a link to nanovg.h, so here it is. :slightly_smiling_face:

1 Like
3

Well, I think it’s maybe slightly less code to use filled rectangles, but it’s not a big deal of course. I guess I should try both and see if they look any different. Your way does seem “more right”, and of course works for lines on angles.

1 Like
4

oh, and while I got an expert - what width works well for all screens and magnifications? are fractional widths like 1.5f better or worse than even ones? or does it depend…?

5

haha - I think you tried to sabotage me (kidding). Need to enclose that in begin/close path:

nvgBeginPath(vg); nvgMoveTo(vg, x, y); nvgLineTo(vg, x + length, y); nvgStrokeColor(vg, color); nvgStrokeWidth(vg, width); nvgStroke(vg); nvgClosePath(vg);

1 Like
6

Oh, I’m far from an expert; everything I know I’ve learned from nanovg.h, stoermelder’s MAZE, Rack’s LightWidgets, and some trial/error. I’ve actually never done any graphics coding before Rack and NanoVG.

I haven’t done any experimenting with stroke width to see how it plays with nvg at different zoom levels. In Algomorph all the numbers that I’m feeding into nvg come from the SVG output of GraphViz, so I haven’t had to bother with coming up with numbers for myself. :grinning:

Actually, the functional foundation of Algomorph’s display is sticking rack::math::crossfade() inside the parameters for just about every call to nvg. So for example something like:

nvgCircle(ctx, crossfade(nodeX[0], nodeX[1], morph), crossfade(nodeY[0], nodeY[1], morph), radius);

So, given that I’m successfully throwing all sorts of crazy floating point numbers in there like that, my guess is that it’s not worth worrying about.

1 Like
7

Fractional widths are no better or worse than others.

The only magnification where you can really worry about it is at 100%, and you should probably center your lines on 0.5 boundaries if they have odd widths and at 1.0 boundaries if they have even widths.

At any other magnification you are really in the lap of the gods.

2 Likes