vue+krpano的基本使用和小行星效果

2020-05-21

做了一个全景的项目，接触到krpano，

项目框架：vue+typescript

初始化krpano

引入js：直接用script标签引入即可

// 初始化
let embedpano: any = _window.embedpano // ts没法直接调用，得转一下

let krpano: any

embedpano({
  swf: null,
  id: panoId, // 提供的id，最后生成的canvas会使用这个id
  xml: './imgs/scene/pano.xml', // xml配置文件
  target: 'pano', // 页面里的div id
  consolelog: false,
  onready: (krpano_interface: any) => {
    krpano = krpano_interface
  }
})

xml配置文件说明

krpano的场景及效果都配置在xml里面，平时没怎么接触这种配置格式，不过弄清楚里面的逻辑和规则理解起来就很简单啦

配置场景

<!-- 首先是根元素krpano，其他元素都写在根元素里 -->
<krpano debugmode="false" logkey="false" showerrors="false">
<!-- scene代表场景，设置名称可以在切换场景时使用 -->
 <scene name="street1" lat="0" lng="0" heading="0.0">
 <!-- view用来设置当前的视角 -->
  <view hlookat="0" vlookat="0" vlookatmin="-50" vlookatmax="41" fovtype="MFOV" fov="120" fovmin="80.5" fovmax="120" limitview="true" />
  <!-- preview设置预览图，可以在图片加载完成之前做一个过渡 -->
    <preview url="panos/street1/preview.jpg" />
    <!-- cube就是设置全景图的切图，其中路径里面的``%s``是一个占位符，只要路径里面的图片名称按krpano的规则来写，它就能自动获取到图片 -->
    <image>
      <cube url="panos/street1/street1_%s.jpg"/>
    </image>
  </scene>
  </scene>
</krpano>

小行星效果配置

<!-- 小行星效果的实现 -->
  <action name="skin_setup_littleplanetintro" scope="local">
    set_hotspot_visible(false);
    set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview));

    set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);
    lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);
    set(events[lp_events].onloadcomplete,
      delayedcall(0.5,
        if(lpinfo.scene === xml.scene,
          set(control.usercontrol, off);
          set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
          tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0), 3.0, easeOutQuad);
          delayedcall(3.0,
            set(control.usercontrol, all);
            tween(view.fovmax, get(lpinfo.fovmax));
            delete(global.lpinfo);
            set_hotspot_visible(true);
            if(skin_settings.thumbs AND skin_settings.thumbs_opened, skin_showthumbs() );
          );
          ,
          delete(global.lpinfo);
        );
      );
    );
  </action>

<!-- 初始化加载场景 -->
  <action name="startup" autorun="onstart">
    if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
    loadscene(get(startscene), null, MERGE);
    if(startactions !== null, startactions() );
  </action>

<!-- 是用来控制热点的显示和隐藏，在小行星动画加载完之前先隐藏所有热点 -->
  <action name="set_hotspot_visible">
    for(set(i,0),i LT hotspot.count,inc(i),
       if(%1 == false,
      if(hotspot[get(i)].visible == true,
        set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
        );
      ,
      if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
        set(hotspot[get(i)].visible,%1);
        );
      );
      
    );
  </action>

<!-- set(events[lp_events_].onxmlcomplete,null);是为了限制让小行星效果只在初始场景出现，而不是每次切换场景都用小行星 -->
  <events name="lp_events_" keep="true"
    onxmlcomplete="set(events[lp_events_].onxmlcomplete,null);
    if(device.webgl OR device.flash,
    skin_setup_littleplanetintro();
    ); "
  />

获取点位

在设置热点的时候，获取热点坐标的必须的，为了更方便地获取坐标，可以在全景图上定一个可以拖动的点位，获取它当前的坐标；

<!-- 拖拽事件 -->
<action name="draghotspot">
  spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
  sub(drag_adjustx, mouse.stagex, hotspotcenterx);
  sub(drag_adjusty, mouse.stagey, hotspotcentery);
  asyncloop(pressed,
    sub(dx, mouse.stagex, drag_adjustx);
    sub(dy, mouse.stagey, drag_adjusty);
    screentosphere(dx, dy, ath, atv);
    print_hotspot_pos();
    );
</action>

<scene name="street1" onstart="" lat="0" lng="0" heading="0.0">
 <view hlookat="0" vlookat="0" vlookatmin="-50" vlookatmax="41" fovtype="MFOV" fov="120" fovmin="80.5" fovmax="120" limitview="true" />
  <preview url="panos/street1/preview.jpg" />

  <!-- 下面这两段设置插件和插入热点，注意插件的代码要写在场景内部 -->
  <plugin name="hotspot_pos_info"
    type="text"
    html="drag the hotspots..."
    css="font-family:Courier;font-size: 25px;"
    padding="8"
    align="lefttop" x="10" y="10"
    width="600"
    height="200"
    enabled="false"
    />

  <hotspot name="spot100" url="hotspot.png" distorted="true" scale="0.5" ath="+25" atv="+5"  ondown="draghotspot();" />

  <image>
    <cube url="panos/street1/street1_%s.jpg"/>
  </image>
</scene>

js与krpano的通信

krpano调用js

在标签上绑定事件调用jscall即可，如

1 2	<hotspot onclick="jscall(fn())" />

在vue+ts里面，需要将事件绑定在window上

const _window: any = window

_window.fn = () => {
  // ...
}

js执行krpano方法

1 2	// call里面写对应的krpano方法，这里的krpano是初始化时给krpano对象的命名 krpano.call('lookat(180, 14.11, 109.8);')