@0xllllh/react-krpano 中文文档教程
React Krpano
krpano 的 React 绑定。
✨ Features
- Dynamic rendering of scenes and hotspots without generating xml
- Use Typescript to develop and provide a complete type definition file.
Dependencies
- krpano.js >= 1.20.9
- React >= 16.8
Installation
- With NPM
yarn add @0xllllh/react-krpano
- Download the latest Krpano from Krpano official website and unzip it to get JS file, then import it through the script tag of your index.html to make the script available globally.
<script src="krpano.js"></script>
How to use
Loading XML file
最基本的用法是通过Krpano组件的xml参数直接加载krpano xml文件。 Krpano 组件将忠实地根据 xml 配置进行渲染。
krpano.xml
<krpano onstart="loadscene(scene1);">
<scene name="scene1">
<image>
<cube url="https://some.jpg_%s" />
</image>
<hotspot
name="image_hotspot"
type="image"
url="https://0xllllh.github.io/krpano-examples/images/hotspot.png"
ath="0"
atv="0"
/>
</scene>
<view hlookat="0" vlookat="0" fovtype="VFOV" fov="90" fovmin="30" fovmax="150" />
</krpano>
App.css
.App {
width: 600px;
height: 400px;
}
App.tsx
ReactDOM.render(<Krpano className="App" xml="/krpano.xml" />, document.getElementById('app'));
Scene display and switching
为了简化实现和使用，krpano的图片标签的实现已经合并到场景组件。 场景的图片可以通过Scene组件的
images属性指定
要添加场景，需要使用Scene组件。 每一个代表一个场景，可以通过 Krpano 组件的 currentScene 属性指定活动场景。
ReactDOM.render(
<Krpano currentScene="scene0">
<Scene
name="scene0"
images={[{
type: 'cube',
url: 'https://qhyxpicoss.kujiale.com/r/2017/09/01/L3D221IS3QKUQUQBOGAPEK3P3XU888_7500x1250.jpg_%s',
}]}
/>
<Scene
name="scene1"
images={[{
type: 'cube',
url: 'https://qhyxpicoss.kujiale.com/r/2017/09/01/L3D221IS3QKUQUQBOGAPEK3P3XU888_7500x1250.jpg_%s',
}]}
/>
<View fov={90} fovmin={80} fovmax={120} />
</Krpano>,
document.getElementById('app'));
Hotspots
目前仅支持图像热点
使用热点组件可以轻松渲染热点。 支持一堆回调设置
const App = () => {
const [currentScene, setCurrentScene] = React.useState('scene0');
// Datas
const scenes = [{
name: 'scene0',
previewUrl: '/preview.jpg',
hotspots: [{
name: 'hot',
type: 'image',
url: 'hotspot.png',
ath: 0,
atv: 20,
onClick: () => setCurrentScene('scene1')
}]
},
name: 'scene1',
previewUrl: '/preview.jpg',
hotspots: []
}]
return (
<Krpano currentScene={currentScene}>
<View fov={90} fovmin={80} fovmax={120} />
{scenes.map(sc => (
<Scene name={sc.name} previewUrl={sc.previewUrl}>
{sc.hotspots.map(pt => <Hotspot {...pt} />)}
</Scene>
))}
</Krpano>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
Access unsuported features
由于这个项目刚刚开始开发，很多组件和功能还没有完成。 如果有需要优先支持的功能，可以在Github上提issue。 如果需要，获取后可以使用KrpanoActionProxy自行调用krpano函数。
各种回调函数都会获取KrpanoActionProxy实例作为参数，封装的方法可以用来控制krpano。 您还可以使用 renderer.KrpanoRenderer 获取 krpano 的本机实例。
const App = () => {
const [currentScene, setCurrentScene] = React.useState('scene0');
const onHotspotClick = React.useCallback((renderer: KrpanoActionProxy) => {
console.log(renderer.get('view.fov'));
setCurrentScene('scene1');
}, []);
return (
<Krpano
className="App"
currentScene={currentScene}
onReady={renderer => {
console.log('Ready message from App', renderer.krpanoRenderer);
}}
>
<View fov={90} fovmin={80} fovmax={120} />
<Scene name="scene0" previewUrl="/preview.jpg">
<Hotspot
name="hot"
type="image"
url="https://0xllllh.github.io/krpano-examples/images/hotspot.png"
ath={0}
atv={20}
onClick={onHotspotClick}
/>
</Scene>
<Scene name="scene1" previewUrl="/preview.jpg" />
</Krpano>
);
};
另外，style、action等标签可以写成xml，然后通过Krpano组件的xml属性导入。
pano.xml
<krpano>
<style name="hotspot_style" url="hotspot.png" scale="0.5" edge="top" distorted="true" onover="tween(scale,0.55);" onout="tween(scale,0.5);" />
...
</krpano>
App.tsx
const App = () => (
<Krpano
className="App"
xml="/pano.xml"
currentScene="scene0"
>
<Scene name="scene0" previewUrl="/preview.jpg">
<Hotspot
name="hot"
type="image"
style="hotspot_style"
ath={0}
atv={20}
/>
</Scene>
</Krpano>
);
❗️ Restrictions
- Only one krpano panorama is displayed on a page at a time. If you need to display multiple panoramas at the same time, a lighter solution will be more appropriate.
- React components only implement part of their functions for the time being.
