# react-krpano [demo](https://browniu.com/react-krpano/)
> krpano in react
[](https://www.npmjs.com/package/react-krpano) [](https://standardjs.com)
## 安装 Install
```bash
npm install --save react-krpano
```
## 依赖 Dependency
* 渲染引擎 A Krpano player globally referenced by `
```
* [配置文件包](https://github.com/browniu/react-krpano/tree/develop)
## 使用 Usage
```jsx
import React, { Component } from 'react'
import Krpano from 'react-krpano'
class Example extends Component {
render () {
return (
)
}
}
```
## 开发流程 workflow
1. 使用Krpano官方提供的[切片工具](https://krpano.com/)生成全景图分片(或者使用[精简包](https://github.com/browniu/react-krpano/tree/develop))
2. 下载[定制开发包](https://github.com/browniu/react-krpano/tree/develop)，将全景图分片包放入`krpano/pano/`
3. 安装并引入组件,`props`方式传入配置文件的路径
4. 对配置文件`krpano/tour.xml`进行二次开发
## 切图方式
### `MAKE VTOUR (VR-OPT) Droplet`（推荐）
普通加载，调用方式：
```xml
```
### `MAKE VTOUR (NORMAL) Droplet`
多级加载，适用于对图片缩放效果要求较高的场景，调用方式：
```xml
```
## 通信 Communication
### Xml => React (e.g.)
需要`props`传入所有回调函数
```jsx
constructor(props) {
//...
this.hooks = {
noParam:()=>this.noParam()
param: (e) => this.param(e)
}
//...
render () {
return (
)
}
//...
```
#### 无内部参数 No-Params
```xml
```
#### 携带内部参数 Params
```xml
jscall(calc('krpano.hooks.param("' + scene[get(xml.scene)].name + '")'));
```
### React => Xml (e.g.)
需要使用全局变量`window.krpano`
##### `Get` 方法
```javascript
window.krpano.get("view.vlookat"),window.krpano.get("view.hlookat")
```
##### `Call` 方法
```javascript
window.krpano.call("loadscene(scene_test2,null,MERGE,BLEND(1.0, easeInCubic))")
```
##### `Set` 方法
```javascript
window.krpano.set('view.vlookat', 0)
```
## Props 接口参数
|Name|Description|Defalt|Example|
|:--|:--|---|:--|
|`xml`|配置文件的路径|krpano/tour.xml|`tour.xml`|
|`hooks`| 提供给`Krpano` 调用的方法 |null|`{foo:()=>this.foo()}`|
|`mounted`| 资源加载完毕的回调函数 |null|{this.mounted}|
|Loading| 加载页文本配置 |Null|loading={'loading'}|
|dev| 开发者模式 |false|true|
|gray| 重力感应 |true|true|
## Config 配置文件
### 新建场景
```xml
```
### 添加热点
```xml
...
```
```xml
...
...
```
### 动态热点
```xml
...
...
```
### 调整缩放范围
`view`的`fov`属性控制缩放(单位%)
```xml
...
...
```
### 限制视角
`view`的`fov`属性控制缩放(单位%)
```xml
...
...
```
> 限制视角不要与行星入场混用
### 自动旋转
配置是否允许自动旋转视角
```xml
...
...
```
### 锁定视角
| 参数 | 释义 |
| ---- | ------------ |
| h | 锁定垂直视角 |
| v | 锁定水平视角 |
```javascript
window.krpano.hooks.localView(h|v)
```
```
window.krpano.hooks.unlocalView()
```
### [移镜入场](https://github.com/browniu/react-krpano/blob/master/example/public/krpano/style/style.xml)
| 参数 | 释义 | 类型 |
| ----- | ------------------------------------- | -------- |
| fov | 初始景深 | number |
| angle | 视角偏移 | number |
| call | 回调函数（须在hooks中注册过才能调用） | function |
```xml
...
...
```
### 星球入场
配置是否开启星球视角入场
```xml
...
...
```
### 光晕
```xml
...
...
```
```xml