vr全景krpano + vue3
krpano + vue3
1. 引入
1.1 index.html中引入 tour.js
//static 存放krpano生成的vtour文件
<script src="./static/vtour/tour.js"></script>
1.2 页面中创建pano 输出节点
<div id="pano"></div>
1.3 在mounted中初始化节点
onMounted(() => {
embedpano({
swf: "./static/vtour/tour.swf",
xml: "./static/vtour/tour.xml",
target: "pano",
html5: "auto",
mobilescale: 1.0,
passQueryParameters: true,
})
})
2.操作krpano
2.1 krpano标签介绍
// view标签方法 元素控制全景的视野，例如起始位置、视域范围、可缩放范围、是否限制，限制观看的 区域等
fov="90.0" 默认视角的缩放
hfov="" 当前水平视野（只读）
vfov="" 当前垂直视野（只读）
fovmin="1.0" 默认视角缩放最大值
fovmax="179.0" 默认视角缩放最小值
maxpixelzoom="" 默认视角最大缩放倍数
mfovratio="1.333333" 最大的屏幕尺寸的宽高比例
distortion="0.0" 鱼眼视角失真设置0.0至1.0之间（扭曲程度）
fisheye="0.0" 鱼眼视角设置0.0至1.0之间（扭曲程度）（旧）
distortionfovlink="0.5" fov值与鱼眼视角的关联值，默认0.5(0.0-3.0之间)
stereographic="true" 是否启动立体鱼眼投影效果（小行星）
pannini="0.0" 设置“Pannini / vedutismo”投影效果
architectural="0.0" 建筑视角设置 0.0 至1.0之间
architecturalonlymiddle="true" 是否只对中间区域的图像实行建筑投影
//Include 标签导入其他配置XML，相当于复制其他XML文件内容到主XML。
<include url=".xml"/>
//Preview 预览图设置，指定一张全景预览图，以便在读取过程中，过渡显示，即全景完全载入之前的模糊图像
<preview url="pano_preview.jpg" />
<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999/>
<preview type="SPHERE" url="preview.jpg" details="16"/>
<preview type="CUBESTRIP" url="cspreview.jpg"/>
//Image 全景图设置，包括全景图类型、渐进分辨率切片显示等。
//Area 全景图在浏览器中的显示区域大小 定义全景图像展示的区域/窗口。有两种定义区域位置和尺寸的模式： 或通过定义尺寸和位置 (mode=align) 或定义边界边距 (mode=border) 可在onresize事件中动态改变/调整这些设定。如果在onresize事件之外改动了area设置，那 么在下一次屏幕刷新时候将会调用一个onresize事件，对于新的区域/窗口尺寸作出回应。注意 所有的 / 元素都要放在这个区域内。如果要把 / 元素放在区域外面，需设置layer/plugin的STAGE属性。
mode="align" 定义区域的模式，排列align和边界border两种align、border
align="lefttop" 排列对齐时[X,Y]的坐标参考系，可选的值为：lefttop、left、leftbottom、top、center、bottom、righttop、right、rightbottom
x="0" 基于排列方式偏移的X坐标
y="0" 基于排列方式偏移的Y坐标
width="100%" 区域
height="100%"
//Control 设置鼠标、键盘以及触摸设备对全景浏览的控制方式
usercontrol="all" 用户控制方式（all,mouse,keyb,off）
mouse="drag" 控制方式（drag，moveto，dra g3d（仅限flash））
touch="drag" 控制方式（drag，moveto，dra g3d（仅限flash））
dragrelative="true" 参数设置
draginertia="0.1" 惯性
dragfriction="0.9" 摩擦力
drag_oldmode="false" 旧模式（html5）
movetorelative="true" 参数设置
movetoaccelerate="1.0" 加速度
movetospeed="10.0" 最大速度
movetofriction="0.8" 摩擦力
movetoyfriction="1.0" 垂直摩擦力
keybaccelerate="0.5" 加速度
keybspeed="10.0" 速度
keybfriction="0.9" 摩擦力
keybinvert="false" 反转
keybfovchange="0.75" 按钮改变视角
mousefovchange="1.0" 鼠标滚轮改变视角
fovspeed="3.0" 改变视角速度
fovfriction="0.9" 改变摩擦力
zoomtocursor="false" 放大
zoomoutcursor="true" 缩小
touchzoom="true" 手势缩放
keycodesleft="37" 左键
keycodesright="39" 右键
keycodesup="38" 上键
keycodesdown="40" 下键
keycodesin="" 放大键
keycodesout="" 缩小键
keydownrepeat="true" 连续按键
bouncinglimits="false" 反弹（仅限html5）
//Cursors cursors为鼠标光标样式 html5可以使用standard,draggingandmoving调用系统样式，flash模式可以自定义图片。
standard="default" 标准
dragging="move" 拖动
moving="move" 移动
url="" 光标图片地址
type="8way" 光标方向模式，是4个方向移动更换图片，还是8个方向移动都 更换图片（drag，4way，8way）
move="" 设定光标移动时显示图片
drag="" 设定鼠标按下时显示图片
arrow_l="" 以下是8个方向移动时对应显示的鼠标图片
arrow_r=""
arrow_u=""
arrow_d=""
arrow_lu=""
arrow_ru=""
arrow_ld=""
arrow_rd=""
//Autorotate 管理与全景图自动旋转的设置。
enabled="false" 是否开启自动旋转
waittime="1.5" 用户不对屏幕操作后，开始自动旋转的等待时间
accel="1.0" 旋转加速度：角度/秒
speed="10.0" 自动旋转速度：角度/秒
horizon="0.0" 例如:-45表示向上45度仰视;45表示向下45度俯视;
tofov="off" 缩放到特定的视区
zoomslowdown="true" 相对于当前的缩放/视场速度，减慢自动旋转速度，以 获得相同的视觉速度在所有的缩放距离
interruptionevents="userviewchange|layers|keyboard" 定义哪些事件将中断自动旋转(以及 onidle 事件)，可以组合
// Plugin and Layer
name="..." 定义引入的元素名称
type="image" 引入元素的类型，可以为image、container、text（textfi eld），container为容器，可在容器内继续引入多个媒体元素
url="..." 引入元素的路径（支持格式：SWF, JPG, PNG, GIF.）
html="" 显示文字时的内容
keep="false" 是否在跳入新场景时仍然保留显示该元素
parent="" 设置父容器名称，可以直接是plugin的name,也可以是全称： parent="layer[name]"或parent="hotspot[name]"
alturl="" 引入元素的路径（支持格式：SWF,JPG,PNG,GIF），只在html5浏览器使用
devices="all" 设置显示的设备类型（详见设备列表）
visible="true" 设置插入元素是否可见
enabled="true" 设置插入元素是否接受鼠标事件
handcursor="true" 鼠标移动该元素上时，是否变为小手
maskchildren="false" 设置是否将子控件变为蒙板，设置为TRUE后，除子控件范围 显示外，子控件边框与父控件边框之间区域将不显示
scalechildren="false" 设置是否子空间跟随父控件一同缩放
zorder="" 插入元素的次序索引，可以是字符也可以是数字，html5输 出必须是0-100整数
capture="true" 只是该元素接受事件，false时子元素也可接受事件
children="true" 启用当前元素的子元素来接收鼠标事件。
preload="false" 预加载，在加载pano之前先加载图层/插件的url，然后执行任何 操作。
blendmode="normal" 混合/混合模式（normal,layer,screen,add,subtract,difference,multiply,overlay,lighten,darken,hardlight, invert）仅 flash
style="" 调用已在文件中定义好的style的名称
align="" 元素在屏幕对齐方 lefttop,left,leftbottom,top,center,bottom,righttop,right,rightbottom
edge="" 元素的边缘或描点层对齐方式，lefttop,left,leftbottom,top,center,bottom,righttop,right,rightbottom）
x="" 对齐边界到对齐点的X横向距离
y="" 对齐边界到对齐点的y横向距离
ox="" 偏移
oy="" 偏移
rotate="0.0" 插入元素显示时旋转度数
width="" 插入元素的显示宽度
height="" 插入元素的显示高度
height="" 插入元素的显示高度
minwidth="0"
maxwidth="0"
minheight="0"
maxheight="0"
scale="1.0" 插入元素的缩放比例
pixelhittest="false" 仅flash
smoothing="true" 平滑(仅flash)
accuracy="0" 精度
alpha="1.0" 插入元素的不透明度
autoalpha="false" 自动透明度
usecontentsize="false" 满画布(仅flash)
scale9grid="" 定义9格网格（scale9grid="x-position|y-position|widt h|height|prescale*"）
crop="" 定义元素坐标及宽高(crop="x-position|y-positio n|width|height")
onovercrop="" 设置元素鼠标移到上方后的坐标及宽高
ondowncrop="" 设置元素鼠标按下状态后的坐标及宽高
mask="" 遮罩(仅flash)
effect="" 位图效果适用于层/插件的形象(仅flash)
bgcolor="0x000000" type="container"状态下的背景颜色，非container 状态下无效
bgalpha="0.0" 背景不透明度
bgborder="0" （bgborder="widths color alpha"）
bgroundedge="0"
bgshadow="" （bgshadow="xoffset yoffset blur color alpha"）
bgcapture="false" 是否捕抓在背景容器上事件（type="container"状态 下生效）
onover="" 鼠标在经过上方时执行动作
onhover="" 鼠标停在上方时执行动作
onout="" 鼠标停移出范围时时执行动作
onclick="" 鼠标停点击时执行动作
ondown="" 鼠标按下时执行动作
onup="" 鼠标按键松开时执行动作
onloaded="" 加载元素完成后执行动作
复制：copy(date,scene[get(xml.scene)].date);
连接符：calc(‘crop_anim_’ + date)；
取值：get(view.hlookat)；
赋值：set(hotspot[yehuag].rx, %1)；