krpano
结合了vue使用，本人愚钝，我在krpano与vue之间的交互，还停留在使用localstorage等，本地存储的方式，去交互
都是零零散散的小知识，包括怎么使用，怎么写热点，怎么去tour.xml，vtourskin.xml中修改代码，来达到你想要达成的效果。
基础知识
切割的选择
矩阵接片大图生成多级碎片：MAKE PANO (FLAT) droplet.app
全景图生成多级碎片： MAKE PANO (MULTIRES) droplet.app
全景图生成普通六面体图片：MAKE PANO (NORMAL) droplet.app
多个全景图漫游生成多级碎片： MAKE VTOUR (MULTIRES) droplet.app
多个全景图漫游生成普通六面体图片： MAKE VTOUR (NORMAL) droplet.app
自动生成可漫游的全景 ： MAKE VTOUR (VR-OPT) droplet.app
怎么把图标放到屏幕上层，不跟随720图旋转的
答案就是放到start的代码中，这个随着场景的加载而加载
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
js(startLoading()); //这个是我写的图1
js(startautorotate());
//这个是我写的图2的js方法，里面有imgurl的配置，详情看下面如何实现点击旋转关闭旋转功能
</action>
这个不随着场景的加载而加载，在index.html的层面上写 这个是自己写的内容
<div id="Wdaihy_courseware" style="width: 50px; background-color: rgba(57, 117, 175, 0.5); color: rgb(255, 255, 255); overflow-wrap: break-word; position: absolute; top: 17%; right: -4% ">
<img id="Img_courseware" src="../vtour/images/courseware.png" style="width: 40%; position: absolute; z-index: 3;">
</div>
位置在
自己写的JS放哪里
放在index.html里面，是在public的index.html中，也可以放到tour.html中
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="vtour/tour.js"></script>
<!-- -->
<script src="./js/action.js"></script>
<script src="./js/outaction.js"></script>
<script src="./js/courseware.js"></script>
<script src="./js/init.js"></script>
<div id="pano">
<script>
embedpano({
swf: "./vtour/tour.swf", //flash渲染器
xml: "./vtour/tour.xml", //主配置文件 缺省的时候会调用krpano.xml和krpano.swf 不加载设置0即可
target: "pano", //嵌入容器id
html5: "auto", //html5模式
id: "krpanoSWFObject", //当前全景id，javascript接口调用会使用此id
mobilescale: 1.0, //移动设备缩放
passQueryParameters: true, //启用url查询参数（ html5, flash, wmode, mobilescale, fakedevice, initvars）作为变量传递，如tour.html?html5=only&startscene=scene2&initvars.design=flat
});
</script>
</div>
</body>
传值（案例：弹窗出现介绍文字）
这是在js文件与xml之间的操作问题 xml文件书写热点与相应事件
---------------------------------tour.js----------------------------------------------
<scene>
<hotspot name="Diy-message" scale="0.6" ath="177.169" atv="0.471" style="Diy-message" tooltip="热点出现的文字下面在说" />
</scene>
定义热点的样式
---------------------------------vtourskin.xml----------------------------------------------
<!-- 写了一个自定义的样式 -->
<style name="Diy-message" url="../images/introduction.png" scale="0.5" edge="top" distorted="true"
tooltip=""
linkedscene=""
linkedscene_lookat=""
onclick="maoyisheng-message_click();"
onover="tween(scale,0.55);"
onout="tween(scale,0.5);"
onloaded="add_all_the_time_tooltip();"
/>
<!-- introduction的点击事件 jscall(calc("打印")) 用jscall包含着-->
<action name="introduction_click" scope="local">
js(textLoading())
</action>
创建一个action.js的文件，引入到外层krpano创建的index.html中
<!-- 下面这个是为了让你找到在哪里写入action.js-->
<script src="vtour/tour.js"></script>
<!-- 引入了action.js文件 -->
<script type="text/javascript" src="./js/action.js"></script>
在aciton写入js文件
---------------
//文本点击加载
function textLoading(){
console.log('textLoading');
var clearDiv = document.getElementById("Wdaihy_textLoading");
if (clearDiv !== null) {
clearDiv.parentNode.removeChild(clearDiv);
}
var newDiv = document.createElement('div');
newDiv.id = 'Wdaihy_textLoading';
document.body.appendChild(newDiv); //加到元素下面\
// Wdiahy的样式
Wdaihy_textLoading.style.width = "80%";
Wdaihy_textLoading.style.height = "400px";
Wdaihy_textLoading.style.backgroundColor = "rgba(57,117,175,0.5)";
Wdaihy_textLoading.style.color = "#fff";
// Wdaihy_textLoading.style.overflow = "hidden";
Wdaihy_textLoading.style.wordWrap = "break-word";
// Wdaihy_textLoading.style.overflowY = "scroll";
Wdaihy_textLoading.style.position = "absolute";
Wdaihy_textLoading.style.top = "40%"
Wdaihy_textLoading.style.left = "50%"
Wdaihy_textLoading.style.transform = "translate(-50%,-50%)";
Wdaihy_textLoading.style.padding = "0 1rem"
var title = document.createElement('p');
title.id = 'titleName';
Wdaihy_textLoading.appendChild(title);
titleName.innerText = "茅以升";
titleName.style.textAlign="center";
titleName.style.margin = "2rem 0 1rem 0"
var closeImg = document.createElement("img");
closeImg.id = "closeImg";
closeImg.src = "../vtour/images/close.png";
closeImg.style.width = "8%"
closeImg.style.position = "absolute";
closeImg.style.top = "0%";
closeImg.style.right = "0%";
closeImg.style.zIndex = "3";
Wdaihy_textLoading.appendChild(closeImg);
var info = document.createElement('span');
info.id = 'infodetail';
Wdaihy_textLoading.appendChild(info);
infodetail.innerHTML = "       中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。<br>       旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。";
infodetail.style.fontSize = "14px"
closeImg.addEventListener("click", function CloseText() {
Wdaihy_textLoading.parentNode.removeChild(Wdaihy_textLoading);
});
}
修改略缩图的大小
在tour.xml中找到，以下内容(注释参照krpano官网)
<skin_settings maps="false" 是否显示地图按钮
maps_type="google" 地图类型
maps_bing_api_key="" bing地图授权key
maps_google_api_key="" 谷歌地图授权key
maps_zoombuttons="false" 地图是否显示缩放按钮
gyro="true" 是否默认打开重力陀螺仪
webvr="true" 是否显示vr按钮
webvr_gyro_keeplookingdirection="false"
是否陀螺仪状态下默认跟随场景域默认视角
webvr_prev_next_hotspots="true" 是否vr状态下显示上下场景按钮
littleplanetintro="false" 是否默认启动小行星效果
title="true" 是否皮肤显示标题
thumbs="true" 是否显示缩略图皮肤
thumbs_width="120" 图片的高度
thumbs_height="80" 图片的宽度
thumbs_padding="10" 图片之间的距离
thumbs_crop="0|40|240|160" 缩略图宽高和截取大小
thumbs_opened="false" 是否默认展开缩略图
thumbs_text="false" 是否显示缩略图文字
thumbs_dragging="true" 是否缩略图支持滚动条拖动
thumbs_onhoverscrolling="false" 是否缩略图支持鼠标移到上方时滚动
thumbs_scrollbuttons="false" 是否显示滚动条控制按钮
thumbs_scrollindicator="false" 是否显示滚动条底部控制条
thumbs_loop="false" 是否缩略图循环滚动
tooltips_buttons="false" 是否显示按钮上的提示信息（鼠标在上方时）
tooltips_thumbs="false" 是否显示缩略图提示信息（鼠标在上方时）
tooltips_hotspots="false" 是否显示热点提示信息（鼠标在上方时）
tooltips_mapspots="false" 是否显示地图热点提示信息（鼠标在上方时）
deeplinking="false" 是否显示深层链接
loadscene_flags="MERGE" 设置场景切换标记
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" 场景默认切换过渡效果
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" 进入前一场景过渡效果
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" 进入下一场景过渡效果
loadingtext="加载中..." 设置读取中状态的提示文字信息
layout_width="100%" 系统皮肤默认宽度
layout_maxwidth="814" 系统皮肤最大宽度
controlbar_width="-24" 控制工具条宽度
controlbar_height="40" 控制工具条高度
controlbar_offset="20" 控制工具条偏移量
controlbar_offset_closed="-40" 控制工具条关闭时偏移量
controlbar_overlap.no-fractionalscaling="10" 控制工具条重叠非比例缩放值
controlbar_overlap.fractionalscaling="0" 控制工具条重叠比例缩放值
design_skin_images="vtourskin.png" design_skin皮肤默认皮肤图片文件
design_bgcolor="0x2D3E50" design_skin皮肤背景颜色
design_bgalpha="0.8" design_skin皮肤背景透明度
design_bgborder="0" design_skin皮肤边框宽度
design_bgroundedge="1" design_skin皮肤圆角值
design_bgshadow="0 4 10 0x000000 0.3" design_skin皮肤背景阴影参数
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_skin皮肤缩略图边框样式
design_thumbborder_padding="2" design_skin皮肤缩略图内边距值
design_thumbborder_bgroundedge="0" design_skin皮肤缩略图圆角值
design_text_css="color:#FFFFFF; font-family:Arial;"
design_skin皮肤文字样式
design_text_shadow="1" design_skin皮肤文字阴影偏移值
/>
添加略缩图的底部文字
<!--添加略缩图的底部文字-->>
<action name="skin_addthumbs">
if(skin_settings.thumbs == false,
set(layer[skin_btn_thumbs].visible,false);
,
copy(thumbwidth, skin_settings.thumbs_width);
copy(thumbheight, skin_settings.thumbs_height);
copy(thumbpadding, skin_settings.thumbs_padding);
copy(thumbcrop, skin_settings.thumbs_crop);
add(thumbxoffset, thumbwidth, thumbpadding);
mul(thumbxcenter, thumbxoffset, 0.5);
mul(thumbbarwidth, thumbxoffset, scene.count);
add(thumbbarwidth, thumbpadding);
add(thumbbarheight, thumbpadding, thumbheight);
add(thumbbarheight, thumbpadding);
if(skin_settings.thumbs_scrollindicator,
copy(layer[skin_thumbs_scrollindicator].y, thumbbarheight);
add(thumbbarheight, layer[skin_thumbs_scrollindicator].height);
);
copy(layer[skin_thumbs].height, thumbbarheight);
copy(layer[skin_thumbs].width, thumbbarwidth);
mul(halfheight, thumbbarheight, 0.5);
copy(layer[skin_thumbs_scrollleft].y, halfheight);
copy(layer[skin_thumbs_scrollright].y, halfheight);
set(thumb_cnt,0);
for(set(i,0), i LT scene.count, inc(i),
txtadd(thumbname,'skin_thumb_',get(i));
addlayer(get(thumbname));
copy(layer[get(thumbname)].url, scene[get(i)].thumburl);
set(layer[get(thumbname)].keep, true);
set(layer[get(thumbname)].parent, 'skin_thumbs');
set(layer[get(thumbname)].align, lefttop);
copy(layer[get(thumbname)].crop, thumbcrop);
copy(layer[get(thumbname)].width, thumbwidth);
copy(layer[get(thumbname)].height, thumbheight);
mul(thumbx, i, thumbxoffset);
add(thumbx, thumbpadding);
copy(layer[get(thumbname)].x, thumbx);
copy(layer[get(thumbname)].y, thumbpadding);
add(scene[get(i)].thumbx, thumbx, thumbxcenter);
copy(scene[get(i)].thumby, thumbpadding);
set(layer[get(thumbname)].linkedscene, get(scene[get(i)].name) );
set(layer[get(thumbname)].onclick, copy(layer[skin_thumbborder].parent, name); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); );
if(skin_settings.tooltips_thumbs,
set(layer[get(thumbname)].tooltip, get(scene[get(i)].title) );
layer[get(thumbname)].loadstyle(skin_tooltips);
);
<!-- if(skin_settings.thumbs_text,
txtadd(thumbtext, 'skin_thumbtext_', get(i));
addlayer(get(thumbtext));
layer[get(thumbtext)].loadstyle(skin_thumbtext_style);
set(layer[get(thumbtext)].keep, true);
set(layer[get(thumbtext)].parent, get(thumbname));
set(layer[get(thumbtext)].html, get(scene[get(i)].title));
); -->
<!--START:缩略图标题-->
<!--添加场景标题文字背景层-->
txtadd(thumbtitlbackename,'skin_thumb_title_back',get(i));
addlayer(get(thumbtitlbackename));
copy(layer[get(thumbtitlbackename)].parent, thumbname);
copy(layer[get(thumbtitlbackename)].width, thumbwidth);
<!-- 文字在图片里的高度 -->
set(layer[get(thumbtitlbackename)].height, 20);
copy(layer[get(thumbtitlbackename)].x, 0);
copy(layer[get(thumbtitlbackename)].y, 30);
set(layer[get(thumbtitlbackename)].align, "bottom");
set(layer[get(thumbtitlbackename)].keep, true);
set(layer[get(thumbtitlbackename)].type, "container");
set(layer[get(thumbtitlbackename)].bgcolor, "0x000000");
set(layer[get(thumbtitlbackename)].fontSize:, "10");
set(layer[get(thumbtitlbackename)].zorder, 50);
set(layer[get(thumbtitlbackename)].bgalpha, "0.3");
<!--添加标题文字层-->
<!--缩略图上的标题信息删除本段就不在显示了-->
if(skin_settings.tooltips_thumbs,
set(layer[get(thumbname)].onhover, showtext(get(scene[get(linkedscene)].title),SKIN_TOOLTIPS); );
);
<!-- 添加标题文字层 -->
txtadd(thumbtitlname,'skin_thumb_title',get(i)); addlayer(get(thumbtitlname));
copy(layer[get(thumbtitlname)].parent, thumbtitlbackename);
set(layer[get(thumbtitlname)].url, "%SWFPATH%/plugins/textfield.swf");
set(layer[get(thumbtitlname)].align, "center"); set(layer[get(thumbtitlname)].keep, true);
copy(layer[get(thumbtitlname)].html, scene[get(i)].title); set(layer[get(thumbtitlname)].zorder, 51);
set(layer[get(thumbtitlname)].visible, "true"); set(layer[get(thumbtitlname)].autoheight, "true");
set(layer[get(thumbtitlname)].background, "false"); set(layer[get(thumbtitlname)].border, "false");
set(layer[get(thumbtitlname)].enabled, "true"); set(layer[get(thumbtitlname)].css,
"text-align:center; color:#ffffff; font-family:Arial; font-weight:bold; font-size:12px; ");
set(layer[get(thumbtitlname)].textshadow, 2);
<!-- END:缩略图标题 -->
);
);
</action>
加载多个js文件
<action name="startup" autorun="onstart">
js(startLoading()); //这里要有 ； 分开，不然会出现只加载一个js的问题
js(startautorotate());
</action>
点击关闭开启自动旋转
自动旋转代码
<!-- 自动的设置 -->
<autorotate enabled="true"
waittime="2.0"
speed="-5.0"
horizon="0.0"
tofov="off"
/>
这个图标肯定要放到外层，不随着改变的就选择了
<action name="startup" autorun="onstart">
//在这里面写js文件
</action>
根据我上面的学习来看使用action.js文件
function startautorotate(){
console.log('Wdaihy2');
var krpano = document.querySelector('#krpanoSWFObject');
var clearDiv = document.getElementById("Wdaihy_autorotate");
if (clearDiv !== null) {
clearDiv.parentNode.removeChild(clearDiv);
}
var newDiv = document.createElement('div');
newDiv.id = 'Wdaihy_autorotate';
document.body.appendChild(newDiv); //加到元素下面\
// Wdiahy的样式
Wdaihy_autorotate.style.width = "40px";
Wdaihy_autorotate.style.backgroundColor = "rgba(57,117,175,0.5)";
Wdaihy_autorotate.style.color = "#fff";
// Wdaihy.style.overflow = "hidden";
Wdaihy_autorotate.style.wordWrap = "break-word";
// Wdaihy.style.overflowY = "scroll";
Wdaihy_autorotate.style.position = "absolute";
Wdaihy_autorotate.style.top = "8%"
Wdaihy_autorotate.style.right = "0%"
//Wdaihy.style.transform = "translate(-50%,-50%)";
Wdaihy_autorotate.style.padding = "0 1rem"
var Img_autorotate = document.createElement("img");
Img_autorotate.id = "Img_autorotate";
Img_autorotate.src = "../vtour/images/xuanzhuan.png";
Img_autorotate.style.width = "40%"
Img_autorotate.style.position = "absolute";
Img_autorotate.style.zIndex = "3";
Wdaihy_autorotate.appendChild(Img_autorotate);
var click_autorotate = document.getElementById('Img_autorotate');
let flag = 'true';
click_autorotate.onclick = ()=>{
if(flag === 'false'){
flag = 'true';
console.log('true')
Img_autorotate.src = "../vtour/images/xuanzhuan.png";
krpano.set("autorotate.enabled",true);
}else {
flag = 'false';
console.log('false')
Img_autorotate.src = "../vtour/images/jinzhixuanzhuan.png";
krpano.set("autorotate.enabled",false);
}
}
}
修改皮肤上的加载loading_text 大小
在vtourskin.xml中就能修改，找到一下代码
<layer name="skin_loadingtext" type="text" align="center" x="5" y="-5" html="get:skin_settings.loadingtext" visible="false" background="false" border="false" enabled="false" css="calc:skin_settings.design_text_css + ' text-align:center; font-style:italic; font-size:18px;'" textshadow="get:skin_settings.design_text_shadow" />
获取当前720图片的信息
注意：index.html的以下信息
<div id="pano">
<script>
embedpano({
swf: "./vtour/tour.swf", //flash渲染器
xml: "./vtour/tour.xml", //主配置文件 缺省的时候会调用krpano.xml和krpano.swf 不加载设置0即可
target: "pano", //嵌入容器id
html5: "auto", //html5模式
wmode:"window",
fakedevice:"",
id: "krpanoSWFObject", //当前全景id，javascript接口调用会使用此id
// mobilescale: 1.0, //移动设备缩放
passQueryParameters: true, //启用url查询参数（ html5, flash, wmode, mobilescale, fakedevice, initvars）作为变量传递，如tour.html?html5=only&startscene=scene2&initvars.design=flat
});
</script>
</div>
以下代码使用，使用规则需要在当前页面响应事件调用这个函数才可以出现当前的信息
let krpano = document.querySelector('#krpanoSWFObject');//这个krpanoSWFObject是id的
let currentScene = krpano.get('scene').getItem(krpano.get('xml.scene')); //获取当前场景
let currentSceneIndex = krpano.get('scene').getItem(krpano.get('xml.scene')).index //获取当前场景序号，第一个页面就是0
获取vtour中被点击的热点，来vue监听执行事件
tour.xml 中生成热点
<!-- 留言板 -->
<hotspot name="maoyishengmessage" scale="0.3" ath="13.220" atv="1.347" style="message" tooltip="留言板" width="150px" height="150px" dive="true" />
在vtourskin.xml中对热点加载皮肤与操作事件
<!-- 写了一个message的样式 -->
<style name="message" url="../images/message.png" scale="0.5" edge="top" distorted="true"
tooltip=""
linkedscene=""
linkedscene_lookat=""
onclick="message_click();"
onover="tween(scale,0.55);"
onout="tween(scale,0.5);"
onloaded="add_all_the_time_tooltip();"
/>
<!-- introduction的点击事件 jscall(calc("打印")) 用jscall包含着-->
<action name="message_click" scope="local">
js(liuyan())
</action>
你要把这个js文件放到html中声明一下，才能直接在这里使用liuyan这个方法函数 action.js里的某一个方法
function liuyan(){
localStorage.setItem('liuyan','true');
console.log('liuyan');
}
在主要index.vue中去监测场景的点击事件
export default {
name: 'Liuyan',
data () {
return {
krpano: document.querySelector('#krpanoSWFObject'), // krpano对象
}
},
mounted () {
//热点点击事件初始化 回去留言板
let pano = document.getElementById('pano')
// console.dir(pano)
pano.ontouchend=()=>{
this.clickHotspot()
}
pano.onclick=()=>{
this.clickHotspot()
}
},
methods: {
clickHotspot () {
if(localStorage.getItem('liuyan') == 'true'){
console.log('liuyan启动成功');
localStorage.setItem('liuyan','false');
this.$router.push('/liuyan')
}
}
}
}
在liuyan这个liuyan.vue文件中去写这个页面的东西就可以了。
上面说到可操作的内容在上层，不跟随720旋转，怎么来操作点击事件
先写出这个内容，我放在了public/index.html中，这个本身就是HTMTL的加载元素关键页面，写在这里可不就是静态的，不跟随720移动的地方？
<div id="Wdaihy_courseware" style="width: 50px; background-color: rgba(57, 117, 175, 0.5); color: rgb(255, 255, 255); overflow-wrap: break-word; position: absolute; top: 17%; right: -4% ">
<img id="Img_courseware" src="../vtour/images/courseware.png" style="width: 40%; position: absolute; z-index: 3;">
</div>
很简单，在index.vue中去获取id 的DOM元素，去操作一下就可以了
mounted () {
// 热点点击事件初始化 课件热点
let Wdaihy_courseware = document.querySelector('#Wdaihy_courseware') //选择出容器id=pano标签，在tour.html中
Wdaihy_courseware.ontouchend=()=>{
this.$router.push('/courseware')
}
Wdaihy_courseware.onclick=()=>{
this.$router.push('/courseware')
}
},
