克隆元件
克隆器是一个有用的工具,用于从热点、翻译等快速构建菜单。
要克隆元素(如文本框或节点图像),请从工具栏中选择克隆器元素,然后在要克隆的元素周围绘制。
克隆机可以与皮肤的其他部分隔离进行扩展和加工。双击克隆器以展开。展开后,将显示痕迹导航菜单。要返回皮肤,请单击皮肤。
扩展克隆
克隆
克隆方向(Clone Direction)
选择克隆元素重复的方向。从以下选项中选择:
-
水平 – 水平克隆内容。克隆将是无限期的。 -
垂直 – 垂直克隆内容。克隆将是无限期的。 -
单行 – 水平克隆内容,但克隆将在其父级的边界处结束。 -
单列 – 垂直克隆内容,但克隆将在其父级的边界处结束。 -
反转 - 选择以反转克隆元素的方向。对于水平,默认值为从左到右。选择 反转(Invert) 以从右到左更改此值。同样,对于垂直克隆器,默认值是从上到下。反转将从下到上改变克隆元素的方向。 -
反转克隆顺序 – 选择反转时可用。选择以反转克隆顺序。克隆内容的顺序取决于克隆源。
对于节点 ,顺序来自游览浏览器。
对于表 ,顺序基于表行。
对于平面图 ,顺序来自导览地图中的列表。
对于热点 ,顺序来自列表视图。
对于 “翻译”,订单来自“翻译”表。
自动调整大小 – 选择以使克隆程序适应克隆实例的大小(而不是克隆程序本身的大小)。
在父项中居中 - 可用于单行和单列克隆方向。使用此选项将克隆元素置于父元素的中心,以构建分页克隆器(而不是滑动或滚动克隆器)。
过渡
选择 自动调整大小(Auto Size) 后, 过渡(Transition) 将可用。选择 “启用” 以从一个大小的元素过渡到另一个大小的元素。
★ 提示自动大小和过渡可用于手风琴菜单。选择过渡后,子菜单的打开和关闭将被动画化。
时间 – 输入过渡的长度。
水平和垂直
使用此设置可设置克隆程序的重复方式。该设置将根据上述设置中选择的克隆方向而变化。如果克隆方向为 “水平”,则此设置将为 “垂直”,反之亦然。输入列数(或行数 )的值。或者,如果选择了像素或百分比 ,则应在该方向上使用多少父元素。
来源:节点
导览中的节点将用于创建克隆的实例。
然后,克隆实例的元素将从每个游览节点获取其数据。例如,节点图像将显示每个节点的图像,显示用户数据的文本框将从克隆的节点获取数据,等等。
-
筛选器 – 按标签筛选。只有具有所选标签的节点才会在克隆器中使用。
从父克隆器继承筛选器标签 – 如果当前克隆器是嵌套的(另一个克隆器的子级),您可以选择让克隆器使用与其父克隆器相同的筛选标签。
-
活动节点 – 选择滚动查看以始终显示活动节点。
来源:表格
下表中使用的标题和标签将用于克隆实例。
✭ 使用表类型的克隆器也将具有用于逻辑块的触发器。
筛选器 – 按标签筛选。只有具有所选标签的节点才会在克隆器中使用。
使用该表手动定义标记和标题。这将根据节点分配的标签对节点进行分组,以创建菜单组或类别。
例如,您可能想要创建一个菜单,该菜单具有建筑物的每一层的类别。在这种情况下,一楼的每个节点都可能有一个类似 floor1 的标签,而二楼的每个节点都将以 floor2 作为标签。使用该表,我们可以创建两个子菜单;一楼一楼,二楼一楼。对于一楼,选择楼层 1 标记并添加标题“ 一楼 ”。现在,所有标记为 floor1 的节点都有一个菜单类别,菜单标题将为 First Floor。
★ 提示 为了更灵活地排列菜单,请右键单击标记以在所选标记上方插入标记。
“描述”列可用于描述类别。但它也可用于寻址外部图像或添加 URL。例如,添加到资产的图像可以添加到克隆器中。为图像指定一个标题。对于描述,请添加它们的路径:assets/image1.jpg。将外部图像加载器添加到克隆程序,对于外部 URL,将其设置为 $(cdesc)。 要更进一步,您可以向克隆器添加一个文本框并添加占位符 $(ctitle)。
-
暴露 – 选择以在 Web 输出面板的 编辑皮肤配置(Edit Skin Configuration) 菜单中显示表格。 -
描述 – 添加公开表的描述。这将在“编辑蒙皮配置”对话框中显示为标题。 -
跳过空条目 – 选择此选项可不显示任何没有节点的类别。 -
从父克隆器继承筛选器标签 – 如果当前克隆器是嵌套的(另一个克隆器的子级),您可以选择让克隆器使用与其父克隆器相同的筛选标签。 -
活动节点 – 选择滚动查看以始终显示活动节点。
来源:热点
克隆程序将创建所有点热点的列表,提供一种创建菜单以导航到每个点热点的方法。
使用 $(ctitle) 在文本框中显示热点的标题。
过滤器 – 使用热点皮肤 ID 过滤菜单。
来源:翻译
克隆器将创建一个添加到项目中的所有翻译的列表。
使用克隆器中的文本框,添加占位符 $(ctag) 以显示语言代码(即 en-US、de )。
使用占位符 $(ctitle) 显示语言的标题 ;克隆程序同时使用此表中的语言和标题。
资料来源:平面图
克隆程序将创建一个添加到项目的所有平面图的列表。
在文本框中添加平面图 ID 和平面图标题的 $(ctitle)。
使用作“更改地图 ”时,请从 “地图 ID”列表中选择“<Cloner ID>”。
位置
身份证
为元素指定唯一的 ID 或名称。ID 是自动给出的,当添加多个 ID 时,将按数字排序。如果某个 ID 已被另一个元素使用,则输入字段旁边将出现一个警告符号。
点热点模板将有一个菜单,显示所有默认模板 ID 以及项目中使用的任何模板 ID。
★ 提示: 单击警告符号可为该元素创建唯一 ID。
位置
元素的 X 和 Y 坐标。
元素的位置相对于其父元素及其锚定位置(Canvas 是顶级元素的父元素)。
例如,锚定并放置在画布中间的视频将将其锚点设置为中心 ,X 和 Y 设置为 0。因此,如果元素锚定到水平中心,则 X 坐标是从父元素中心到元素水平中心测量的。同样,如果一个元素锚定在右侧,则 x 坐标是从父元素的右侧到元素的右侧测量的,如箭头所示。
★ 提示: 双击箭头将 X 和 Y 设置为
0。这使得精确定位元素变得更加容易,尤其是在播放器的边缘。例如,要使元素保持在播放器的底部中心并与边缘保持一定距离,请将锚点设置为底部中心,并将 Y 值设置为 20 像素,将 X 值设置为 0。
X 和 Y:
-
百分比 – 根据玩家的大小/窗口设置元素位置的单位。 -
像素 – 用于设置元素在蒙皮中的实际位置的单位。 -
CSS – 选择 CSS 作为单位,以允许在添加逻辑块时更改单位或使用计算。
示例:将 x 位置单位设置为 CSS。在编辑字段中输入100px。添加一个逻辑块,选择一个触发器,然后增加20%的大小,有效地切换单元。
锚
使用此网格将元素“粘贴”到播放器窗口的一部分。请参阅上文 ,了解锚点如何影响位置。
大小
热点模板(Hotspot Template) 和 节点标记(Node Marker) 没有大小参数。
以像素为单位调整元素的大小(宽度和高度)。 宽度和高度 :
-
百分比 – 根据玩家的大小/窗口设置元素大小的单位。 -
像素 – 设置元素实际大小的单位。 -
锁定纵横比 – 单击链接图标以在画布中调整大小或在属性面板中更改大小值时锁定元素的大小纵横比。当选择另一个元素时,此按钮将重置为关闭 。 -
CSS – 选择 CSS 作为单位,以允许在添加逻辑块时更改单位或使用计算。
示例:将元素定位在距顶部 50 像素的位置,然后将高度设置为calc(100% - 50px)。然后,该元素将始终与顶部保持相同的距离,即 50px,并将直接向下延伸到底部。
-
重置大小 – 适用于图像、按钮和 SVG 元素。单击以返回图像的原始大小。 -
重置大小/2 – 可用于图像、按钮和 SVG 元素。当您想要将 PNG 或 JPG 添加到项目中,但仍希望它在 Hi-DPI 显示器中看起来清晰时,请使用此选项。例如,如果皮肤需要 32 像素的图像,请使用 64 像素的图像,然后单击重置大小/2。这将使其在皮肤中达到 32 像素,但仍具有高分辨率显示的所有像素。
外观
缩放
沿 x 轴和 y 轴缩放元素。例如,将任一轴上的值加倍,元素的大小将加倍。如果启用了缩放修饰符,则忽略此缩放设置。
中心
使用此网格可以确定元素的缩放方式。默认值设置为中心,以便元素将从其中心缩小或缩小。例如,如果将缩放锚定到左上角,则缩放将从该点居中。
角度
使用此参数调整元素的角度。它将使用中心网格(上图)作为其轴。例如,如果选择中心,它将围绕其中心旋转。如果选择左下角,按钮将围绕该角旋转。
可见
选择或取消选择以使元素保持可见或不可见。可见性或不可见性可以通过作进行更改和切换。
阿尔法
元素的透明度。设置为 1.000 是不透明的。降低此数字将增加元素的透明度。
光标
选择鼠标在元素上滚动时显示的光标。
继承 – 元素将从其父元素继承光标。这是除 Button 和 Seekbar 之外的所有元素的默认设置。
手 – 手形光标将显示。这是 Button 和 Seekbar 元素的 deafult。选中后,光标不会从其父元素继承。
默认 – 选择此选项可强制浏览器的默认光标(通常为箭头)。选中后,光标不会从其父元素继承。
掩蔽
仅容器和矩形元素选择“已启用”以激活掩码。掩码意味着容器或矩形的子元素将在容器或矩形的边界处被裁剪。
可及性
选项卡索引
要使皮肤元素可通过键盘控制,必须将它们添加到网页的 Tab 键顺序中。制表符索引 -1(默认值)会从 Tab 键顺序中排除该元素。制表符索引 0 将元素包含在制表符顺序中。浏览器将通过在活动元素周围放置一个矩形来突出显示活动元素。一旦皮肤元素成为活动元素(由突出显示指示),请按 Enter/Return 键触发其单击作。
ARIA 标签、描述、详细信息
这些是用于定义元素和支持角色的属性或属性。
标签 – 定义或命名元素。
描述 – 提供元素的简要描述。
详细信息 – 提供元素的扩展、详细描述。
ARIA 角色
ARIA 角色用于定义 UI 元素(按钮、加载栏等)。从列表中选择最能定义元素的元素。
隐藏
选择以隐藏所有 ARIA 属性。
高深
z-index
设置 CSS z-index 属性 。使用数字设置堆叠顺序或将设置保留为默认值。默认将使用树中设置的堆叠顺序。
这用于确保元素以正确的堆叠顺序显示,尤其是在靠近或重叠时。
可渗透的
选择以确保元素不接受鼠标单击。当您想要在皮肤中包含元素但又不希望它妨碍与全景交互的能力时,这非常有用。例如,您可以添加晕影、徽标或边框,单击这些晕影或徽标或边框,将允许与全景图进行交互。
热点代理 ID
输入相应的 ID。该 ID 来自热点属性中热点的 ID 字段。热点代理使您能够将皮肤元素链接到特定热点。这意味着该元素将接收与热点相同的鼠标和触摸事件(鼠标单击、鼠标双击、鼠标进入和鼠标离开)。您还可以添加 {} 以将节点 ID 用作热点代理。 了解更多 。
CSS 类
输入所选元素的 CSS 类名称。您可以输入多个以空格分隔的类。如果您需要更多空间,请单击字段右侧的编辑按钮以获得更大的文本字段。没有点 。 需要。
CSS 样式
输入所选元素的 CSS 样式属性。您可以输入多个用分号分隔的样式。如果您需要更多空间,请单击字段右侧的编辑按钮以获得更大的文本字段。
CSS 样式内部元素
输入所选元素的内部元素的 CSS 样式属性。(某些皮肤元素,如 Image、Video 和 External Image,在元素的主 <div> 内嵌套了一个内部元素。
例如,图像元素可以有一个边框: border-radius: 20px; border: 5px solid red; 。也可以用换行符输入:border-radius:20px; 边框:5px 纯红色;
添加了 CSS 边框的图像
捷径
输入首选键以控制为元素定义的作。例如,选择文本字段,按键盘上的向上键。然后添加鼠标单击作。单击或按下向上键时,该元素将执行分配的作。
从翻译中排除
选择此选项可不将此元素包含在皮肤的翻译文件中。
安全区域
可用于容器元素 。
选择 “使用安全区域作为位置和大小 ”,将容器的子元素保持在设备的安全区域内。此选项可确保元素始终 100% 可见,并且皮肤会自动对设备的安全区域做出反应。
确保在 Web 输出的 HTML 模板设置中未选择“ 忽略安全区域 ”。
动作
可以将作或一组方向应用于添加到皮肤的任何元素以创建交互性。
双击“作”区域或单击右侧的加号以打开“作设置”。
有关所有作的详细信息,请参阅皮肤作 。
修饰 符
添加修改器允许您在平移、倾斜、缩放或加载全景图时使元素移动、缩放或旋转。使用修饰符的一个很好的示例是加载条,该加载条会根据已加载的全景图量进行缩放。
双击 修改器(Modifiers) 区域或点击右侧的加号以打开 修改器设置(Modifier Settings)。
有关所有修改器的更多详细信息,请参阅蒙皮修改器 。
笔记
使用此部分添加有关元素的信息。如果您有一个组件并想要解释该组件中的元素,这尤其有用。
注释将在树中显示为工具提示。