button按钮onclick触发不了_krpano换肤术之按钮及动作替换

一、前言krpano是一款出自德国的最流行的全景显示及播放服务器端组件，国内各大全景网站都在使用krpano。从1.0.0版本走到现在最新的1.20.7版本，已经12个年头，其强大的功能及技术支持，是其流行的基础。除了全景显示播放技术，其自创的xml格式配置文件是其技术的精华部分，所有的控制、配置都可以在krpano xml文件里完成。krpano xml形式上是xml，实际上又融入了很多全景显示、深度缩放等技术及概念，与普通的xml文件有相同的地方，也有不同的地方，学过xml的完全可以看懂，但其复杂程度又远超普通的xml技术，你不得不从头学起，相当于要多学一门程序设计语言。一篇文章不可能从头到尾讲清楚krpano xml的设计，但本文会从官方默认的配置文件讲起，从更换按钮及功能来认识krpano xml的技术及设计方法。理解本文内容， 不需要太高深的编程技巧，会看代码即可。如果有一些网站设计的基本 知识，包括但不限于： 超文本标记语言html、可扩展标记语言xml、程序设计语言javascript、样式表css等，会更轻松 。 二、认识krpano krpano在服务器端主要包含三个文件： 1、krpano.swf 2、krpano.js 3、krpano.xml其中，前二个文件是主要的算法，从文件后缀看，第一个krpano.swf是在flash技术下使用，第二个krpano.js是在html5技术下使用，一般情况下，用户不能更改这二个文件。第三个文件krpano.xml是控制显示及播放的主要文件，对krpano.xml的不同设计，可以构造出风格不同的全景网站前后端，对于全景网站的设计人员来说，你可以不懂全景显示的算法，但必须懂得krpano.xml的设计。最简单的krpano.xml文件至少包含如下部分内容：

<krpano>    <view...... />    <preview...... />    <image......>      ......    image>krpano>

从内容看，这是一个极类似xml风格的文件，但这又不是普通的xml文件，具体的格式及标准可参考官方文档。其中，view标签中记录的主要是视场信息，包含视场坐标、视场类型、视场限制、放大倍率等；preview标签里记录的是预览照片地址；而image标签里记录的主要是照片类型、切片方式、切片尺寸及照片地址等。 这个简单的配置文件只能把全景照片显示出来，但画面上并没有任何功能按钮或导航栏，也没有音频、视频、文字、GPS等富媒体信息。要想在画面上显示有关富媒体信息，必须加载一个同样是krpano风格的皮肤文件，官方提供的这个文件是 vtourskin.xml，本文就从这个皮肤文件讲起。加载皮肤文件使用include语句，如下所示：

            ......  

说实在的，这个官方的皮肤配置文件很不精致，好在包含了所有按钮的动作程序及样式设计。 从1.19.6版本开始，官方又提供了几个对常规皮肤修正的配置文件，我们这里选用了vtourskin_design_ultra_light.xml，如下所示：

              ......  

如上引用之后，我个人认为，导航及按钮漂亮多了：

注意右下角那个全屏功能按钮 (正方形，有个向右上的箭头，图中被水印遮挡了部分)，这个按钮的功能是点击后-全屏显示全景照片并切换按钮图标，再点击-退出全屏显示并切换按钮图标。其中包含 三个动作，二个图片交替循环 。可是呢，这个功能并不常用，而且右键或长按菜单里已经包含有全屏显示(Fullscreen)功能选项，导航栏上再出现这个按钮就显得可有可无。如下图所示：

也就是说， 全屏显示功能可以通过右键电脑屏幕或长按手机屏幕来获得。于是，这就为我们提供了改造的空间。可以去除全屏按钮并利用这个空间，增加二个按钮，设计一个音频开关，另一个信息窗口开关。如下图所示：

图片中的喇叭图标是音频播放状态。 三、改造过程 1、动作分析：按钮的点击动作有二个，第一次点击和第二次点击，两次点击后的按钮图标要切换成相应的状态(信息窗口的开/关图标可以相同)，用以标示当前的状态。所以： 第一次点击动作的内容包含： 打开窗口或者打开音频， 关闭原始状态的图标， 显示下一次点击对应的图标； 第二次点击动作的内容包含： 关闭已打开的窗口或已播放的音频， 关闭当前状态的图标， 返回原始状态的图标。我们要做的就是新增这二个开关，用于打开或关闭音频及信息窗口，这二个开关都有二个状态(打开或关闭)，音频开/关按钮由二个图标表示不同的状态，但信息窗口开/关的二个状态图标可以相同，如下图所示：

图片中的喇叭图标是音频暂停播放的状态。 2、前期准备：新增的按钮要以图片方式呈现，动作要靠程序实现。图标可以自行设计独立的图片，也可以在官方提供的按钮群图片上修改或增扩，我比较倾向于增扩，原因是不需要加载另外的图片，又能与官方样式统一。关于弹出窗口的样式及程序可以从官方的案例中获取并自行修改，音频开关的程序可以直接套用官方程序。下图是原始图片及增扩后的图片对比(官方提供的按钮群图片vtourskin_light.png是透明底的，为了方便阅读，我加了黑色底，实际增扩应保持透明底)：

从图中可以看到，官方提供的按钮群图片中，没有喇叭关闭状态的图标及信息图标。虽说喇叭关闭状态图标可以用crop在喇叭开启图标上裁切出来，但尺寸不同时，跳跃感太强；也可以按照需要的尺寸裁出来，用坐标设置去控制显示位置，但不同的屏幕尺寸可能出现差异。所以我还是增加了一个喇叭关闭状态的图标。而信息窗口的开/关图标只需要一个就可(打开/关闭 可以不变)。上图中还同时增扩了几个其他图标，那是进一步修饰官方默认的图标用的，本文只提供一个方法，融会贯通之后，你甚至可以自行设计更漂亮的按钮。 3、手术过程：打开官方提供的vtourskin.xml文件，找到原来全屏功能按钮的地方，屏蔽或删除原代码(我习惯选择屏蔽)：

新增二个新的功能按钮代码：        

修改代码之前，建议先备份，修改之后，按原名保存。上述代码中，需要注意的是name，可以自行定义，但应意义明确。最终结果如下图所示：

接下来，我们要对上述按钮进行修饰或设计指定的动作：新增音频开关插件：

新增信息窗口的插件及图层样式：

上述插件及样式的代码可以直接嵌入vtourskin.xml文件内， 也可以另外保存为独立的文件，然后在vtourskin.xml文件里使用include语句引用或在krpano.xml里引用。 我比较倾向于保存为独立的文件。因为并不是所有场合都需要这些功能或图标。其实，官方vtourskin.xml文件就是N多个按钮功能及样式集合于一身的文件，我喜欢把这个文件的有些功能分离出来形成独立文件，在需要时引用。 4、代码解释：代码的重点在动作，点击或按下都可以触发一些动作。onclick就是点击后触发的动作，ondown就是按下时触发的动作。其他的基本是样式表内容，与普通的CSS并无太大区别，从字面意思也可以了解个大概，下面只对主要部分进行解释。新增的二个开关都需要用到官方提供的相关插件，引用插件，需要用到plugin标签，音频开关用到的是 soundinterface.swf及 soundinterface.js。信息窗口开关用到的是 textfield.swf。需要说明的是，音频开关只有开关动作和按钮样式，声音通过喇叭播放不需要修饰。而信息窗口除了开关动作和拖拉动作外，还有按钮样式和窗口样式。因窗口是以图层方式存在，所以，代码中都以layer标签方式出现，开与关无非是显示或隐藏相应的图层。样式设计包括窗口大小，标题内容、边框及背景颜色、文字大小及字体、字号、颜色、间距、缩进等，完全了解需要CSS相关知识，不在本文讨论。

style="skin_base|skin_glow"

 这是官方图标的基本样式，鼠标移上时会有炽热光晕，不设计独立的图标就可以直接应用，否则这里还得加载自行设计的图标。

crop="x坐标|y坐标|图标宽|图标高"

这是在按钮群图片上裁切图标的坐标及尺寸。图片的左上角坐标为0|0，右下角坐标为192|768，单位是像素。每个图标的裁切坐标不会相同，在photoshop里可以准确地获得图标的坐标。图标尺寸多数情况下为正方形，即：宽=高。但喇叭图标是个例外，因有播放状态，自然：宽>高。当然了，你也可以放大尺寸按正方形裁切，然后，调整图标的缩放率来控制与其他图标的统一。

align="排列方式"

排列方式有：left-左/right-右/top-上/bottom-下/lefttop-左上/leftbottom-左下/righttop-右上/rightbottom-右下。

x="mm" y="nn"

这是图标在屏幕上或图层中的相对坐标，可以根据缩放率或个人喜好自行调整。

alpha="aa"

这是透明度，1.0为不透明，0.5为半透明。

scale="ss"

这是缩放率，1.0表示100%，即裁切多大，就显示多大，0.5表示缩小一倍，即50%，可参考其他图标来设定。

visible="true/false"

这是图标的显示控制，true表示可见，false表示不可见。开关动作(开或关)的程序均已包含在主文件krpano.js里了，我们只需直接引用就可以( 本文中全是直接引用)。但要注意自定义名称的对应。

ondown="draglayer();"

窗口除了开与闭功能，还有拖拉移动的功能，毕竟窗口需要占用一定面积的屏幕空间，不想关闭时可以拖拉到其他位置。这是按下鼠标或长按窗口时的移动 拖拉动作，完整代码可在官方案例中找到。

onclick="set(layer[InfoBox].visible,false); set(layer[CloseInfoButton].visible, false); set(layer[OpenInfoButton].visible, true);"

窗口只能通过按钮打开，但关闭已打开的窗口，就不一定只通过点击按钮，直接点击窗口内的任何地方会更方便，这对手机屏幕操作特别方便。所以，这里新增了一种关闭的方式。点击或短触信息窗口的内容后，也可以关闭窗口：隐藏信息窗口(图层)，隐藏“开按钮”，显示“关按钮”。即不需要点去击开/关按钮。

onclick="pausesoundtoggle(bgsnd); switch(crop, 69|709|54|54, 75|7|54|54);"

这是音频程序的主要部分，pausesoundtoggle(音源名称-这是加载音频时自定义的)表示点击就暂停或播放，switch(crop, 位置1，位置2)表示点击后从图片中的位置1(坐标1|尺寸1)切换到位置2(坐标2|尺寸2)，即切换不同的图标。 默认情况下，音频在页面加载时自动播放，因此，图标的默认状态是播放状态，点击一次后关闭，再点击后又开启...循环往复。下面是信息窗口【开/关】按钮的三个动作：

onclick="set(layer[InfoBox].visible,true); set(layer[skin_btn_open_info].visible, false); set(layer[skin_btn_close_info].visible, true);"

点击“开按钮”后：显示信息窗口(图层)；隐藏“开按钮”；显示“关按钮”。

onclick="set(layer[InfoBox].visible,false); set(layer[skin_btn_close_info].visible, false); set(layer[skin_btn_open_info].visible, true);"

点击“关按钮”后：隐藏信息窗口(图层)，隐藏“关按钮”，显示“开按钮”。经过一番折腾后，重新加载全景页面，就会在画面上看到原来的全屏功能图标不见了，取而代之的是二个另外功能的图标(音频及窗口)。 四、总结 krpano确实是功能强大的全景显示及播放组件，其深度缩放技术(deepzoom)在显示球面照片及亿像素照片方面几乎成为行业标准，也被很多全景制作软件用作内核。krpano从1.19.pr5开始，已经添加了对立体全景图的显示支持，在最近的版本中，又在3D深度图支持方面走在了时代的前列，为VR/AR技术的发展奠定了坚实的基础。因此，学习krpano也就成了网站设计人员的必然选择。早些年微软也有深度缩放技术，但其因要在用户电脑里安装插件，近几年越来越少地听说有什么作为。与Adobe合作的Zoomify也提供深度缩放技术，但并没有在球面照片显示方面有所作为。至于那些以flash为主的显示技术正逐步被html5淘汰(krpano目前同时支持flash及html5)。学习或设计krpano时，阅读官方案例的代码是最基本的要求，如果你有些相关知识(例如：html /xml/javascript/css)，对理解代码会有很大帮助。对于一个 喜欢摄影及全景摄影的码农来说，理解krpano专用的xml语言并不难，研究官方案例就是一个最好、最快的方法。很多设计方案完全可以根据官方案例组合得出，E文好的可以通过krpano.com官方网站获得更多相关知识。本文是我学习krpano的一篇日记，提供了一个简单的按钮替换方法，欢迎转发。如有错漏，请不吝赐教。希望与业界高手互相交流学习。