04 Styling Options - inanevin/LinaVG GitHub Wiki

One of the most crucial structures in LinaVG is StyleOptions. Almost all drawing functionality accepts a parameter for defining the styling of the target shape, and StyleOptions struct hold all the data necessary. The struct itself and variables are well documented in the source code, and this document goes over a few of the most crucial options.

Fill

You can simply set a boolean to determine whether the shape will be drawn as filled or not.


// Setup style.
StyleOptions style;
style.isFilled = true;
// DrawSomething(...);

Applies to all shapes.

Colors

The color variable in StyleOptions is a struct containing a start and an end color, along with gradient parameters. You can also assign a single Vec4 to it for flat shading.

// Setup style.
StyleOptions style;

// Next shape will be drawn as flat-red.
style.color = Vec4(1, 0, 0, 1);
// DrawSomething(...);

// Next shape will be drawn as red-to-blue horizontal gradient.
style.color.start = Vec4(1, 0, 0, 1);
style.color.end   = Vec4(0, 0, 1, 1);
// DrawSomething(...);

// Next shape will be drawn as vertical gradient
style.color.gradientType = GradientType::Vertical;
// DrawSomething(...);

// Now radial gradient
style.color.gradientType = GradientType::Radial;
style.color.radialSize = 1.2f;
// DrawSomething(...);

The coloring option affects all shapes and lines. Outlines have their own coloring option, and coloring is not used if the style options define a texture handle.

Rounding

You can round the corners of all shapes using the rounding option.

// Setup style.
StyleOptions style;
style.rounding = 0.3f;
// DrawSomething(...);

Rounding applies to rectangles, triangles and user-defined-convex shapes. Same rounding is also used while drawing line-caps and rounded line-joints.

You can also use another variable to only round some of the corners:

// Setup style.
StyleOptions style;
style.rounding = 0.3f;
style.onlyRoundTheseCorners.push_back(0);
style.onlyRoundTheseCorners.push_back(3);
// DrawSomething(...);
style.onlyRoundTheseCorners.clear();

This applies to rectangles, triangles and user-defined-convex shapes. The corners to round must be given as a clock-wise order, e.g. in the above example we rounded the first and last corner using top-left as a starting point and by going clock-wise, thus indices 0 and 3.

Thickness

You can define the edge thickness of the shapes by using the thickness variable. It only affects the non-filled shapes and lines.

// Setup style.
StyleOptions style;
style.thickness = 3.0f;
// DrawSomething(...);

Similar to the color variable, thickness is also a struct where you can use start & end variables to define variable thickness. This only applies to lines.

// Setup style.
StyleOptions style;
style.thickness.start = 3.0f;
style.thickness.end = 12.0f;
// DrawSomething(...);

Textures

You can apply textures to your shapes and lines. The only thing you have to do is set the texture handle to a style variable. This handle must be the handle of a texture already generated on the GPU, e.g. the handle returned by glTexture2D(...) in OpenGL. You can also set the texture's UV offset & tiling.

// Setup style.
StyleOptions style;
style.extureHandle = ExampleApp::Get()->GetCheckeredTexture();
style.textureUVOffset = Vec2(0.0f, 0.0f);
style.textureUVTiling = Vec2(2.0f, 2.0f);
// DrawSomething(...);

Using a texture will bypass any coloring options.

Set the texture handle to 0 in order to disable textures on the shape.

Outlines

In order to draw outlines, you need to set an outline thickness greater than 0.0f.

// Setup style.
StyleOptions style;
style.outlineOptions.thickness = 2.0f;
style.outlineOptions.color = Vec4(0,0,0,1);
// DrawSomething(...)

Outline options have pretty much the same styling options explained above. With an additional option called drawDirection, which defines whether to draw inner or outer outlines for non-filled shapes. Have no effect on filled shapes.

// Setup style.
StyleOptions style;
style.outlineOptions.thickness       = 2.0f;
style.outlineOptions.drawDirection = OutlineDrawDirection::Inwards;
// DrawSomething(...)

// Same options as style.color
style.outlineOptions.color.start   = Vec4(1, 0, 0, 1);
style.outlineOptions.color.end     = Vec4(0, 0, 1, 1);
// DrawSomething(...)

// Same options as style.textureXXX
style.outlineOptions.textureHandle   = ExampleApp::Get()->GetCheckeredTexture();
style.outlineOptions.textureUVOffset = Vec2(0.0f, 0.0f);
style.outlineOptions.textureUVTiling = Vec2(1.0f, 1.0f);
// DrawSomething(...)

Misc

Style options also offer:

frameBufferScale: Multiplied together with Config.globalFramebufferScale to affect the thickness of the lines and borders/outlines.
aaEnabled: Controls whether to enable/disable AA outlines to smooth the shapes.
aaMultiplier: Multiplied together with the Config.globalAAMultiplier to determine the AA thickness.

Most commonly you would leave the Config.globalXXX as 1.0f and only configure the style option's properties per-draw, e.g. in order to have proper scaling depending on which monitor you are drawing in the case of multi-monitor scenarios.

Texts

Traditional texts and SDF texts have their own respective styling structs, which are explained in the Texts section.