08 Lines - inanevin/LinaVG GitHub Wiki

LinaVG offers various API calls to draw different types of lines:

• Single Line: Line from point p1 to p2.
• Multi Line: Supply an array of points to draw a continuous line.
• Bezier Line: Bezier curve from point p1 to p4, using control points p2 and p3.

All lines support drawOrder, and only single lines support rotateAngle parameters. These are explained in the Drawing section.

Lines use the same Styling Options as Shapes, so you can easily supply different colors, gradients, outlines and texturing to them. Rounding options don't have any effect on the lines themselves, but only on the Line Caps if you choose to have. Also, isFilled parameter have no effect as well.

All lines support line caps, you can have: Left Cap, Right Cap or Both. For Multi Lines and Bezier Lines, Left Cap will only be drawn on the first section of the line, while Right Cap will only be drawn on the last section of the cap.

Use the style.rounding variable to change how round the line cap will be.

In addition to line caps, Multi Lines and Bezier Lines also have one more property; jointType. It defines what method to use while joining individual lines within them.

Easiest and fastest joint type. It puts the outer vertices of the lines to their average position.

It's not ideal for most situations because this will create a "bending" effect on the joints. Notice how the line thickness gets smaller as it approaches to the joint.

Most common joint type, it takes the intersections of the line directions and puts the outer vertices on the intersection point. Works perfect in most cases, however will produce extremely sharp joints when angle is too low.

If the chosen line joint is Miter, LinaVG looks at the angle between the lines to be drawn. If the angle is bigger than a threshold, it falls back to using Bevel joints.

You can use LinaVG::Config.miterLimit to determine the fallback angle, the default is 150. Decreasing it will make it more likely to fall back to Bevel.

Visually works the same on almost all cases. It connects the outer two vertices of the lines together and form a triangle.

However, it might be too flat looking for some lines. In that case, you can smooth it out by using Bevel Round.

Most beautiful looking joint in my opinion. Similar to Bevel, but this time draws a rounded connection between outer vertices.

Use style.rounding to determine the smoothness of the connection. If rounding is set to 0.0f, it will fall back to Bevel.

DrawLine method draws a line starting from point 1 and ending in point 2.

LINAVG_API void DrawLine(const Vec2& p1, const Vec2& p2, StyleOptions& style, LineCapDirection cap = LineCapDirection::None, float rotateAngle = 0.0f, int drawOrder = 0);

DrawLines method is used to supply a pointer to an array of points. LinaVG will try to follow the path and connect lines.

LINAVG_API void DrawLines(Vec2* points, int count, StyleOptions& style, LineCapDirection cap = LineCapDirection::None, LineJointType jointType = LineJointType::Miter, int drawOrder = 0, bool uniformUVs = true);

 std::vector<Vec2> points;
 points.push_back(startPos);
 points.push_back(Vec2(startPos.x + 200, startPos.y));
 points.push_back(Vec2(startPos.x + 200, startPos.y + 300));
 points.push_back(Vec2(startPos.x + 600, startPos.y + 300));
 points.push_back(Vec2(startPos.x + 700, startPos.y));
 lvgDrawer.DrawLines(&points[0], static_cast<int>(points.size()), defaultStyle, lineCap, jointType, 1, true);

As can be seen above, multi-lines can have outlines with all the styling variety of normal shapes. In this case, we can see a textured-outline.

A subset of multi-lines is Bezier Lines, all same properties apply. Only difference is that instead of providing a set of points, you have to provide a start (p1) and end (p4) point, along with two control points (p2, p3).

LINAVG_API void DrawBezier(const Vec2& p0, const Vec2& p1, const Vec2& p2, const Vec2& p3, StyleOptions& style, LineCapDirection cap = LineCapDirection::None, LineJointType jointType = LineJointType::Miter, int drawOrder = 0, int segments = 50);

Segments define the smoothness of the curve, 50 is a good default, increase to make the resulting line smoother.