Vue3嵌入krpano

最新推荐文章于 2024-07-06 16:47:02 发布

Selicens

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量1.9k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Web_ChuXia/article/details/125979600

版权

krpano是什么：

krpano是一款全景漫游制作软件和工具，兼容HTML5和Flash，支持Webgl下的WebVR展示 krpano官网

准备工作：

将krpano使用droplet生成的文件夹放入工程项目
没有下载krpano或者仅作练习可以在https://gitee.com/hkp123/pano_vue中将static文件夹复制进项目，static文件夹目录结构如下：

static
	└─vtour
	    ├─panos                        // 放全景图的文件夹，包含切片图、缩略图、预览图
	    ├─plugin                       // 放官方及第三方插件的文件夹
	    └─skin                         // 包含一系列默认皮肤如vtourskin.xml，在tour.xml中通过include嵌入使用
	    │ tour.html                    // 在网页预览全景漫游
	    │ tour.js                      // krpano的HTML5 viewer以及嵌入html的脚本文件
	    │ tour.swf                     // krpano的flash viewer
	    │ tour.xml                     // 存放全景漫游设置
	    │ tour_editor.html             // 可视化的添加热点和设置初始化视角
	    │ tour_testingserver.exe       // windows系统打开测试服务器
	    │ tour_testingserver_macos.exe // mac系统打开测试服务器

在普通html页面中嵌入，本地预览时浏览器会黑屏，须在服务器环境下打开

<head>
	<style>
		html,body{height: 100%; width: 100%;}
	</style>
</head>
<body>
	<script src="/staic/vtour/tour.js"></script>
	<div id="pano" style="width: 100%; height: 100%;">
		<script>
			embedpano({
				swf: "/staic/vtour/tour.swf", 
				xml: "/staic/vtour/tour.xml", 
				target: "pano", 
				html5: "auto", 
				mobilescale: 1.0, 
				passQueryParameters: true
			});
		</script>
	</div>
</body>

在vue中嵌入

与在普通嵌入相同，在index.html中引入vtour.js，index.html所在位置：vue-cli创建的工程是在public文件夹下，vite创建的工程则是在根目录

// index.html
<body>
    <div id="app"></div>
    <script src="/static/vtour/tour.js"></script>
</body>

// vue2嵌入
<template>
    <div class="container">
        <div id="pano"></div>
    </div>
</template>
<script>
	export default {
		mounted() {
			embedpano({
				swf: "/staic/vtour/tour.swf", 
				xml: "/staic/vtour/tour.xml", 
				target: "pano", 
				html5: "auto", 
				mobilescale: 1.0, 
				passQueryParameters: true
			});	
		}
	}
</script>
<style scoped>
    .container{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    #pano{
        width: 100%;
        height: 100%;
    }
</style>

template与style一样

// vue3嵌入
<script setup>
	import { onMounted } from 'vue'
	onmounted(()=>{
		embedpano({
				swf: "/staic/vtour/tour.swf", 
				xml: "/staic/vtour/tour.xml", 
				target: "pano", 
				html5: "auto", 
				mobilescale: 1.0, 
				passQueryParameters: true
		});	
	})
</script>

embedpano中的参数

参数	默认值	描述
swf		查看器“.swf”文件的名称和路径
xml		启动 xml 文件的名称和路径
target		设置应嵌入全景查看器的目标 html 元素
id	krpanoSWFObject	内部查看器对象的 ID
bgcolor	#000000	查看器的背景色
html5	only	可选auto\ fallback\ only\ always\ never
wmode		设置 Flashplayer wmode
localfallback	http://localhost:8090	可选An url of the krpano Testing Server，false，error，none
vars		传递一个带有 krpano variable：value 对的 Javascript 对象，可用于添加新设置或覆盖已在 xml 中定义的设置
initvars		传递一个带有 krpano variable：value 对的 Javascript 对象
basepath		置自定义基路径，用于解析相对于 krpano swf 文件的路径
consolelog	false	定义是否也应将 krpano 日志/跟踪消息发送到浏览器 Javascript 控制台
mwheel	true	用于控制鼠标滚轮支持的布尔设置
capturetouch	true	用于控制触摸事件的捕获的布尔设置
focus	true	在启动时为查看器提供输入/键盘焦点
webglsettings		传递具有用于创建 WebGL 上下文的特殊设置的对象
webxr	auto	WebXR API 支持，可选auto，preferwebvr，prefer或者true，no或者false
mobilescale		用于选择性地对移动设备使用不同全局比例的设置
safearea	autoe	设置苹果设备全屏展示，可选auto，true，false
touchdevicemousesupport	true	用于选择性地禁用触摸设备上的鼠标支持的设置
fakedevice		伪造 krpano 设备检测设置，可选mobile， tablet，desktop
onready		设置回调函数，参数是krpano本身
onerror		设置自定义嵌入错误处理函数，将使用错误消息字符串作为参数来调用
passQueryParameters	false	默认false，将 http 查询参数从 url 作为变量传递/重定向到 krpano 查看器