【TouchGFX Designer】画布视图

画布是通过提供界面在运行时的外观的直观表示,用于构建应用程序图形部分的视图。这里介绍了动态方面,例如动画和系统各部分之间的交互。

                                                                                                                                                                                               TouchGFX Designer的画布视图

左侧栏

左侧的侧栏包含一个标签控件,可导航至 Widgets 和 Screens Custom Containers

小部件

左侧栏中的“窗口小部件”选项卡包含按类别分组的所有可用窗口小部件。可以通过按类别名称旁边的V形展开和折叠每个类别。

单击一个小部件,会将其添加到当前选中并可见的“屏幕”或“自定义容器”的画布中。也可以通过将小部件直接拖动到画布来添加小部件。

             左侧栏中的小部件

屏幕和自定义容器

“屏幕”选项卡和“自定义容器”选项卡都包含一棵树,该树提供了每个屏幕/自定义容器中的窗口小部件的概述,可以通过按窗口小部件名称旁边的V形符号来折叠树中可以包含其他窗口小部件的每个窗口小部件。

可以通过将屏幕,自定义容器和窗口小部件的顺序拖动到其他屏幕,自定义容器和窗口小部件的下方或上方来更改它们的顺序,也可以使用窗口小部件顺序控件来更改顺序更改小部件的顺序将确定在其他小部件之上呈现哪些小部件。

容器类型的小部件可以通过在树视图中将小部件拖动到其顶部来添加子级。窗口小部件也可以从一个屏幕拖动到另一个屏幕。

在单击小部件的同时按住CTRL键可以选择多个小部件。

通过按带有加号的蓝色图标,可以将屏幕/自定义容器添加到项目中。可以从“窗口小部件”选项卡将“自定义容器”添加到屏幕和其他自定义容器,它们可以在自己的名为“自定义容器”的类别中找到。

              左侧栏中的屏幕树

画布

视图的中心包含画布,该画布显示当前选择的屏幕或自定义容器的视图。

画布被各种控件围绕:小部件顺序控件内容剪切控件历史记录控件缩放控件

                                                                                     画布视图中的画布

小部件选择

如上面的动画所示,只需在画布上单击即可选择小部件。在按住CTRL键盘的同时单击多个小部件,也可以进行多选

小部件定位

如上面的动画所示,可以通过拖动小部件的拇指来移动小部件并调整其大小。

也可以使用箭头键将所选的小部件移动1个像素。CTRL在使用箭头键的同时按住不放将使所选小部件移动10像素。

小部件顺序控件

窗口小部件的z顺序可以通过“向前移动”和“向后发送”控件进行操作,这也可以在“屏幕”或“自定义容器”树中更改其顺序。

也可以通过按 CTRL + F

向后发送也可以通过按 CTRL + B

                 

在“画布”视图中实现前进和后退控件

内容剪辑控制

在画布中,屏幕边界之外的小部件,“自定义容器”和容器类型小部件的子级均被裁剪。内容剪切控件在完全剪切小部件或部分显示它们之间切换。

                         

在“画布”视图中显示/隐藏剪辑的内容控件

在下面的图像中,Box放置在屏幕边框的中间,当内容裁剪控件设置为显示裁剪的小部件时,Box不会完全显示,而是使外部的部分不饱和。

   显示和隐藏剪辑的内容时,框小部件的外观差异

历史控制

可以通过位于画布顶部中心的历史记录控件来撤消和重做在画布上执行的更改的历史记录。
每个屏幕和自定义容器都维护自己的历史记录,因此,要撤消或重做在特定屏幕上执行的更改,必须在画布上可见该特定屏幕。

历史记录控件也可以通过按CTRL + Z来触发CTRL + Y

           

画布视图中的历史记录控件

缩放控制

可以使用画布左下角的缩放控件来控制画布的缩放级别。要返回100%缩放,请按缩放滑块标签“ 1:1”旁边的按钮。

缩放也可以通过使用 CTRL + MOUSE WHEEL

                       画布视图中的缩放控件

右侧栏

右侧的侧栏包含一个选项卡控件,可导航至当前选定的小部件的“ 属性 ”以及当前在画布上查看的“屏幕或自定义容器” 交互作用

属性

“属性”选项卡将显示当前选定的“小部件/屏幕/自定义容器”的属性。所选组件的名称显示在属性列表的顶部,名称旁边有一个问号图标。单击此问号图标将展开该部分,以显示描述文字和指向组件文档的链接。

可以通过按节名称旁边的chrevron折叠和展开属性列表中的每个节。

                盒子的属性

交互

“交互”选项卡将显示当前显示在画布上的“屏幕”或“自定义容器”的交互。可以按顶部的问号,以显示交互的描述和文章的链接。

可以通过按标有“添加交互”的蓝色按钮来添加交互。通过按下交互名称旁边的V形符号,可以折叠和展开每个交互。在人字形旁边,有一个叉形,单击该叉形将删除交互。

                   屏幕互动

原文地址:https://www.cnblogs.com/skullboyer/p/13430962.html