Skip to content

11 Clipping

Inan Evin edited this page Jun 15, 2022 · 7 revisions

LinaVG supports clipping via global configuration values. You can use these:

/// <summary>
/// X position of the clip rectangle. 0,0 = Top-left
/// </summary>
BackendHandle clipPosX = 0;

/// <summary>
/// Y position of the clip rectangle. 0,0 = Top-left
/// </summary>
BackendHandle clipPosY = 0;

/// <summary>
/// Clip rectangle width.
/// </summary>
BackendHandle clipSizeX = 0;

/// <summary>
/// Clip rectangle height.
/// </summary>
BackendHandle clipSizeY = 0;

When you set these to anything rather than 0, LinaVG will perform scissors operations on the rectangle you have defined. Keep in mind that everything is expected in the coordinate system where top-left is (0,0) and bottom-right is (screenWidth, screenHeight).

StyleOptions opts;
opts.isFilled = true;

const Vec2 min = Vec2(startPos.x - size.x / 2.0f, startPos.y - size.y / 2.0f);
const Vec2 max = Vec2(startPos.x + size.x / 2.0f, startPos.y + size.y / 2.0f);

if (clippingEnabled)
{
    Config.clipPosX  = static_cast<BackendHandle>(min.x);
    Config.clipPosY  = static_cast<BackendHandle>(min.y);
    Config.clipSizeX = static_cast<BackendHandle>(size.x);
    Config.clipSizeY = static_cast<BackendHandle>(size.y);
}

// Main rect.
opts.color = Vec4(0, 0, 0, 1);
LinaVG::DrawRect(min, max, opts, 0.0f, 1);

// Clipped rect.
opts.color = Vec4(0.8f, 0.1f, 0.2f, 1.0f);
LinaVG::DrawRect(Vec2(min.x - 100, min.y - 100), Vec2(min.x + 100, min.y + 100), opts, 0.0f, 2);

// Clipped circle.
LinaVG::DrawCircle(max, 75, opts, 36, 0.0f, 0.0f, 360.0f, 2);

TextOptions textOpts;
textOpts.font = m_defaultFont;
LinaVG::DrawTextNormal("This text is clipped by the black rectangle.", Vec2(min.x - 50, min.y + 250), textOpts, 0.0f, 2);

Config.clipPosX  = 0;
Config.clipPosY  = 0;
Config.clipSizeX = 0;
Config.clipSizeY = 0;

image

Here's the same drawing function without clipping:

image

Clone this wiki locally