Krpano：打造全景漫游体验—基础(三)

前言

上一篇的文章中讲解了什么是< action >标签，今天就来说说krpano中相关的动作（方法），想要与人发生交互就要通过一些固定的命令来控制krpano来完成自己想要的一些功能，这些命令就是一些动作也叫函数

krpano动作解析

def get set动作解析

1.def

def就是define的缩写，def动作主要用来定义变量，可以接收三个参数def(variable,type, value*):

• variable:需要定义变量的名称
• type:需要定义的变量的类型（7种类型：boolean、number、int、uint、string、object、array）
• value :变量的值，参数后面带 * 号表示可选

2.set

set动作用于将指定的variable 赋予指定的value，set动作有两种语法：

• set(variable, value)，将一个值赋给一个变量
• set(object, variable:type=value, variable:type=value, ...)，这是一次性赋值多个变量的使用方式

def和set都可以用来定义变量那么有什么区别呢？区别在于def必须指定类型但可以不赋值，而set不用指定类型但是必须要赋值，krpano会根据数值自动分配类型

3.get

get动作用于获取变量的值，get(variable)

案例

创建了一个layer元素，并且设置了宽高、背景颜色、边框颜色和位置，layer元素中有一个属性bgalpha（背景透明度），默认值为0，所以设置了背景颜色也展示不出来

我们使用def动作定义一个alphas变量，通过set动作将值赋给alphas变量，然后设置layer元素的bgalpha属性的值为get动作获取到的alphas变量的值

<krpano>
  <!-- def、set、get -->
  <action autorun="onstart" name="kr_action">
      def(alphas,number);
      set(alphas,0.5);
      set(layer[view_bar_btn].bgalpha,get(alphas))
  </action>
  <layer name="view_bar_btn" type="container" keep="true" width="100" height="100" bgborder="4 0xD6000F 1" bgcolor="0x000000"  align="center"></layer>
</krpano>

calc copy delete动作解析

1.calc

calc是calculate的缩写，calc动作主要用来计算，可以接收两个参数calc(variable, expression):

• variable:存储计算结果的变量，不存在则自动创建该变量
• expression:数学或者逻辑表达式

2.copy

copy动作用于将一个变量的值复制给另一个变量，接收三个参数copy(destination, source, typeconversion*)：

• destination: 目标变量，变量不存在，则创建变量
• source: 源变量，变量不存在则将null赋值到目标变量
• typeconversion : 设置为true （默认值）时，两个变量为不同类型时，源变量的数值会被转换为目标变量的类型，设置为false时，两个变量为不同类型时，将源变量的数值和类型复制到目标变量

3.delete delete动作用于删除指定变量，delete(variable, ...)，variables是变量的名字，可以删除多个变量，这个动作用的不多

案例

还是layer元素，不过没有设置宽高，而是通过calc 动作计算出宽度再赋值给layer元素的width属性，再通过copy动作将layer元素的宽度赋值给layer元素的高度

<!-- calc、copy、delete -->
<action autorun="onstart" name="kr_action">
  calc(layer[view_bar_btn].width,20*20);
  copy(layer[view_bar_btn].height, layer[view_bar_btn].width);
</action>
<layer name="view_bar_btn" type="container" keep="true" bgborder="4 0xffffff 1" bgcolor="0xff0000" bgalpha="1"  align="center"></layer>

if delayedcall stopdelayedcall 动作解析

1.if

if动作作条件判断，if作用中两到三个参数判断if(condition, then-actions, else-actions*)，4个或多个参数调用if(condition, then-actions,else-if-condition, then-actions,...,else-actions)：

• condition/else-if-condition：逻辑表达式
• then-actions：如果条件为真，则执行该动作
• else-actions：如果条件不为真，则执行该动作

2.delayedcall

delayedcall动作为延时指定的秒数来执行指定的动作，接收两个参数delayedcall(id, delay, actions):

• id: delayedcall动作的id
• delay: 延迟的秒数
• actions: 执行的命令

3.stopdelayedcall

stopdelayedcall动作会按照指定的id停止delayedcall，stopdelayedcall(id)

案例

当if动作条件为真的时候就隐藏导航条，然后设置两个delayedcall动作，延时五秒后就让两个layer元素展示出来，但是使用了stopdelayedcall动作停止掉第二个delayedcall动作

<action autorun="onstart" name="kr_action">
  if(1+1 === 2, tween(layer[skin_layer].alpha,0,5));
  delayedcall('show1', 5, set(layer[view_bar1].visible,true));
  delayedcall('show2', 5, set(layer[view_bar2].visible,true));
  stopdelayedcall('show2')
</action>
<layer name="view_bar1" type="container" keep="true" width="100" height="100" bgalpha="1" bgcolor="0x000000"  align="lefttop" visible="false"></layer>
<layer name="view_bar2" type="container" keep="true" width="100" height="100" bgalpha="1" bgcolor="0x000000"  align="center" visible="false"></layer>

调试动作

我们在开发的时候对于某些错误很难发现，所以需要调试动作来帮我们快速定位错误：

• strict：严格模式，触发严格模式的条件是krpano根元素的strict属性设置为true，或者使用 === 或 !==，严格模式下，对字符串的比较必须放在引号中，变量或是解析为其值，如果不存在则解析为null
• showlog(true/false)：显示或隐藏控制台
• debug/trace/warning/error：控制台输出debug信息/info信息/warning信息/error信息，当kepano根标签的debugmode属性启用时，debug信息才会显示
• fatalerror(错误消息)：显示严重错误信息，停止交互

<action autorun="onstart" name="kr_action">
  showlog(true);
  debug('debug消息');
  trace('trace消息');
  warning('warning消息');
  error('error消息');
  fatalerror('fatalerror错误消息');
</action>

数学运算动作

Math 对象提供了数学常量以及数学运算的动作，和js的Math对象一样用来执行数学任务

并且krpano还提供了一些进行数学运算的动作，这些动作有两个或者三个变量，当为两个变量的时候例如add(variable, valueA) => variable += valueA，三个变量的时候add(variable, valueA, valueB*) => variable = valueA + valueB

valueA和valueB可以是数值，当为变量的时候则使用变量的值

// 加/减/乘/除/余/乘方
add(variable, valueA, valueB*)
sub(variable, valueA, valueB*)
mul(variable, valueA, valueB*)
div(variable, valueA, valueB*)
mod(variable, valueA, valueB*)
pow(variable, valueA, valueB*)

自增、自减和四舍五入的动作inc(variable, byvalue*, max*, min*)，dec(variable, byvalue*, min*, max*)，roundval(variable, decimalplaces*)

自增自减表示variable变量增加/减少byvalue（默认值为1），直到最大值max，最小值min

四舍五入表示variable变量进行四舍五入并保留decimalplaces（小数点位置，不设置则取整）位小数

提供的这些数学运算动作，可以在开发中快速进行数学运算，提高计算的效率和准确性，还能方便地使用数学常量和一些基本的数学函数

总结

通过这些动作我们可以实现很多的交互效果和自定义的交互，但是这也其中一部分的动作，还有一部分下一篇再作讲解