【TouchDesigner】Component的使用

最新推荐文章于 2021-09-21 00:46:52 发布
最新推荐文章于 2021-09-21 00:46:52 发布
阅读量1.4k 收藏 8
点赞数 3
分类专栏： 多媒体互动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangpuqing1997/article/details/106011186
版权

文章目录

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中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
分别切割

在这里插入图片描述

普神
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【TouchDesigner学习笔记与资料】
wangpuqing1997的博客
04-09 3万+
TouchDesigner是什么？ 简单来说就是一种可视化的编程语言。TD 是一种编程语言。TD 不是一个 APP 应用程序，像一 般程序那样可以很容易的开始执行动作。touchdesigner 是基于节点的图形化编程软件。这意味着，我们 不用打开一个文本文档然后一行行敲代码，TD 用图形化界面来通过节点创建程序。TD 的每 一个节点或 OP 元件，执行一个具体的，小的，独立动作。实现一个整体功能...
TouchDesigner学习 Comp元件的应用
我知道你很急,但是路要一步步走
07-07 1322
效果如图所示： 需要注意的是： 例如怎么将这个Button 的值给映射到 switch 的值：
TouchDesigner学习 Composite
我知道你很急,但是路要一步步走
06-30 718
2.
TouchDesigner 学习 快捷键
我知道你很急,但是路要一步步走
06-19 4889
入门学习视频：http://www.touchdesigner.co/beginner 下载 TouchDesigner：https://www.derivative.ca/099/Downloads/ tap 弹出op h 居中 op u 进入 op i 弹出 op p 关闭op 细节面板 space 播放/暂停 ...
TouchDesigner 学习
weixin_36628428的博客
09-21 503
先开坑 初级教程 - TouchDesigner 中文社区 TouchDesigner 中文社区
TouchDesigner学习 copy SOP
我知道你很急,但是路要一步步走
09-30 614
touchdesigner蝴蝶招手
09-23
1. **网络组件（Network Component）**：TouchDesigner项目的基础，用于组织和管理各个组件之间的关系。项目中的蝴蝶可能分布在不同的网络节点上，通过网络组件进行通信和协调。 2. **几何生成器（Geometry ...
touchdesigner-learning-opencv
05-19
Python COM Server节点允许我们在一个独立的Python进程中运行代码，并通过COM（Component Object Model）协议与TouchDesigner通信；Python TOP节点则直接在TouchDesigner内部执行Python脚本，方便快速原型设计。 在...
Behavior Designer Component.zip
04-01
是为了让设计师，程序员，美术人员方便使用的可视化编辑器！Behavior Designer 提供了强大的 API 可以让你轻松的创建 tasks（任务），配合 uScript 和 PlayMaker 这样的插件，可以不费吹灰之力就能够创建出强大的 AI...
vue component组件使用方法详解
08-29
Vue Component 组件使用方法详解 Vue Component 是 Vue.js 中最强大的功能之一，允许开发者扩展 HTML 元素，封装可重用的代码。本文将详细介绍 Vue Component 的使用方法，包括全局注册、局部注册、模板解析、数据...
Touchdesigner读取文件视频并自动播放
03-09
Touchdesigner读取文件视频并自动播放。 TD中用DAT读取文件，接受CHOP文件的选择控制，并用TOP显示视频。
浅析vue component 组件使用
08-31
"浅析Vue Component 组件使用" Vue Component 组件是 Vue.js 框架中的一种核心概念，它允许开发者将用户界面拆分成小的、可重用的部分，使得代码更加模块化和易于维护。下面是对 Vue Component 组件使用的详细分析...
RT-Thread学习笔记之二：使用TouchGFX Designer和Visual Studio 2017修改GUI
Ye0522的博客
02-27 827
RT-Thread学习笔记之二：使用TouchGFX Designer和Visual Studio 2017修改GUI 上周文章给自己挖了个坑：如何修改GUI，今天来填坑。 学习目标： 1、修改GUI 2、更新到开发板 目录RT-Thread学习笔记之二：使用TouchGFX Designer和Visual Studio 2017修改GUI前言一、准备二、步骤1.打开工程2.用TouchGFX Designer修改GUI3.用VS2017修改GUI总结 前言 提示：这里可以添加本文要记录的大概内容：
TouchDesigner案例（八）霓虹灯
小姑娘不爱写代码
03-16 556
欢迎大家一起讨论技术Q 1390659165
使用代码制作东西2：处理（和一些TouchDesigner）
专业的开发者“讨论”
06-03 1507
第1部分在这里 通过代码讲故事 在过去的一个月中，我一直在尝试学习如何使用代码讲故事。 由于生成艺术太抽象了，无法讲述视觉故事，因此它更像是一种艺术形式，而不是科学。 我写了两个短故事，下面链接。 本文的其余部分将讨论从这些故事中挑选出的一些作品，以及它们的创作过程。 https://twitter.com/adams_bram/status/1198336132787...
【TouchDesigner】Instacne功能的实践
wangpuqing1997的博客
04-26 919
文章目录Instance功能的实践 Instance功能的实践 TouchDesigner：教程地址 这个教程介绍了关于Geometry COMP中的Instance功能来完成复杂的Clone效果。 Instance 与 相关DAT元件的接入 不同MAT的相关功能 将不同的颜色值赋予每个独立的实例 Window COMP的功能详解 流程 ...
【TouchDesigner】Feedback的应用NO.3
wangpuqing1997的博客
04-28 776
文章目录Feedback的应用NO.3 Feedback的应用NO.3 TouchDesigner：教程地址 这个教程介绍了Feedback TOP的功能和运用。 用按钮切换不同的分辨率 CHOP Execute DAT的用法 打开Webbrowser文件及所需的python代码 流程 创建Text 写入如上内容 创建examine1 DAT ，examine元件可以查看相对节点的变量 ...
TouchDesigner简述
热门推荐
EdwinLee01的博客
04-08 1万+
目录 此片文章目的。 TouchDesigner简介。 应用产业以及相关案例。 技术成本代价。 1. 此片文章目的： 由于国内市场情况，此类技术目前在国内未被广泛应用。但是随着未来消费者对体验，效果要求越来越高，包括并类似于此软件的应用将会得到更多重视。所以文章通过此软件的简述，旨在让上级了解此类技术。为现在或者后期未来市场或者需求问题来临的时候，有此类解决方案以供参考。（文章中对于市场等等说...
【TouchDesigner笔记】NO.1
wangpuqing1997的博客
04-07 4411
TouchDesigner中文教程官方网站：中文官方网站链接 TouchDesigner官方网站：官方网站 TouchDesigner可以做什么？ 投影艺术，视觉呈现，投影艺术，实时3D生成艺术，应用设计，大型互动装置，电影应用。 界面 WIKI： 维基 FORUM： 论坛 TUTORIALS: 教程 Node（OP）： 节点 Parameter： 参数 Network： 网络 ...
@Component使用
最新发布
07-11
这个字节串可能表示一个名称为"springboot@component使用"的东西。其中，"\xe4\xbd\xbf\xe7\x94\xa8"这部分是UTF-8编码后的汉字"使用"，意思是"使用"。因此，该字节串可能表示一个使用Spring Boot组件的内容或说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值