pano_museum/src/framework/vr/index.vue

<template>
  <div class="panocon">
    <div id="pano"></div>
    <span v-if="!hideScale" class="scale" @click="onFullScreen">
      <img :src="require('@/assets/images/icons/tool_full@2x.png')" alt="" />
    </span>
  </div>
</template>

<script>
import * as krfn from "@/core/index.js";
import { getSceneInfo } from "@/api";
import config from "@/config";

import browser from "@/utils/browser";
import { $smallWaiting1 } from "@/components/shared/loading";
import html2canvas from 'html2canvas';

let __krfn = krfn.default;
window.__krfn = __krfn;

window.screenshot = function () {
  let canvas = $("#krpanoSWFObject canvas")[0];
  return html2canvas(canvas);
};

export default {
  data() {
    return {
      activeItem: "",
      someData: "",
      hideScale: browser.urlQueryValue("hideScale"),
    };
  },
  methods: {
    onFullScreen() {
      let element = document.documentElement;
      if (this.isFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      this.isFullscreen = !this.isFullscreen;
    },
    onclick() {
      let canvas = $("#krpanoSWFObject canvas")[0];
      let krpano = document.getElementById("krpanoSWFObject");
      __krfn.utils.setInitView(krpano, canvas);

      
   },
    getSceneInfo() {
      getSceneInfo({}, (data) => {
        this.activeItem = data.data;
      });
    },
  },

  mounted() {
    window.vrVrInitFn = () => {
      $smallWaiting1.hide();
    };
    var settings = {
      "events[skin_events].onloadcomplete": "js(window.vrVrInitFn());",
    };

    // this.getSceneInfo()
    $("#pano").empty();
    removepano("#pano");
    $smallWaiting1.show();

    embedpano({
      // xml: "%HTMLPATH%/static/template/tour.xml",
      xml: `${this.$cdn}/pano/${config.sceneNum}/vtour/tour.xml`,
      swf: "%HTMLPATH%/static/template/tour.swf",
      target: "pano",
      html5: "auto",
      mobilescale: 1,
      vars: settings,
      webglsettings: { preserveDrawingBuffer: true },
      passQueryParameters: true,
    });
  },
};
</script>

<style lang="less" scoped>
.panocon {
  width: 100%;
  height: 100%;
  #pano {
    width: 100%;
    height: 100%;
  }
  .scale {
    font-size: 0;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
    position: absolute;
    color: #fff;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    > img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
</style>