Unexpected output from DrawList->PathArcTo

[matthewcrews]

Version/Branch of Dear ImGui:

Version 1.90.1, Branch: docking

Back-ends:

imgui_impl_sdl2.cpp + imgui_impl_opengl3.cpp

Compiler, OS:

Windows 11 MSVC 2022

Full config/build information:

Dear Imgui -> Dear Bindings -> Odin Imgui

dear_bindings: https://github.com/dearimgui/dear_bindings
Odin Imgui: https://gitlab.com/L-4/odin-imgui

Details:

My Issue/Question:

I am attempting to draw a red wedge from Pi to 3/2Pi. It should look like this:

I am attempting to use the DrawList->PathArcTo API to do this since it appeared to be the closest fit. I assumed that the a_min and a_max arguments were in Radians. Code is in Odin:

draw_list := imgui.GetWindowDrawList()
center := [2]f32{400, 400}
dial_radius: f32 = 150

red_start : f32 = 1.0 * math.PI
red_end : f32 = 1.5 * math.PI
red_color := imgui.ColorConvertFloat4ToU32({1.0, 0, 0, 1.0})
imgui.DrawList_PathArcTo(draw_list, center, dial_radius, red_start, red_end)
imgui.DrawList_PathLineTo(draw_list, center)
imgui.DrawList_PathFillConvex(draw_list, red_color)

The result that I am getting is:

Which is so far off I believe I have a fundamental misunderstanding of how PathArcTo actually works.

The ultimate goal is to draw a color coded speed dial but I saw this as the first step. The ultimate goal is the following:

The code I used to attempt this shaped is this:

total_radians: f32 = 1.5 * math.PI
red_start: f32 = math.PI * 0.75
yellow_start: f32 = redzone_start + total_radians * 0.8
green_start: f32 = redzone_start + total_radians * 0.9
green_end: f32 = total_radians

// Draw the Redzone
dial_radius: f32 = 150
center := [2]f32{400, 400}
total_radians: f32 = 1.5 * math.PI
red_start: f32 = math.PI * 0.75
yellow_start: f32 = red_start + total_radians * 0.8
green_start: f32 = red_start + total_radians * 0.9
green_end: f32 = total_radians
draw_list := imgui.GetWindowDrawList()

// Draw the Redzone
red_color := imgui.ColorConvertFloat4ToU32({1.0, 0, 0, 1.0})
imgui.DrawList_PathArcTo(draw_list, center, dial_radius, red_start, yellow_start)
imgui.DrawList_PathLineTo(draw_list, center)
imgui.DrawList_PathFillConvex(draw_list, red_color)

// Draw the Yellow Zone
yellow_color := imgui.ColorConvertFloat4ToU32({1.0, 1.0, 0.0, 1.0})
imgui.DrawList_PathArcTo(draw_list, center, dial_radius, yellow_start, green_start)
imgui.DrawList_PathLineTo(draw_list, center)
imgui.DrawList_PathFillConvex(draw_list, yellow_color)

// Draw the Green Zone
green_color := imgui.ColorConvertFloat4ToU32({0.0, 1.0, 0.0, 1.0})
imgui.DrawList_PathArcTo(draw_list, center, dial_radius, green_start, green_end)
imgui.DrawList_PathLineTo(draw_list, center)
imgui.DrawList_PathFillConvex(draw_list, green_color)

Which renders this:

Even my initial attempt at the red wedge is so far off that I think I lack some fundamental understanding.

Screenshots/Video:

No response

Minimal, Complete and Verifiable Example code:

// Here's some code anyone can copy and paste to reproduce your issue
draw_list := imgui.GetWindowDrawList()
center := [2]f32{400, 400}
dial_radius: f32 = 150

red_start : f32 = 1.0 * math.PI
red_end : f32 = 1.5 * math.PI
red_color := imgui.ColorConvertFloat4ToU32({1.0, 0, 0, 1.0})
imgui.DrawList_PathArcTo(draw_list, center, dial_radius, red_start, red_end)
imgui.DrawList_PathLineTo(draw_list, center)
imgui.DrawList_PathFillConvex(draw_list, red_color)

[GamingMinds-DanielC]

The red wedge is probably just a coordinate space issue combined with clipping. The positions are in screen space, not local to your window, so you will need to adjust your center position accordingly.

In addition to the wrong coordinate space, your 3 color pie chart has a simple math problem. Your green_end is just total_radians instead of red_start + total_radians, making it go counter clockwise and covering the yellow part underneath it.

The red part in your 3 color pie chart doesn't go through the center because you call PathFillConvex on a non-convex path. You need the concave version for that. It was introduced in 1.90.5, so you would need to update your library and bindings first. Or split your concave part into multiple convex parts.

[matthewcrews]

Thanks! That's the insight I needed. I got it working now.