点击按钮(layer)或热点(hotspot)弹出帮助图片

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

 

首先我们要明确需求:

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

 

我们明确了需求后,很明显需要用到两个layer。其实说到layer和hotspot,主要是它们的坐标系统不同。layer的坐标是相当于屏幕的(如果不设定父元素的话),而hotspot的坐标是相当于全景本身的球面坐标,也就是x、yath、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的部分,也就是加上以下属性

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

 

最终的代码:

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

 

在 “点击按钮(layer)或热点(hotspot)弹出帮助图片” 上有 1 条评论

发表评论