qjkankan_v1.1.1/packages/qjkankan-editor/src/core/utils.js

import Vue from 'vue'
import { convertJQHotspot } from './hotspot'

let vue = new Vue()

export default class Utils {
  constructor() {

  }
  /**
   * 设置初始视角
   */
  setInitView(krpano, canvas) {
    let url = this.setInitAngleImg(canvas);
    var sceneName = krpano.get('xml.scene');
    var hlookat = krpano.get("view.hlookat");
    var vlookat = krpano.get("view.vlookat");
    return {
      sceneName,
      hlookat,
      vlookat,
      url
    }
  }

  scaleCanvas(canvas, width, height) {
    let w = canvas.width
    let h = canvas.height;

    if (width == undefined) {
      width = w;
    }
    if (height == undefined) {
      height = h;
    }
    var retCanvas = document.createElement('canvas');
    var retCtx = retCanvas.getContext('2d');
    retCanvas.width = width;
    retCanvas.height = height;
    retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
    return retCanvas;
  }

  getDataURL(canvas, type, width, height) {
    let cas = this.scaleCanvas(canvas, width, height);
    return cas.toDataURL(type, 1);
  }

  setInitAngleImg(mycanvas) {
    var url = this.getDataURL(mycanvas, "image/jpeg", 600, 400);
    return url
  }
  radarRotate() {
    // console.log(sceneName,hlookat);
  }

  /**
   * 编辑热点
   */
  // 1280x720
  // 1440x900
  //1290x 1280
  // 998px
  edithotspot(krpano, param) {
    try {
      const hotspot = convertJQHotspot(param);
      const hotspotStyle = Object.values(hotspot.style);
      const hotspotString = hotspotStyle.join('|');

      const hotspotSize = (Number(hotspot.size) || 1) * 40;
      let icon = hotspot.icon.replace(/,/g, '|');
      const callString = `editJQHotspot(
        ${hotspot.id},
        ${hotspot.type},
        ${hotspot.title},
        "${icon}",
        ${hotspot.ath},
        ${hotspot.atv},
        "${hotspot.link}",
        ${hotspotSize},
        ${hotspot.visible},
        "${hotspotString}"
        )`;
      // krpano.stopcall(callString);
      krpano.call(callString);
    } catch (error) {
      console.error('error', error);
    }
  }


  /**
   * 添加热点
   */

  addhotspot(krpano, param, type) {
    /**
     * type: 0,系统图标 , 1.自定义图际. 2.序列帧  3.个性标签
     */
    try {
      krpano.set("curscreen_x", krpano.get('stagewidth') / 2);
      krpano.set("curscreen_y", krpano.get('stageheight') / 2);
      krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
      const hotspot = convertJQHotspot(param);
      const hotspotStyle = Object.values(hotspot.style);
      const hotspotString = hotspotStyle.join('|');
      const hotspotSize = (Number(hotspot.size) || 1) * 40;
      const ath = hotspot.ath != '' ? hotspot.ath : krpano.get("curscreen_ath");
      const atv = hotspot.atv != '' ? hotspot.atv : krpano.get("curscreen_atv");
      let icon = hotspot.icon.replace(/,/g, '|');
      const callString = `addJQHotspot(
        ${hotspot.id},
        ${hotspot.type},
        ${hotspot.title},
        "${icon}",
        ${ath},
        ${atv},
        "${hotspot.link}",
        ${hotspotSize},
        ${hotspot.visible},
        "${hotspotString}"
        )`;
      krpano.call(callString);
    } catch (error) {
      console.error('error', error);
    }
  }

  /**
   * 获取鼠标当前位置
   */

  getCurrentMousePosition(krpano, hotspotName) {
    let panoW = krpano.get('stagewidth')
    let panoH = krpano.get('stageheight')

    let stagex = krpano.get('mouse.stagex')
    let stagey = krpano.get('mouse.stagey')

    if (stagex < 0 || stagex > panoW || stagey < 0 || stagey > panoH) {
      return
    }
    krpano.call('screentosphere(mouse.stagex, mouse.stagey, toh, tov)')
    // const toh = krpano.get('toh');
    // const tov = krpano.get('tov');
    // console.log('toh', toh);
    // console.log('tov', tov);
    krpano.set(`hotspot[${hotspotName}].ath`, krpano.get('toh'));
    krpano.set(`hotspot[${hotspotName}].atv`, krpano.get('tov'));

  }

  htmlEncode(str) {
    var s = "";
    if (str.length == 0) return "";
    s = str.replace(/\'/g, "&#39;");
    s = s.replace(/\"/g, "&quot;");
    s = s.replace(/\(/g, "（");
    s = s.replace(/\)/g, "）");
    s = s.replace(/,/g, "，");
    return s;
  }

  /**
   * 
   * @param {*} 定位热点 
   */

  looktohotspot(krpano, hotspotName) {
    var curFov = krpano.get('view.fov');
    krpano.call('looktohotspot(' + hotspotName + ',' + curFov + ')');
  }


  /**
   * 
   * @param {*} 定位热点 
   */

  getHotspotHV(krpano, hotspotName) {
    var ath = krpano.get(`hotspot[${hotspotName}].ath`);
    var atv = krpano.get(`hotspot[${hotspotName}].atv`);
    return { ath, atv }
  }


  /**
   * 打开热点链接
   */

  linkopen(sceneCode, id) {
    if (window.location.pathname.indexOf('show') > -1) {
      vue.$bus.emit('clickHotspot', id)
    }
    else if (window.location.pathname.indexOf('edit') > -1) {
      vue.$bus.emit('openHotspot', id)
    }
    else {
      window.parent.postMessage({ event: 'hotspot', targetCode: sceneCode }, '*')
    }

  }





  /**
   * 初始化
   */

  initHotspot(krpano, someData, type) {

    if (!someData) {
      return
    }
    let mysd = someData
    if (typeof someData == 'string') {
      mysd = JSON.parse(someData)
    }

    mysd.hotspots.forEach(item => {
      this.addhotspot(krpano, item, type)
    });
  }

  /**
   * 显示隐藏热点
   */

  toggleHotspot(krpano, toggle) {
    try {
      krpano.call(`set_hotspot_visible(${toggle})`);
    } catch (e) {
      e
    }
  }

  /**
   * 显示隐藏热点
   */

}


// toggleHotspot(krpano,someData,toggle){
//   if (!someData) {
//     return
//   }
//   let mysd = JSON.parse(someData)
//   mysd.hotspots.forEach(item => {
//     krpano.set(`hotspot[${item.name}].visible`,toggle);
//   });
// }