[ocornut/imgui]如何使用DrawList显示表格数据?

2024-05-09 77 views
8

大家好!我有表格数据(随着新信息的出现而更新)我想知道如何在图表上显示它

我们有很好的方法,例如 AddRectFilled AddLine 等,但是如果我需要绘制表格怎么办?

如果有的话,我的桌子看起来很简单:

图像

当然,我可以写一些类似于drawtext的东西,然后在y坐标上绘制,然后再次绘制text,但是使用表格会更方便,因为我可以立即更新整个表格中的数据

先感谢您!

回答

7

ImDrawList仅适用于低级绘图例程,我觉得绘制表格数据不属于其职责范围。

ImDrawList您不使用绘制图表和表格的新表格 API是否有原因?


顺便说一句,你研究过ImPlot吗?它可能已经提供了您需要的功能。

3

就我个人而言,我什至不明白问题是什么:(

8

ImDrawList您不使用绘制图表和表格的新表格 API是否有原因?

顺便说一句,你研究过ImPlot吗?它可能已经提供了您需要的功能。

我不知道如何使用这两个东西。没有 AddDrawTable 函数我查看了 api 表,但没有任何东西可以渲染它们

另外,我正在观看 implot (项目参与者之一建议我使用表格),所以现在该项目不提供此选项

ImDrawList 仅适用于低级绘图例程,我觉得绘制表格数据不属于其职责范围。

我明白,但是多次绘制DrawText非常不方便(而且更新也有困难)

如果有像AddDrawTable这样的东西会很方便

也许你可以建议如何解决这个问题

就我个人而言,我什至不明白问题是什么:(

如何使用 ImDrawList 绘制表格数据(表格)

8

如何使用 ImDrawList 绘制表格数据(表格)

抱歉,这没有什么意义,可能是一个XY Problem。您的问题为您可能尚未解释的问题提出了一种具体的解决方案。目前尚不清楚为什么您专注于 ImDrawList API 而不是使用BeginTable().

7

如何使用 ImDrawList 绘制表格数据(表格) 很抱歉,这没有什么意义,可能是一个XY Problem。您的问题为您可能尚未解释的问题提出了一种具体的解决方案。目前尚不清楚为什么您专注于 >ImDrawList API 而不是使用BeginTable().

抱歉,我应该添加我使用 Implot 并且这个库通过 DrawList 绘制所有内容我打算继续使用这个库所以我专注于 DrawList 我需要的不仅仅是显示一个表格而是将其绘制在图表上或者我们会想出其他办法的

4

我认为如果您向我们展示您已经完成的工作以及您想要完成的工作的草图,将会有很大帮助。

9

那么我开始吧,也许这个问题应该变得更加笼统。如何绘制表格数据?

我现在的解决方案是这样的:(出于某种原因,我认为这是非常次优的,也许我们可以做得更好)

struct MyDataInTableRow
{
    int x1;
    int x2;
};

namespace MyImPlot {

    void PlotTable() 
    {
        // get implot draw list
        // ImGui window DrawList
        ImDrawList* DrawList = ImPlot::GetPlotDrawList();

        // my table data
        std::vector<MyDataInTableRow> table = {
            {10, 20},
            {21 , 32},
        };

        std::string str = "";

        float x = ImPlot::PlotToPixels({ 1,1 }).x;
        float y = ImPlot::PlotToPixels({ 1,1 }).y;

        for (auto& element : table) {

            str = std::to_string(element.x1) + " " + std::to_string(element.x2);

            DrawList->AddText( ImVec2(x, y) , ImColor(253.0f, 1.0f, 255.0f, 1.0f), str.c_str());

            y = ImPlot::PlotToPixels({ 1 , 1 + 0.1 }).y;
        }
    }
}

多亏了这个解决方案,我得到了这样的结果:

图像

我感觉这是一个非常糟糕的解决方案(请注意,当您缩放行时,行开始粘在一起)

也许我们可以以某种方式绘制表格本身,我只需要显示两列数字......

总的来说,我现在的主要问题是如何在图表上绘制表格数据,以便它很快并且当我的行不粘在一起时

2

(出于某种原因,我认为这是非常次优的,也许我们可以做得更好)

您这么认为的原因是什么?你有被表演伤害过吗?

(请注意,当您缩放时,行开始粘在一起)

缩小时您期望的正确结果应该是什么?也许你的+0.1f偏移需要调整以补偿变焦..

在我看来,您似乎拥有所有必要的理解和工具来完成您需要的事情,但是绘图显示和“表格数据”之间的确切交互是不明确的,因此我们不确切知道您需要什么或不需要什么您现有的解决方案就足够了。

从技术上讲,您可以使用 Begin()/BeginChild() 与 ImPlot 创建的子窗口使用的 ID 相同,以“附加”到该窗口中,然后使用 SetCursorScreenPos() + BeginTable() 并在其上绘制表格叠加层。或者您可以自己创建一个不可见的“无输入、无背景、无装饰”窗口,将其放置在绘图上,并在其中绘制表格。您可以做的事情有无数种变化。

4

也许你的+0.1f偏移需要调整以补偿变焦..

感谢您的支持!

你能告诉我该怎么做吗?我还不太熟悉整个 API

7

@ClaasJG 链接中的屏幕截图和图表名称正是我所要求的。如果您对自己的需求非常模糊,我们无法帮助您,渲染 10,000 列的 Excel 工作表和股票交易图表上的少数数字之间存在巨大差异。我们无法了解您的真实需求。

我感觉这是一个非常糟糕的解决方案

这对我来说看起来很好。随着时间的推移,字符串连接可能会形成一个复杂的图形,但是如果出现问题,可以通过调整该方面来解决。

我赞同 Omar:如果您没有任何性能问题,就不必太担心感知到的性能问题。

根据您在https://github.com/epezent/implot/issues/253中尝试完成的任务,我认为使用 Dear ImGui 的表 API 实际上可能是更难/性能较差的路线,因为您的表非常简单。 (我什至可以说,它们一开始就几乎不能被视为桌子。)

(请注意,当您缩放时,行开始粘在一起)

你的文本最终不可避免地会挤在一起,因为你没有改变大小或(正如奥马尔提到的)偏移量。

我们无法猜测哪一个在您的场景中最有意义。看看其他足迹交易图表的图片,我猜文本缩放就是您想要的。

你能告诉我该怎么做吗?

如果您想采用文本缩放路线,可以使用AddText允许调整大小的超载。 (您可以指定nullptr使用font默认字体。)

至于根据绘图比例缩放偏移或文本大小,这更多是 ImPlot 问题。但是我很确定预期的方法是使用PlotToPixels两次不同的偏移量(即:文本的顶部和底部)并使用差异。