Open3D-GUI系列教程（三）界面布局

界面布局

open3d版本：0.14.1

open3d的gui界面可以通过gui.Window.set_on_layout()来精准控制窗口中子控件的布局。

1. 创建窗口

首先还是先把框架搭起来：

def __init__(self):
    gui.Application.instance.initialize()

        self.window = gui.Application.instance.create_window("layout",800,600)
        w = self.window
        em = w.theme.font_size

        # 渲染窗口
        self._scene = gui.SceneWidget()
        self._scene.scene = rendering.Open3DScene(w.renderer)

        # 右侧面板
        self._pannel = gui.Vert(0, gui.Margins(0.25*em,0.25*em,0.25*em,0.254*em))
        for i in range(15):
            self._pannel.add_child(gui.Label(f"{i}-th label"))
        
        self._button = gui.Button("button")  
        ...

这里首先通过gui.Application.instance.create_window()创建了一个应用窗口，紧接着创建了一个渲染控件、面板和按钮用来布局在这个窗口之上。

2. 设置布局回调函数

通过set_on_layout()设置一个回调函数，用以在窗口中手动放置子控件的框架。

这个回调函数具有一个gui.LayoutContext的参数，并且没有返回值。

		# 设置布局回调函数
        w.set_on_layout(self._on_layout)
        w.add_child(self._scene)
        w.add_child(self._pannel)
        w.add_child(self._button)

首先设置回调函数，然后在向窗口中添加子控件。

3. 定义回调函数：

def _on_layout(self, layout_context):
        #   在on_layout回调函数中应正确设置所有子对象的框架(position + size)，
        #   回调结束之后才会布局孙子对象。

首先我们获取应用窗口的框架大小，让渲染窗口占满整个框架：

		r = self.window.content_rect
    	self._scene.frame = r

然后来布局右侧面板，我们让这个面板的宽度为17个标准单位的大小，高度取最优大小，并且靠在窗口的最右侧。

		pannel_width = 17*layout_context.theme.font_size
        pannel_height = min(
            r.height, 
            self._pannel.calc_preferred_size(layout_context, gui.Widget.Constraints()).height
            )
        self._pannel.frame = gui.Rect(r.get_right()-pannel_width,r.y,pannel_width,pannel_height)

• 对于高度，首先计算控件的首选高度，然后和窗口高度取最小值，放置超出窗口的边界。

• 计算出控件的宽、高度后，就可以通过gui.Rect(left, up width, height)来设置框架。

  窗口左上角为(0,0)，同时r.x = 0,r.y = 0

  通过r.get_right()-pannel_width就可以得到左上的$x$。

gui模块中的widget都有函数calc_preferred_size()，用来计算这个控件的首选大小。定义如下：

• calc_preferred_size(self, arg0, arg1)

  self: gui.Widget

  arg0: gui.LayoutContext

  arg1: gui.Widget.Constraints

  返回值: gui.Size

最后将按钮放置在屏幕的左下角，同样：

		button_pref = self._button.calc_preferred_size(layout_context, gui.Widget.Constraints())
        self._button.frame = gui.Rect(r.x,r.get_bottom()-button_pref.height, button_pref.width,button_pref.height)

这里直接计算button的首选大小，(r.x, r.get_bottom()-button_pref.height)构成左上角顶点。

运行结果

完整代码：

import open3d as o3d
import open3d.visualization.gui as gui
import open3d.visualization.rendering as rendering

class App:
    def __init__(self):
        gui.Application.instance.initialize()

        self.window = gui.Application.instance.create_window("layout",800,600)
        w = self.window
        em = w.theme.font_size

        # 渲染窗口
        self._scene = gui.SceneWidget()
        self._scene.scene = rendering.Open3DScene(w.renderer)

        # 右侧面板
        self._pannel = gui.Vert(0, gui.Margins(0.25*em,0.25*em,0.25*em,0.254*em))
        for i in range(15):
            self._pannel.add_child(gui.Label(f"{i}-th label"))
        
        self._button = gui.Button("button")

        # 布局回调函数
        w.set_on_layout(self._on_layout)
        w.add_child(self._scene)
        w.add_child(self._pannel)
        w.add_child(self._button)

    def _on_layout(self, layout_context):
        #   在on_layout回调函数中应正确设置所有子对象的框架(position + size)，
        #   回调结束之后才会布局孙子对象。

        r = self.window.content_rect
        self._scene.frame = r

        pannel_width = 17*layout_context.theme.font_size
        pannel_height = min(
            r.height, self._pannel.calc_preferred_size(
                layout_context, gui.Widget.Constraints()).height
        )
        self._pannel.frame = gui.Rect(r.get_right()-pannel_width,r.y,pannel_width,pannel_height)

        button_pref = self._button.calc_preferred_size(
            layout_context, gui.Widget.Constraints())
        self._button.frame = gui.Rect(r.x,r.get_bottom()-button_pref.height, button_pref.width,button_pref.height)
        print(r.x,r.y)

    def run(self):
        gui.Application.instance.run()
        
if __name__ == "__main__":
    app = App()
    app.run()