【open3d】GUI布局

文章目录

• • 基础布局控件
  • 高级Vert
  • 通过回调函数布局

前情提要： 用open3d GUI做三维用户界面开发

基础布局控件

在open3d中，Vert是最基础的布局方式，即自上向下进行堆叠。

与 Vert相对应的是 Horiz，即水平排放。

import open3d as o3d
import open3d.visualization.gui as gui
import open3d.visualization.rendering as rendering
app = gui.Application.instance
app.initialize()

win = app.create_window(“Horiz”, 500, 250)
h = gui.Horiz()
for i in range(5):
v = gui.Vert(1)
for j in range(i):
btn = gui.Button(f"{ i}{ j}")
v.add_child(btn)
h.add_child(v)

win.add_child(h)

app.run()

效果如下

即 Horiz表示横向排列，而且默认自右向左分布；Vert表示纵向排列，且纵向排列的方式并不是居中对齐，而是向上对齐。

在Horiz和Vert的构造函数中，只有两个参量，分别是spacing和Margins，分别用于设定内部元素之间的距离和布局外侧的边框。

高级Vert

对于Vert布局，open3d提供了一系列相对高级的布局方式，包括

• CollapsableVert 可折叠的Vert
• ScrollableVert 可滑动的Vert
• VGridGrid 可分配网格的Vert

如将上述代码中的Vert分别换为这这三种布局方式，则其效果如下，一目了然

CollapsableVert	ScrollableVert	VGridGrid

win = app.create_window("Horiz", 300, 200)
h = gui.Horiz(10)
for i in range(5,10):
  #v = gui.CollapsableVert(str(i))
  #v = gui.ScrollableVert()
  v = gui.VGrid(2)
  for j in range(i):
      btn = gui.Button(f"{i}{j}")
      v.add_child(btn)
  h.add_child(v)

win.add_child(h)
app.run()

通过回调函数布局

窗口Window通过add_child来添加控件，这个我们已经知道了，而且已经用过了。

但这个过程其实并未指定布局控件所在的位置，所以看上去并不和谐。为了弥补这种缺陷，o3d提供了用于布局的回调函数set_on_layout，由于其输入参数中需要包含一个self对象，故而需要写在类中，示例如下

import open3d as o3d
import open3d.visualization.gui as gui
import open3d.visualization.rendering as rendering
app = gui.Application.instance

class App:
def init(self):
app.initialize()
self.window = app.create_window(“layout”,800,350)
w = self.window
self.horiz = gui.Horiz()
self.verts = []
for i in range(10):
self.verts.append(gui.Vert(0))
for j in range(5):
self.verts[i].add_child(gui.Button(f"{ i}{ j}"))
# 布局回调函数
w.set_on_layout(self._on_layout)
for i in range(10):
w.add_child(self.verts[i])
def _on_layout(self, LC):
x = 0
y = self.window.content_rect.y
for i in range(10):
size = self.verts[i].calc_preferred_size(
LC, gui.Widget.Constraints())
self.verts[i].frame = gui.Rect(x,y,size.width, size.height)
x += size.width*1.5
def run(self):
app.run()

App().run()

效果为

其中，calc_preferred_size用于获取布局控件的最佳尺寸；布局控件的frame表示放置的位置和尺寸。