Imgui: Draw buttons with rounded corners on top

Created on 9 Feb 2018  路  3Comments  路  Source: ocornut/imgui

Hi 馃憤
I am a bit stuck on drawing buttons with rounded corners on top of the buttons, like this. ->
https://user-images.githubusercontent.com/8225057/31640133-cc00810c-b2dc-11e7-8604-560d0f63bc13.gif

I found a way to get rounded corners on all the sides, but i only want on the top corners on top of the buttons.(PushStyleVar(ImGuiStyleVar_FrameRounding, 5);)

drawindrawlist style

Most helpful comment

The ImDrawList::AddRect() / AddRectFilled() both take a rounding_corners_flags parameter, which you can use to specify which corner to round:

enum ImDrawCornerFlags_
{
    ImDrawCornerFlags_TopLeft   = 1 << 0, // 0x1
    ImDrawCornerFlags_TopRight  = 1 << 1, // 0x2
    ImDrawCornerFlags_BotLeft   = 1 << 2, // 0x4
    ImDrawCornerFlags_BotRight  = 1 << 3, // 0x8
    ImDrawCornerFlags_Top       = ImDrawCornerFlags_TopLeft | ImDrawCornerFlags_TopRight,   // 0x3
    ImDrawCornerFlags_Bot       = ImDrawCornerFlags_BotLeft | ImDrawCornerFlags_BotRight,   // 0xC
    ImDrawCornerFlags_Left      = ImDrawCornerFlags_TopLeft | ImDrawCornerFlags_BotLeft,    // 0x5
    ImDrawCornerFlags_Right     = ImDrawCornerFlags_TopRight | ImDrawCornerFlags_BotRight,  // 0xA
    ImDrawCornerFlags_All       = 0xF     // In your function calls you may use ~0 (= all bits sets) instead of ImDrawCornerFlags_All, as a convenience
};

Since the styling system doesn't allow customizing Button() this way currently you'd need to copy ButtonEx() into your own code (using imgui_internal.h) and adapt however you want it.

All 3 comments

From the tab navigation branch:

static void RenderTabBackground(ImDrawList* draw_list, const ImRect& bb, ImU32 col)
{
    ImGuiContext& g = *GImGui;
    const float rounding = ImMin(g.FontSize * 0.35f, bb.GetWidth() * 0.5f);
    draw_list->PathLineTo(ImVec2(bb.Min.x, bb.Max.y));
    draw_list->PathArcToFast(ImVec2(bb.Min.x + rounding, bb.Min.y + rounding), rounding, 6, 9);
    draw_list->PathArcToFast(ImVec2(bb.Max.x - rounding, bb.Min.y + rounding), rounding, 9, 12);
    draw_list->PathLineTo(ImVec2(bb.Max.x, bb.Max.y));
    draw_list->AddConvexPolyFilled(draw_list->_Path.Data, draw_list->_Path.Size, col);
    if (g.Style.FrameBorderSize > 0.0f)
        draw_list->AddPolyline(draw_list->_Path.Data, draw_list->_Path.Size, ImGui::GetColorU32(ImGuiCol_Border), false, g.Style.FrameBorderSize);
    draw_list->PathClear();
}

The ImDrawList::AddRect() / AddRectFilled() both take a rounding_corners_flags parameter, which you can use to specify which corner to round:

enum ImDrawCornerFlags_
{
    ImDrawCornerFlags_TopLeft   = 1 << 0, // 0x1
    ImDrawCornerFlags_TopRight  = 1 << 1, // 0x2
    ImDrawCornerFlags_BotLeft   = 1 << 2, // 0x4
    ImDrawCornerFlags_BotRight  = 1 << 3, // 0x8
    ImDrawCornerFlags_Top       = ImDrawCornerFlags_TopLeft | ImDrawCornerFlags_TopRight,   // 0x3
    ImDrawCornerFlags_Bot       = ImDrawCornerFlags_BotLeft | ImDrawCornerFlags_BotRight,   // 0xC
    ImDrawCornerFlags_Left      = ImDrawCornerFlags_TopLeft | ImDrawCornerFlags_BotLeft,    // 0x5
    ImDrawCornerFlags_Right     = ImDrawCornerFlags_TopRight | ImDrawCornerFlags_BotRight,  // 0xA
    ImDrawCornerFlags_All       = 0xF     // In your function calls you may use ~0 (= all bits sets) instead of ImDrawCornerFlags_All, as a convenience
};

Since the styling system doesn't allow customizing Button() this way currently you'd need to copy ButtonEx() into your own code (using imgui_internal.h) and adapt however you want it.

Thanks 馃憤 That works great 馃槃

Was this page helpful?
5 / 5 - 1 ratings

Related issues

dowit picture dowit  路  3Comments

Folling picture Folling  路  3Comments

the-lay picture the-lay  路  3Comments

noche-x picture noche-x  路  3Comments

GrammarLord picture GrammarLord  路  3Comments