UI界面容器详解

在Touch Designer中的UI界面的制作,为了使得项目的整体结构清晰,需要按实行功能封装起来。那我们就需要使用过Container进行包装,在touch designer中涉及到三个据有相似功能的Node分别是Container、Widget、Opviewer。

一、基本介绍

  1. Container:将多个【button】、【Filed】、【text】等UI相关的Node组合在一起,通过控制参数一起移动、缩放。总的来说Container就是组织和管理Widges的一种特殊的Widget,用于包含其他widget;
  2. Widget:Widget是UI界面的基本元素,其中【button】、【Filed】、【text】等都是widget类型,用于构建自己想要的UI基础元素;根本上来说它与Container没有丝毫区别;
  3. Opviewer
    • 查看器,主要的作用就是使得【CHOP】、【SOP】成为UI的一部分,并且在UI界面可以直接进行交互,例如图中,可直接在UI界面修改Text;(TIPS:每一个【Opviewer只对应一个【CHOP】或【SOP】)
    • 当我们在UI中设置用图片充当背景时,选择先用【Opviewer】进行一次包装,然后再使用,那么背景图片不会产生形变;(需要关闭【Interaction】或者【Draw TOP Directl】不然一样可以交互,在UI界面可以移动图片)

二、Node的使用

  1. 参数面板(官网的节点介绍很详细,在此就不一一赘述,只演示比较有意思的几处)
    • Fixed Aspect:固定纵横比,可选择水平/垂直,再通过修改【Aspect Ratio】设置比例;
    • Depth Layer: 当多个widget处于同一图层时,通过设置该值,进行同层排序;
    • Parent Alignment:父类对齐时是否忽略,若忽略着不会受到父类布局的影响;配合【Align Order】如同【Depth Layer】通过设置值的大小进行排序;(TIPS:可通过动态修改发此值,在编辑界面通过Widget本身的坐标信息进行排序,相比之下就很直观
    • Post Offset:修改这两个值用于增加在父类上的偏移量。有细心的朋友会发现在【Children】面板上也有一个Offset,可用与增加偏移量;在深入一点就会发现修改Offset之后,在UI面板点击范围有误;
  2. UI组成 (如何将【button】、【Filed】、【text】等加入其中呢?)
    • 通过连线的方式,在widget两端有两个缺口,如上述演示的GIF图,从上端口输出则是表示将此Widget输入到父级,下端口则是接受子集的输入;
    • 直接在一个容器中内部,添加widget(在内部添加,只会显示内部中的所有父级容器);
    • TIPS:若在容器内部,又某些父类容器不想显示出来,则可以在【Panel】面板中将【Display】关闭即可

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注