krpano学习笔记,端口修改,krpano二次开发文档,krpano三维div信息展示,krpano热点显示文字
一、修改krpano端口
.\tour_testingserver -port=8085 ,修改端口,指定启动时的端口
二、给krpano添加div展示信息
和场景一起转动,不是layer,layer是固定的,没啥用。
主要是onloaded=里面的1个方法。
<action name="add_all_the_time_tooltip_info">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname));
txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,top);
set(plugin[get(tooltipname)].edge,bottom);
set(plugin[get(tooltipname)].x,0);
set(plugin[get(tooltipname)].y,0);
set(plugin[get(tooltipname)].autowidth,true);
set(plugin[get(tooltipname)].autoheight,true);
set(plugin[get(tooltipname)].vcenter,true);
set(plugin[get(tooltipname)].background,true);
set(plugin[get(tooltipname)].backgroundcolor,0x000000);
set(plugin[get(tooltipname)].roundedge,5);
set(plugin[get(tooltipname)].backgroundalpha,0.65);
set(plugin[get(tooltipname)].padding,5);
set(plugin[get(tooltipname)].border,false);
set(plugin[get(tooltipname)].glow,0);
set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-size:30px;');
if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:30px;');
);
set(plugin[get(tooltipname)].textshadow,0);
set(plugin[get(tooltipname)].textshadowrange,6.0);
set(plugin[get(tooltipname)].textshadowangle,90);
if(text == '' OR text === null,
copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title),
copy(plugin[get(tooltipname)].html,text)
);
set(plugin[get(tooltipname)].enabled,false);
set(plugin[get(tooltipname)].html,'<div class="divt">
<table>
<tr><div class='titlediv'>1</div></tr>
<tr><td>1:</td> <td>1</td> </tr>
<tr><td>1:</td> <td>1</td> </tr>
<tr><td>1:</td> <td>1</td> </tr>
<tr><td>1:</td> <td>1</td> </tr>
</table>
</div>');
set(plugin[get(tooltipname)].vlookat,45>
</action>
三、krpano热点文字显示
add_all_the_time_tooltip_info 代码在上一节点。
<scene name="scene_2lowsecrit" title="" onstart="" thumburl="panos/s/thumb.jpg" lat="" lng="" alt="" heading="">
....
<hotspot name="spot1619696682" style="skin_hotspotstyle_div" ath="3.18" atv="20.579" depth="1300.0" hlookat="110"
linkedscene="scene_2lowsecrit" linkedscene_hoffset="0.0" use3dtransition="true"
onloaded="add_all_the_time_tooltip_info();do_crop_animation_div(64,64, 60); "/>
</scene>
四、其它常用操作
1.增加热点的目的只是想画一个箭头切换一下场景,打开"krpano Tools.exe",打开软件主界面,点击左上方按钮“load xml”,载入vtour文件夹中的tour.xml文件就可以在软件中看到刚刚制作的场景了。
2.可以通过代码写入热点
<hotspot name="mytext1"
type="text"
zoom="true"
ath="4.642" atv="24.049" edge="center"
distorted="true"
renderer="webgl"
html="[span]DMI[/span]"
css="font-family:Arial; font-size:14px; color:#fff;"
vcenter="false"
padding="5"
wordwrap="true"
bg="true"
bgcolor="0x000000"
bgalpha="0.6"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
oversampling="1.0"
mipmapping="false"
onautosized=""
onover="tween(alpha,1);tween(scale,0.9);"
onout="tween(alpha,1);tween(scale,1);"
onclick="action(open,container1);"
/>
3.layer属性详解
<layer name="..." 定义引入的元素名称
type="image" 引入元素的类型,可以为image、container、text(textfield),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="" 插入元素的显示宽度(prop:自适应)
height="" 插入元素的显示高度
minwidth="0"
maxwidth="0"
minheight="0"
maxheight="0"
autowidth="false" 根据内容自适应宽度
autoheight="false" 根据内容自适应高度
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|width|height|prescale*")
crop="" 定义元素坐标及宽高 crop="x-position|y-position|width|height"
onovercrop="" 设置元素鼠标移到上方后的坐标及宽高
ondowncrop="" 设置元素鼠标按下状态后的坐标及宽高
mask="" 遮罩 仅flash
effect="" 位图效果适用于层/插件的形象 仅flash
background="" 可以设置false 去掉背景
bgcolor="0x000000" type="container"状态下的背景颜色,非container状态下无效
bgalpha="0.0" 背景不透明度
bgborder="0" (bgborder="widths color alpha")边框
bgroundedge="0" 圆角
bgshadow="" (基本:bgshadow="xoffset yoffset blur color alpha";高级:gshadow="xoffset yoffset blur spread color alpha inset, ...")阴影
bgcapture="false" 是否捕抓在背景容器上事件(type="container"状态下生效)
onover="" 鼠标在经过上方时执行动作
onhover="" 鼠标停在上方时执行动作
onout="" 鼠标停移出范围时时执行动作
onclick="" 鼠标停点击时执行动作
ondown="" 鼠标按下时执行动作
onup="" 鼠标按键松开时执行动作
onloaded="" 加载元素完成后执行动作
/>
4.增加热点事件
<!-- 定义一个动作 -->
<!-- 打开关闭图片 -->
<action name="open">
<!-- 这个语法的意思就是把第一个参数的visible(显示)设置为true -->
set(plugin[%1].visible,true);
tween(plugin[%1].alpha,1);
</action>
<action name="close">
set(plugin[%1].visible,false);
</action>
<hotspot name="mytext1"
type="text"
zoom="true"
ath="4.642" atv="24.049" edge="center"
distorted="true"
renderer="webgl"
html="[span]DMI[/span]"
css="font-family:Arial; font-size:14px; color:#fff;"
vcenter="false"
padding="5"
wordwrap="true"
bg="true"
bgcolor="0x000000"
bgalpha="0.6"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
oversampling="1.0"
mipmapping="false"
onautosized=""
onover="tween(alpha,1);tween(scale,0.9);"
onout="tween(alpha,1);tween(scale,1);"
onclick="action(open,container1);"
/>
<!-- 司机室右侧面板上ATP旋转开关 -->
<hotspot name="mytext2"
type="text"
zoom="true"
ath="99.563" atv="34.140" edge="center"
......
onclick="action(open,container2);"这里声明点击的动作 其中container2 是下边图片图层的名字
/>
<layer
name="container2"
type="image" 定义图片图层
url="图片的地址"
width="100%"
height="100%"
maskchildren="true"
visible="0"
children="true"
background="true"
bgcapture="true"
enabled="true"
bgcolor="0x000000"
bgalpha="0.8"
onclick="action(close,get(name));" // 点击这个图片就可以隐藏图片
>
先就记这些,欢迎关注。