Wrapped krpano panorama viewer export APIs
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.
import Panorama from '@passkee/panorama-viewer';
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
- cubeRule: The rule for cube type image, default:
- editMode: 开启编辑模式
- 跳转热点和描述热点 支持拖拽
- 屏蔽跳转热点跳转功能,转为 clickLink 事件
- dropHotspot 事件
- 开启截图功能
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
- 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
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.
npm start # Develop
npm run test # Test
npm publish --registry='http://192.168.1.69:4873' # Deploy
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不使用这个设置,需要调用接口去控制各个热点的显隐状态
}