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

1. 创建窗口

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

def __init__(self):
    gui.Application.instance.initialize()
    self<span class="token punctuation">.</span>window <span class="token operator">=</span> gui<span class="token punctuation">.</span>Application<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">"layout"</span><span class="token punctuation">,</span><span class="token number">800</span><span class="token punctuation">,</span><span class="token number">600</span><span class="token punctuation">)</span>
    w <span class="token operator">=</span> self<span class="token punctuation">.</span>window
    em <span class="token operator">=</span> w<span class="token punctuation">.</span>theme<span class="token punctuation">.</span>font_size

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

# 右侧面板
self._pannel = gui.Vert(0, gui.Margins(0.25em,0.25em,0.25em,0.254em))
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  x 
  

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.25em,0.25em,0.25em,0.254em))
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()