pviewer

passkee-panorama-viewer

Wrapped krpano panorama viewer export APIs

Important description

Please add key of krpanoCopyPath and value of /your-project-public-copy-path into your project package.json file.

After the this package install, it will be copies the krpano core file into your configulation path.

Startup

import into your project

import Panorama from '@passkee/panorama-viewer';

Instantiation

const panorama = new Panorama(selector, imageBasePath, resourcePath, options, editMode?);

• selector: A document id for krpano core, like so: pano
• imageBasePath: Load image prefix path, like so http://images.com/
• resourcePath: Project resource path
• options:
  • cubeRule: The rule for cube type image, default: /{{pictureId}}_%s.jpg
  • tileRule: The rule for tile type image, default: /{{pictureId}}-{{quality}}-%s-%v-%h.jpg
  • sphereRule: The rule for sphere type image, default: /{{pictureId}}-sphere.jpg
  • forceTouch: Listening touch event in touch support desktop platform, default: false
  • rotateType: The type of auto rotate, accept auto|gyro|none default: auto
  • productVisible: Set the product hot spots defautl visible status, default: true
• editMode: 开启编辑模式
  • 跳转热点和描述热点 支持拖拽
  • 屏蔽跳转热点跳转功能，转为 clickLink 事件
  • dropHotspot 事件
  • 开启截图功能

Load Data into scene

panorama.loadScenes(scenes, defaultId);

• scenes[]: List of data for scene builder
  • id: Unique scene id
  • pictureId: Replace {{picture Id}} for any rule
  • imageType?: Type for room builder, one of sphere, cube ,tile, default: cube
  • qualityList?: Use for image type is tile, size levels for paving a cube face, like so: [1024, 512, 256]
  • tileSize?: Use for image type is tile, size for paving tile to build a cube face, like so: 512
  • vlookat 初始视角横向偏移
  • hlookat 初始视角纵向偏移
  • hotSpots?: List of hot spots position
    • text: The label display name
    • phi: Tilt angle for the spherical coordinates of the hot spot in degrees.
    • theta: Azimuth for the spherical coordinates of the hot spot in degrees.
    • sceneId: Id for shuttle to scene.
  • productHotSpots?: List of product hot spots position
    • id: The fallback key when user click it.
    • phi: Tilt angle for the spherical coordinates of the hot spot in degrees.
    • theta: Azimuth for the spherical coordinates of the hot spot in degrees.
  • descHotSpots
    • id: The fallback key when user click it.
    • phi: Tilt angle for the spherical coordinates of the hot spot in degrees.
    • theta: Azimuth for the spherical coordinates of the hot spot in degrees.
    • title
    • desc
• defaultId: Show the default scene from id

Interfaces

• panorama.switchScene(sceneId): Switch the scene from id
• panorama.enterFullScreen(): Enter full screen mode
• panorama.exitFullScreen(): Exit full screen mode
• panorama.startRotate(): Run the camera auto rotate
• panorama.stopRotate(): Stop the camera auto rotate
• panorama.zoomIn(): Zoom in set the fov for the camera
• panorama.zoomOut(): Zoom out set the fov for the camera
• panorama.zoomTo(zoom: number): Set a zoom value fov for the camera
• panorama.enterVR(): Enter VR mode
• panorama.exitVR(): Exit VR mode
• panorama.startGyro(): Start gyro mode
• panorama.endGyro(): Stop gyro mode
• panorama.setProductVisible(visible: boolean): Set product hot spot visible status
• panorama.getKrObject(): Return krpano core object
• panorama.getVRSupport(): Return the bowser and krpano core is support Web VR feature

Events

The list of events you can use panorama.on(event, callback) to listen.

• error: (message: string): Fire from any error.
• ready: (): Fire from the core loaded
• sceneLoaded: (): Fire from the scene loaded from krpano core.
• updateVRStatus: (status: boolean): Fire from ensure entered/exited VR mode.
• updateGyroStatus: (status: boolean): Fire from ensure gyro status updated
• updateRotateStatus: (status: boolean): Fire from ensure rotate status updated.
• updateZoom(zoom: number): Fire from the zoom value updated.
• sceneChanging: (sceneId: string): Fire from the scene changing
• sceneChanged: (sceneId: string): Fire from the scene changed.
• updateFullScreen: (status: boolean): Fire from full screen mode updated.
• updateVRSupportState: (status: boolean): Fire VR support status when pano unavailable set.
• clickProduct: (id:string, hotspotName:string): Fire product id when product hot spot clicked.

Development

npm start                                             # Develop
npm run test                                          # Test
npm publish --registry='http://192.168.1.69:4873'     # Deploy

License

For a detailed explanation on how things work, checkout the rollup doc and parcel

Copyright (c) 2019-present, passkee Front-End Team

加密

./krpanotools register 10bSSDa8rUDm1wlhsfEnZbqyNDGW15RiOhM349u+v7UMntvnJEK5jn0w+6eCOlW6Wwgyh8sLbxxucq64LsIjz7+5krj+CA8FT0X6j77xjXOJygt6BKjkL4V0q8N0QQJhg41cGs8qhvmk58zjsC2aL9qZwSfuMGsNmE/8pTa5VvqIxwSi0gjpgDo8KjFyi5Z3k+iKu3uejMokHVYh/4IGX8r3YN2XHwF0fURfo/nrT8Zpi47fwa8ZCwynqyyEJ22O8+IRkaRzuTPxl9dFecRnzcpDEAm9KfI= ./krpanotools encrypt -in=./screenshot.js -out=./screenshot2.js

新增编辑模式

new Panorama(selector,
  imageBasePath,
  resourcePath,
  options,
  editMode? // <---
);

• editMode: 开启编辑模式
  • 跳转热点和描述热点 支持拖拽
  • 屏蔽跳转热点跳转功能，转为 clickLink 事件
  • dropHotspot 事件
  • 开启截图功能

新增事件

• log: (message: string): for debug
• clickDesc:(id:string, hotspotName:string)
• clickLink:(id:string, hotspotName:string, isCircleLink: boolean): only in edit mode
• dropHotspot: (hotspotName:string): only in edit mode

全景编辑 相关接口

/**
   * 加载场景
   * @param {ISceneData} scenes
   * @param {string} actionSceneId
   * @param { linkVisible?: boolean; productVisible?: boolean; descVisible?: boolean } options
   */
  public loadHome(
    scenes: ISceneData[],
    actionSceneId: string,
    options?: { linkVisible?: boolean; productVisible?: boolean; descVisible?: boolean },
  )


  // 获取视角坐标
  public getViewPoint(): {
    vlookat:number // 垂直转角 (-90 到 + 90)
    hlookat:number // 水平转角 (-180 到 + 180)
  }

   /**
   *
   * @param x 截图起始点x坐标，基于canvas原始尺寸
   * @param y 截图起始点y坐标，基于canvas原始尺寸
   * @param width 截图宽度，基于canvas原始尺寸
   * @param height 截图宽度，基于canvas原始尺寸
   * @param destWidth 生成图片宽度，基于常规像素单位
   * @param destHeight 生成图片高度，基于常规像素单位
   * @param quality 质量 默认 0.8
   */
  public getSnapshot(
    x: number,
    y: number,
    width: number,
    height: number,
    destWidth: number,
    destHeight: number,
    quality: number = 0.8,
  )

  /**
   * 获取指定热点坐标
   * @param name link热点id
   * @return {
      phi,
      theta,
    };
   */
  public getHotspotPosition(name: string)

  /**
   * 更换指定link热点样式
   * @param id link热点id
   */
  public changeLinkStyleById(id: number | string, style: number)

  /**
   * 删除指定id的描述热点
   * @param id 描述热点id
   */
  public removeDescById(id: number | string)

  /**
   * 隐藏指定id的描述热点
   * @param id 描述热点id
   */
  public hideDescById(id: number | string)

  /**
   * 显示指定id的描述热点
   * @param id 描述热点id
   */
  public showDescById(id: number | string)

  /**
   * 删除指定索引的商品热点
   * @param index 商品热点索引
   */
  public removeProductByIndex(index: number)

  /**
   * 隐藏指定索引的商品热点
   * @param index 商品热点索引
   */
  public hideProductByIndex(index: number)

  /**
   * 隐藏指定索引的商品热点
   * @param index 商品热点索引
   */
  public showProductByIndex(index: number)

  /**
   * 位置热点显示隐藏
   * @param {boolean} visible
   * @return {Promise<this>}
   */
  public setLinkVisible(visible: boolean): Promise<this>

  /**
   * 商品热点显示隐藏
   * @param {boolean} visible
   * @return {Promise<this>}
   */
  public setProductVisible(visible: boolean): Promise<this>

  /**
   * 描述热点显示隐藏
   * @param {boolean} visible
   * @return {Promise<this>}
   */
  public setDescVisible(visible: boolean): Promise<this>

/**
   *
   * @param id
   * @param title
   */
  public editDescHotspot(id: number | string, title: string) : Promise<this>

  /**
   *
   * @param id
   * @param title
   */
  public makeDescHotspot(id: number | string, title: string) : Promise<this>



  // 全景显示初始视角
  // 场景数据带入这两个参数即可
  type ISceneData = {
    id: string;
    hotSpots?: IHotSpotsItem[];
    pictureId: string;
    picId?: string;
    productHotSpots?: IProductHotSpotItem[];
    imageType?: ImageType;
    qualityList?: number[];
    tileSize?: number;
    snashotImgId?: string; // <--- 初始视角截图id
    vlookat?: number; // <---
    hlookat?: number; // <---
  };

  // 位置热点样式
  interface IHotSpotsItem {
    phi: number;
    theta: number;
    id: string;
    text: string;
    style: 0 | 1 | 2;  // <--- 中 左 右
  }

  // 描述热点
  type ISceneData = {
    id: string;
    hotSpots?: IHotSpotsItem[];
    productHotSpots?: IProductHotSpotItem[];
    descHotSpots?: IDescHotSpotsItem[];  // <--- 描述热点
    pictureId: string;
    picId?: string;
    imageType?: ImageType;
    qualityList?: number[];
    tileSize?: number;
    vlookat?: number;
    hlookat?: number;
  };

  interface IDescHotSpotItem {   // <--- 描述热点数据结构
    phi: number;
    theta: number;
    id: string;
    title?: string;
    desc?: string;
    visible?: boolean; // <--- 可视状态，passkee-pano不使用这个设置，需要调用接口去控制各个热点的显隐状态
  }

  interface IProductHotSpotItem {
    phi: number;
    theta: number;
    id: string;
    product_name?: string;
    brand_name?: string;
    visible?: boolean;  // <--- 可视状态，passkee-pano不使用这个设置，需要调用接口去控制各个热点的显隐状态
  }