【TouchDesigner】Component的使用
Component的使用（1）
第一部分着重介绍Table COMP的使用，包括其外观的修改以及用单元格点击来触发事件。
- 利用Table DAT定义Table COMP单元格的内容
- 利用Panel Execute DAT检测cellradioid的变化
- 在Panel Execute DAT当中添加对Select DAT参数的改变
流程
创建 table1 COMP，table2 DAT 元件
可将table1改为1列
进入table1，创建cellID（table）DAT
创建 panelexec1 DAT
在panelexec1参数面板Panel Value 选择cellradioid
更改panelexec1参数面板
在panelexec1中写入如上代码，将点击table1的值写入到cellID中
创建table1 DAT
在table1中写入如上代码
table1连接cell_attributes
复制cell 得到cellOn
复制粘贴cellOn_default1得到cellOn_default1
修改cellOn的内容，将cell_default改为cellOn_default
修改cellOn_default的bgcolor 数值
创建out1 DAT
创建 p1（table）DAT 写入如上内容
复制三个表格p2,p3,p4
创建select1 DAT
通过选择table1上不同的button来让select选择不同的数据（p1,p2,p3,p4）
Component的使用（1）
第二部分会简单讲解Window COMP的几个重要参数，此后两部分还会围绕Window COMP分享一些现场项目的解决方案。
- Window COMP调整位置和大小
- 如何在Window COMP进行全屏、免框和置顶的设置
- 如何设置成Perform Mode
流程
创建 moviefilein1 TOP与container1，window1，window2 COMP
进入container1创建moviefilein1
将container1的Background TOP设置为下一级的moviefilein1
显示
Monitor是显示器的序号
Justify Horizontal与Justify Vertical表示画面对齐屏幕的方式
offset 表示对齐屏幕的间距
Opening Size 表示开始打开时候的大小，可根据输入的元件大小，可铺满，也可自定义
Borders 点击后可以去除边框
Always on Top 可以避免别的程序跳出遮挡画面
Component的使用（3）
第三部分中会搭建一个在Perform Mode下，包含主画面和控制界面的基本系统。
- Container COMP 元件的参数和功能
- 利用Replicator COMP来复制若干Button COMP
- Perform Window的设置
流程
要实现的内容
创建 ctrl_disp（container）COMP,更改长宽
进入ctrl_disp 创建final（container1），长宽与ctrl_ctrl_disp保持一致
创建interface（container），长度设置为final的一半，宽度不变
复制粘贴interface 得到output
更改背景色
final的对齐方式改为从左到右
进入output创建moviefilein1与bg（null） TOP
output背景选择bg
进入interface创建 buttons，preview（container）
区分出背景颜色
更改preview长度为240
更改interface 的对齐方式为从左到右
进入buttons创建table1 DAT，button1，replicator1 COMP
修改table1为48行1列
忽略第一行
对齐方式为从左到右 ，最大单元为8
进入preview创建container1，高度为preview的一半
增加边框
对齐方式改为从上到下
将ctrl_disp拖给perform
Component的使用（4）
第四部分中，将在上一部分的基础上，利用Select COMP实现多个操作界面的切换。
- Knob COMP替换Button COMP
- 利用Panel Execute DAT检测radio的变量
- 实现二选一的功能
复制粘贴ctrl_disppanelSelects
复制粘贴knobs
创建knob（slider）COMP
table1改成70行1列
knobs改为一行最大10个
创建select1 将knobs拖给select1
选中buttons与knobs 将Display关闭
更改preview的align Order数值
创建container1 COMP
修改container1的参数面板
进入container1创建buttons
进入buttons 修改bg的文本
复制粘贴knobs
修改bg文本
修改container1对齐方式为从左到右
*******、
选中buttons与knobs 改变Button Type为 Radio Down
创建panelexec1 DAT 修改参数面板
在panelexec1写入如上代码
Component的使用（5）
最后一部分中，分享一个高分辨率、非标准长宽比输出的解决方案。
- 利用固定分辨率的Constant TOP和Composite TOP调整图像分辨率，使其等于4个HD图像横向排列时的长宽比（(16*4):9）
- 使用Crop TOP将图像切割成四块，放入Container COMP构成的四个象限
- 在output中进行设置，将四个象限重新排列成标准长宽比的输出
流程
复制粘贴一个panelselects得到panelselects1
添加一个图片
创建constant1 TOP，设置分辨率为1280*180 删除bg
创建 comp1 TOP
修改comp1的参数面板
创建 quad1 （container）COMP，设置长宽为output长宽的一半
进入quad1创建text TOP 修改参数面板
创建null TOP改名bg
quad1背景显示为bg
复制出4个quad
将output对齐方式改成从左到右
创建null1 TOP
创建select1 TOP
将null1拖给select1
创建 crop1 TOP
将图片切割四分之一
将这三个元件分别复制到quad中
分别切割