创建带有滚动文本的弹出图像

了解如何创建自定义图像弹出窗口，其中包含一个可扩展以适应文本量的文本框。

此带有文本的弹出图像将应用于点热点。它由背景、外部图像加载器、文本框和屏幕色调组成。

如果您有多个图像热点，其中包含不同数量的描述性文本的不同图像，则此弹出窗口非常有用。文本框将扩展到指定的长度以适合文本。一旦达到该长度，将添加一个水平滚动条。

要继续，请下载此项目文件 。它来自我们关于造型皮肤的网络研讨会 。查找文件夹 Image Popup with Text。

您还可以从不同的点热点模板创建组件，并在项目中使用它们。

构建弹出窗口

在皮肤编辑器中：

1. 绘制一个矩形。此矩形将充当容器/父元素以及弹出窗口的边框和背景颜色。对于此示例，它的宽度为 206 像素，高度为 160 像素。
2. 接下来，在矩形下方绘制一个文本框。这将包含图像的描述。将其宽度与矩形相匹配。
3. 使文本框成为矩形的子项。
4. 移动文本框以使其顶部与矩形的底部对齐：将其锚点设置为顶部中心。它的位置是 X=0，Y=160。
5. 将 Lottie 动画添加为加载图形。这将显示图像是否尚未下载。它将隐藏在图像后面。将其设置为矩形的子项，并将其放置在矩形的中心。锚点为中心，位置为 0/0。
6. 对动画进行所需的更改，例如循环。对于无限循环，将循环更改为 0。
7. 添加外部图像加载器元素，并将其设为 Rectangle 的子元素。将其锚点更改为中间顶部。外部图像加载器将加载每个热点的图像。
8. 将图像加载器放在矩形上，在顶部和侧面留下大约 3 像素的边框，在底部显示 7 像素的矩形。宽约 200 像素，高约 150 像素。
   

   

9. 取消选择外部图像加载器（按住 Ctrl/Cmd 键单击）。
10. 将背景颜色更改为蓝色，并减少矩形和文本框的 Alpha 透明度。
11. 将边框宽度更改为 0。
12. 取消选择矩形并将文本的颜色更改为白色或其他对比色。您也可以在此处对文本进行任何其他更改。
13. 添加关闭按钮。我们使用的是剪影图标集中的一个，其中包括一个 2 状态按钮。
    

    

14. 使其成为矩形的子项。
15. 将其大小更改为约 22 像素并将其放置在弹出窗口的角落;锚定在右上角。
16. 将其颜色更改为与弹出窗口相同的蓝色。打开颜色工具 。
    

    

17. 添加丝网色调。这将使背景中的全景“变灰”，以便弹出窗口更容易看到。添加一个矩形并使其与画布一样大;定位在左上角，位置为 0,0。
18. 将背景更改为黑色，并将 Alpha 透明度设置为 100。
19. 将屏幕色调移动到树中的图像弹出下方，以便显示在弹出窗口后面。
20. 最后，相应地命名（更改其 ID）元素。
    

    

添加动作和 CSS

现在弹出图形已经构建完毕，是时候给它一些动作和 CSS 了。

1. 将变量添加到外观设置中的变量表：vis_image_popup。它的类型是 True/False，它的初始值是 false。

2. 对于 Rectangle 容器，将其可见性设置为 true，并添加具有以下条件的逻辑块：

   触发	比较	价值	操作
   vis_image_popup	=	真
   				可见：True

3. 复制该表达式;我们会再次使用它。

   

4. 在树中选择外部图像加载器。取消选择可见性并添加逻辑块。粘贴条件。

5. 确保在“外部图像”面板中选择了“ 隐藏时卸载内容 ”。这将确保在加载下一个图像之前清除图像。

6. 给关闭按钮一个动作：

   • 源 = 鼠标点击
   • 动作 = 设置变量值
   • 变量名称 = vis_image_popup
   • 动作 = 设置（=）
   • 值 = False

7. 对于“文本框”，删除单词 “文本 ”，然后选择“ 自动换行”、“自动大小 ”和 “滚动条 ”。

8. 添加 5 像素的填充。

9. 在“文本框”的“高级”面板中，将以下 CSS 添加到 CSS 样式内部元素 ：max-height： 120px;。这将允许文本框通过仅扩展到 120 像素来容纳更大的文本块。如果需要更多空间，将添加滚动条。

10. 对于 Screentint，取消选择 visible 并将之前的表达式粘贴到 Visible 逻辑块。

11. 将以下动作添加到 Screentint：

    • 源 = 鼠标点击
    • 动作 = 设置变量值
    • 变量名称 = vis_image_popup
    • 动作 = 设置（=）
    • 值 = False

添加点热点模板

此弹出窗口发生在点热点，因此我们需要为其创建一个模板。

最简单的方法是使用组件工具箱中的一个。对于此示例，我们将使用 Silhouette Image Popup 组件。 该组件来自 Pano2VR 版本 6，也与 Object2VR 4 兼容。你可以在这里下载它。

1. 添加组件后，从树中删除以下内容：

   • image_popup_close
   • image_popup
   • screentint_image

2. 为模板指定一个唯一的 ID，例如 ht_image_text。

3. 添加以下动作：

   此动作从映像文件中提取图像。

   • 源 = 鼠标点击
   • 动作 = 设定值
   • 值 = $（r）$（胡）
   • 目标 = popup_image
   • 参数 = 外部 URL

   此动作将变量的值设置为 true，并将显示弹出窗口。

   • 源 = 鼠标点击
   • 动作 = 设置变量值
   • 变量名称 = vis_image_popup
   • 动作 = 设置（=）
   • 值 = True

   此动作从热点描述中提取文本并将其添加到文本框中。

   • 源 = 鼠标点击
   • 动作 = 设定值
   • 值 = $（hd）
   • 目标 = popup_info_text
   • 参数 = 文本

   保存皮肤。或者将其另存为组件。

将其应用于项目

1. 添加图像类型点热点。
2. 将 Skin-ID 更改为点热点模板的 ID。
3. 添加标题。
4. 添加描述。描述可以是纯文本，也可以根据需要使用。
5. 对于图像文件 ，导航到您的图像以添加它。输出时，此图像将被复制到输出文件夹。

对其余点热点重复步骤 2-5。

另请参阅...

• 造型皮肤元素网络研讨会
• 添加图像弹出窗口
• 使用变量
• 逻辑块
• 下载 Pano2VR 版本 6 组件
• 论坛：带有自动调整文本大小的图像弹出窗口，但有限制