创建工具提示

工具提示是鼠标进入使用它们的元素或区域时显示的文本位。它们广泛用于节点类型的热点,并显示下一个节点的标题或作为信息弹出文本。它们也可用于简单地显示信息。

Custom Tooltip
自定义工具提示

创建简单的工具提示

  1. 添加点热点。

  2. 在属性中,选择信息作为热点的类型

  3. 标题字段中输入文本。这将是您的工具提示文本。★ 提示:单击铅笔图标以打开富文本编辑器。

  4. 打开输出面板

  5. 添加 Web 输出。

  6. 从皮肤菜单中选择内置皮肤。

    这些皮肤具有热点模板 ,可将图标和文本框应用于热点。如果未添加皮肤,或者应用了没有热点模板的皮肤,则您将看到默认的热点图像(红点)。

    如果您没有皮肤或使用没有热点模板的皮肤,则可以在 Web 输出设置的热点窗格中自定义文本框。

  7. 输出项目并测试。

自定义工具提示

创建自定义工具提示的最简单方法是使用组件工具箱中的点热点组件,然后交换热点图标。但是,这里是如何构建工具提示的基本大纲。

  1. 打开皮肤编辑器

  2. 添加热点模板。点按“ 添加热点模板 ”按钮,然后在“画布”中点按以添加它。

    Add Hotspot Template
    添加热点模板

  3. 单击“ 绘制文本框 ”按钮,然后单击“画布”以添加文本框。或者,您可以在画布上绘制形状。这将是热点的工具提示。

    Add Text Box
    添加文本框

  4. 使文本框成为热点模板的子项。在树中,将文本框拖动到热点模板的顶部。

    Text Child Element
    文本子元素

  5. 要确保文本框保持居中,请将锚点设置为底部居中。双击位置重置定位(到 0,0)。 然后,文本框将位于模板顶部的中心。将 Y 值更改为 -55。

    Text Box position settings
    文本框位置设置

  6. 矩形设置中,自定义框。在本练习中,将“ 背景颜色” 更改为黑色,“Alpha 通道” 值为 120。单击颜色池以打开颜色选择器。

    Pick the background color.
    选择背景颜色。

  7. 将边框宽度更改为 3,对于圆角,将半径更改为 3。最后,将边框颜色更改为白色。

  8. 在文本设置中,删除文本并找到 $ 按钮,然后选择热点→点标题 $(hs)。$(hs) 是一个占位符 ,它告诉 Pano2VR 获取在热点属性的标题字段中输入的信息,并将其显示在此文本框中。

    Textbox Properties
    文本框属性

  9. 文本颜色更改为白色。

  10. 将字体更改为粗体 。取消选择字体, 对于粗细,选择粗体。

  11. 选择 “自动调整大小 ”。添加一些填充物。在这里,我们将值更改为 5。

  12. 在鼠标进入和离开热点时隐藏和显示工具提示。转到外观并取消选择可见

  13. 逻辑块添加到 Visible 参数。添加以下条件:

    • 触发器 = 鼠标悬停在父级上
    • 比较 = =
    • 值 = true
    • 可见性 = true 这表示,每当鼠标位于文本框的父级(热点模板)上时,文本框将可见。向热点模板添加图标。我们使用的是材质集合中的一个图标。
  14. 使图标成为热点模板的子项。将图标锚定到中心,并通过双击位置重置位置参数。X 和 Y 应为 0,0。

  15. 为模板提供 ID。这里我们使用 ht_tooltip。将皮肤添加到项目时,这将显示在 Skin-ID 的列表中。或者,您可以为其提供默认 ID(ht_info、ht_url 等)。

    Hotspto Template ID
    Hotspto 模板 ID

  16. 更改图标的颜色。由于图标是 SVG,因此我们可以使用颜色工具将其颜色从黑色更改为白色。选择该图标并打开颜色工具。双击黑色(新颜色)以打开调色板。选择白色。

  17. 保存皮肤。您也可以将其作为组件

  18. 在 Web 输出设置中添加新的新皮肤。

  19. 添加点热点。对于 Skin-ID,打开菜单并从列表中选择您使用的 ID。(在您添加皮肤之前,ID 不会显示。

  20. 保存项目并输出。

    Custom Tooltip
    自定义工具提示

一般来说,工具提示或文本字段可以使用 CSS 进一步自定义。例如,您可以使用 CSS 添加自定义字体。看看使用 CSS 格式化文本。

另请参阅...

上次修改时间:2023 年 2 月 15 日