react vr中文網(wǎng)：www.vr-react.com
react vr qq群：481244084
示例源碼 github：https://github.com/LiuC520/react_vr_pdf/
如何在react 360中顯示pdf
原理：
因?yàn)檎麄€(gè)react 360就是在threejs的基礎(chǔ)之上來的谋逻，屬于webvr的一種，所以可以用渲染紋理的方式展示pdf觅够，首先可以用canvas展示pdf，然后把這個(gè)canvas放到texture紋理之上仆抵，而在react 360的組件中可以添加紋理屬性的組件正好有那么幾個(gè)：Box(立方體)架曹、Plane(平面)莫杈、Cylinder(曲面)诱鞠、Model(3D模型)、Sphere(球形)跳昼。
當(dāng)然你也可以自己定義組件來添加紋理的屬性般甲，后面有時(shí)間再給大家講，如何自己自定義具有紋理的組件鹅颊。
此處我用的具體的方法是：
1敷存、用pdf.js在canvas中渲染pdf文件，在html中添加pdf.js文件
2堪伍、創(chuàng)建NativeModule锚烦，獲取pdf并渲染
3、在client.js中添加NativeModule
4帝雇、在你的業(yè)務(wù)代碼中調(diào)用Module
1涮俄、具體的代碼如下
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js"></script>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
</script>
2、創(chuàng)建PdfModule.js
內(nèi)部兩個(gè)方法尸闸，一個(gè)是showPdf彻亲，傳的參數(shù)是pdfurl、width 和height scale吮廉，scale是pdf的清晰度
內(nèi)部原理是：創(chuàng)建一個(gè)canvas節(jié)點(diǎn)苞尝，然后給個(gè)寬高，獲取到canvas的上下文宦芦，然后是showpage方法宙址，獲取pdf文件，然后渲染pdf到canvas调卑，內(nèi)部的方法就是pdf.js的方法抡砂。
最后一行
this._context.registerTextureSource('fps', this.canvas, {updateOnFrame: true}); // Needs an update each frame
這句話的意思是注冊一個(gè)紋理源，注冊到context上恬涧，紋理的名字是fps注益，第二個(gè)參數(shù)渲染的源，這個(gè)參數(shù)就是html節(jié)點(diǎn)溯捆，第三個(gè)參數(shù)是配置文件聊浅，這里面updateOnFrame表示每一幀都更新，如果是靜態(tài)的文件现使，就不需要更新。
import {Module} from 'react-360-web';
let pagenum = 1 // pdf cunrrentNum
let pageRendering = true // is pdf rendering
export default class PdfModule extends Module{
constructor(context){
super('PdfModule')
this._context = context
}
$showPdf(pdfUrl ,width, height , scale ){
this.pdfUrl = pdfUrl
this.width = width
this.height = height
this.scale = scale
this.canvas = document.createElement('canvas');
this.canvas.width = width;
this.canvas.height = height;
this.cx = this.canvas.getContext('2d');
this.showPage(pagenum)
this._context.registerTextureSource('fps', this.canvas, {updateOnFrame: true}); // Needs an update each frame
}
showPage (num) {
const url = this.pdfUrl
const width = this.width
const height = this.height
const scale = this.scale
const canvas = this.canvas
const ctx = this.cx
pageRendering = true;
// document.getElementById('content').style.display = 'block';//show pdf loading
pdfjsLib.getDocument(url).then(function(pdf){
if(num === 'next'){
pagenum ++;
}else if(num === 'last'){
pagenum --;
}
if(pagenum < 1){
pagenum = 0
return
}else if(pagenum > pdf.numPages){
pagenum = pdf.numPages
return
}
pdf.getPage(pagenum).then(function(page){
const viewport = page.getViewport(scale);
canvas.height = height;
canvas.width = width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
// document.getElementById('content').style.display = 'none';//hide pdf loading
})
.catch(e=>{
pageRendering = false;
// document.getElementById('content').style.display = 'none';//hide pdf loading
});
}).catch(e=>console.log(e));
})
}
}
3旷痕、在client.js中注冊module
const r360 = new ReactInstance(bundle, parent, {
// Add custom options here
fullScreen: true, nativeModules:[
ctx => new PdfModule(ctx),
],
...options,
});
4碳锈、在業(yè)務(wù)代碼中調(diào)用pdf
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
VrButton,
texture,
Plane,
NativeModules
} from 'react-360';
const PDF = NativeModules.PdfModule;
export default class show_pdf_in_react360 extends React.Component {
componentWillMount(){
PDF.showPdf('http://localhost:8081/output.pdf',512,1024,2)
}
render() {
return (
<View style={styles.panel}>
<Plane
dimWidth={512}
dimHeight={512}
dimDepth={100}
texture={texture('fps')} // Use our custom texture
/>
<View style={styles.greetingBox}>
<VrButton onClick={()=>{
PDF.showPage('next') // show next page
// PDF.showPage('last') // show last page
}}>
<Text style={styles.text}>
enter
</Text>
</VrButton>
</View>
</View>
);
}
};
示例源碼 github：https://github.com/LiuC520/react_vr_pdf/
