制作缩略图导览

Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

什么是缩略图导览，这个我们在添加背景音乐中见到过。

 

我们直接步入正题，看看是如何制作的。

缩略图在分类上大体可分两类：一类是自动创建的缩略图，我们上面所看到的就是。另一类，则需要我们手动添加。

我们先看第一类。

首先，添加滚动区域。

和文本、矩形一样，可以直接绘制一个粗略大小。

然后，添加克隆。克隆的作用就是将单元内的内容复制。

最后，添加节点图像。这一步是“自动”的关键。

剩下的就是调整和设置了。

先把节点图像调节成克隆单元区域（白色区域）的大小。看一下参数区的克隆单元尺寸。

将节点图像的大小的宽、高设置比克隆单元的宽、高都小 4 像素（这个值的作用是留出间隔大小，可以根据自己的需求来设置）。

接下来，将节点图像拖动至克隆单元，并通过位置参数微调，使节点图像在克隆单元“内”并居中。

在树列表中，拖动节点图象使之成为克隆单元的子级。

同样的步骤将克隆单元移至滑动区域内，并使克隆单元成为滑动区域的子级。

我们注意一下，滑动区域一定要比克隆单元的高，多出一下，大概20～25像素，这部分是留给滑动条的（当克隆的节点总宽超出滑动区域宽的时候）。

至于右边的留白，我们不必在意，因为克隆默认是水平一行向右克隆。内容多的话会自动填满的。

最后，调整缩略图的位置以及尺寸。在这里，我们全新的接触一下位置和尺寸的问题。

大致的位置选择就不赘述了，一般就是底部居中位置。其他位置当然也可以，这个根据自己的需求来。下面要说一下我们需要注意的问题。

我们仔细点会发现，在版本5中，位置和尺寸多了一个“单位”的选择。之前的版本默认就是“像素”，在版本5中增加了一个“百分比”的选择。这一点，直接解决的一个就是，移动端兼容的问题。我们知道，电脑和手机屏幕的宽高比和分辨率都是不一样的，在前端开发中，“高配”做法是根据终端做出不同的适配样式，然后判断接入终端再匹配样式，“低配”做法是做一个“兼容”样式适应大部分的终端。当然实际适配两种做法都需要，毕竟终端不仅仅要区分电脑与移动端，电脑端还要覆盖不同屏幕分辨率，比如台式机的显示器和笔记本的显示器，移动端，要考虑各种品牌型号的手机，还有Pad也要考虑。现在简单一些了，电脑的显示器普遍1080宽屏，手机也逐渐趋于一致，以前电脑手机各种分辨率都有。（关于适配和终端兼容的问题，会有专门的文章介绍）

在版本5之前，想实现“低配”都是较难的，到版本5我们解决了这个问题，可以做出兼容性很好的皮肤。

先看尺寸，重点是“宽”，毕竟电脑和手机最大的区别就是“宽”不同，“高”的部分我们还能滑动翻页。

我们将固定的像素宽，更换为百分比。

这里会根据原来的像素宽占画布宽的百分比，自动给出一个值。我们建议重新设置这个值，至少80%以上，这个值如果太小，比如50%，在手机上的显示占屏宽太小了。

我们更换成90% ，然后将位置 X 单位也换成百分比。

继续两步调整，将 X 的值改为5%，把锚点设为靠下。

这里解释一下5%，X=（100% - 宽）÷ 2 ，这个式子我们思考一下就知道了，内容宽度已经90%了，想要保证整体居中，左右要5%，X是从左边计算，所以是5%。

在显示上我们制作算基本完成，再添加上动作我们才算总体完成。

给节点图像，添加动作。

以上就是制作自动创建的缩略图。

如果觉得麻烦，可以通过组件库中现成的组件快捷添加。组件库中自带两套不同风格的组件。

下面我们介绍一下手动添加制作的缩略图。

自动创建的缩略图也有适用限制，当缩略图很多且使用场景视图的时候，自动创建缩略图是合适的，基本上移动端用自动创建缩略图都是合适的。但如果缩略图不多，不足以超出屏幕宽度，比如在电脑端，滑动区域内的内容默认是左对齐（可以调整，专门文章介绍，这里不再赘述），另外如果实际需求不使用场景视图的时候，那么上面的这种缩略图就不太适合了，我们就需要手动创建制作缩略图。

比如实际需求中我们得使用要求的图片作为缩略图。

添加图片并大致的排列好。

绘制容器成组。

如果需要有个背景底色，再绘制一个矩形。（为什么不使用滑动区域？——滑动区域使用缩略图多的情况，小于屏幕总宽度时，显示上无法居中。）

接下来对矩形进行参数上的调整。宽设为100%，X设为0（此时像素百分比就无所谓了），锚点左下，背景色彩根据需求调整，设置的时候可以将Alpha值调小，设置半透明的状态，边框可以设为0。

此时，矩形使盖在图片组上方的。我们拖动图片的容器组，使之成为矩形的子级即可。

若想要缩略图居中，设置容器组的锚点居中。

预览看一下效果。

剩下的就是给每个缩略图添加动作了。

URL处直接选择对应的漫游全景即可。

手动添加缩略图也是版本5之前制作缩略图的大致步骤。

最后还有个小问题，缩略图是比较占位置的，我们如何在需要它的时候再显示它。默认状态不显示。这里就引出一个知识点：用按钮控制元素的显示与隐藏。

我们只需要添加一个按钮，然后给这个按钮添加动作，点击显示隐藏。

再给缩略图组一个动作，初始不可见（或者外观去掉可见勾选也可以），当然是要给缩略图组的父级矩形。

以上就是本篇文章的内容。

关于缩略图，后期会有很多补充，比如缩略图在不同终端的适配、分组缩略图、圆形缩略图等等。