点击按钮（layer）或热点（hotspot）弹出帮助图片

这一次从解决问题的思路来解释如何实现一个简单的帮助画面。

 

首先我们要明确需求：

有一个按钮，它的功能就是弹出帮助画面，当点击这个按钮时，全景画面中央出现一个设计好的帮助图片，点击该图片，图片消失，同时如果不点击图片，点击按钮的话，图片也会消失。

 

我们明确了需求后，很明显需要用到两个layer。其实说到layer和hotspot，主要是它们的坐标系统不同。layer的坐标是相当于屏幕的（如果不设定父元素的话），而hotspot的坐标是相当于全景本身的球面坐标，也就是x、y和ath、atv的区别。当然hotspot的球面坐标也是可以转换为屏幕坐标的。

 

因为按钮和帮助画面实际上就是处于屏幕固定位置的两个图片，因此我们需要的是layer。这两个layer，一个是按钮的layer，一个是图片的layer。同时因为这两个layer应该在所有场景中出现，也就是每个scene里面都可以通过点击按钮弹出帮助图片。因此我们应该把这两个layer写在scene的外面。同时让它们的keep属性为true。这样当载入新场景时，这两个layer还在新场景中。因此我们这样写：

一个layer元素的基本：它叫什么？（name），它老家哪里？本质是啥？（url或者是type），它现在处于哪个位置？（align，x，y等等）

 

像keep这样的属性也是不能够忽略的。

 

加上这两段代码之后，现在我们至少能看到一个按钮，另外帮助图片因为可见性visible设置为false，所以暂时看不到。现在的问题就是如何通过鼠标点击令这两个layer成为一个有机的整体。

 

可以看到第二个名为help的layer实际上一直在屏幕的中部，它不是“无中生有”的，它要做的只是通过可见性属性将自己隐藏起来，在适当的时候可见，然后在适当的时候再次隐藏。假设我们现在通过点击按钮，已经让帮助图片可见，只有visible=”true”，鼠标事件才有效，也就是onclick仅仅在visible为true值时才有意义，因此我们可以直接加上

这样的话 ，点击一下帮助图片，图片瞬间就不见了。有人可能觉得是不是缺乏了一些动态效果，他们可能想要一些淡出。这要用到tween，其作用的属性应该是alpha。但这里有个陷阱，就是onclick内的事件执行顺序，如果你把tween(alpha,0)写在set(visible,false)的后面，虽然最后也执行了，但因为执行可见性在前，所以从直观上说，我们只看到帮助图片瞬间消失，而看不到淡出。因此我们要把tween这一句写在set的前面。

但事实上，当我们执行到onclick的时候，还是只看到帮助图片瞬间消失，为什么还是没有我们想要的淡出效果呢？这里有个执行时间的问题。tween默认淡出的时间是0.5秒，但krpano的执行是这样的：我看到tween，开始0.5秒的执行，然后马上去执行visible这一条，也就是说不会等到0.5秒后才执行，这两条action执行的时间几乎是同时的，所谓前后只是微秒的差别，我们需要延迟0.5秒之后再执行visible这一条，所以我们还要用到delayedcall。

ok，现在回头来处理按钮的问题。有了之前的经验，我们也应该知道是通过一个鼠标点击事件来控制help的可见性以及透明度淡出，但这个按钮不仅应该可以让原本隐藏的帮助图片显现，同时还可以让原先显现的图片隐藏。也就是你需要先判断帮助图片当前是隐藏还是可见。这样的话，我们在onclick事件里需要用判断语句if。

这里因为是控制非自身layer的属性，所以你应该在属性前面加上layer[help]。同时因为刚才提到的执行顺序和时间问题，在让图片显现时，就不需要用到delayedcall，只要把set这一句放在tween的前面。不过，当你第一次按下按钮时，帮助图片是瞬间出现，而没有那种淡入的效果，原因是我们没有设置透明度，应该将help图片的初始alpha设为0。

如果是热点弹出的话，只要在你的热点上添加对应的onclick的部分，也就是加上以下属性

通过这么一分析，我们想要的需求实现了。对于熟手来说，只是半分钟的事情。但这是一个排错分析的过程，无论你要编写的代码有多复杂，你可能都要经历这样的过程，尤其是写一段全新功能的代码，很有可能会漏掉什么东西，只有在不断尝试不断调整的情况下，才能写出正常工作的代码。

 

最终的代码：

现在说下autoalpha属性，当autoalpha设置为“true”时，如alpha为0，则visible自动设置为“false”，如alpha大于0，则visible自动设置为“true”。所以上述代码可改为：

以下亲自试一试krpano代码运行器仅提供VIP会员，VIP会员加入说明请查看首页头图链接