棒棒糖热点编辑器

简介

  • 输入热点名称(hotspot的name),若热点已存在,则进入编辑模式,如热点不存在,提示是否创建热点;创建热点可选择样式以及添加热点所链接到的场景或热点上显示的文字。
  • 可视化编辑热点属性:尺寸(scale)、透明度(alpha)、旋转(rotate)、3D属性(rx、ry、rz)、平移(ox、oy);
  • 热点点击可指定跳转场景;
  • 支持热点上显示文字或纯文字;
  • 内置多种热点样式,也可以使用自定义热点样式;
  • 所见即所得,即时看到效果。

 

演示

可使用以下hotspot的name属性在热点输入框进行测试。例如点击右上角图标后,在热点名称框中键入“remote”。

点击在新窗口打开

 

使用方法

复制editor.html以及hotspot_text.xml、panos_skin.xml三个文件到你的根目录中。

复制css文件夹、hs_img文件夹、icons文件夹以及js文件夹到你的根目录中。

 

在你的主xml中嵌入以下代码

该代码为编辑时使用,正式项目中移除。

 

在你的主xml中嵌入以下代码

 

创建一个新的热点

在热点名称栏输入热点名字,即热点name,如果热点名字不存在,这提示创建热点

 

点击确定,创建热点。

 

弹出热点样式选择栏,默认五种热点样式,点击某个样式选择

 

选择第一个样式箭头,点击确定;在屏幕中央会出现所选择热点的图标,右侧工具栏会显示该热点的默认属性;

 

也可以自定义热点样式。在热点样式弹窗中选择自定义样式

在输入框内输入写好的热点样式,即自定义的style,点击确定,即可使用自定义的热点样式

 

在右侧工具栏中对该热点的属性进行编辑,并可实时预览;

这里对热点的大小,旋转、rx属性进行调整,如果需要对热点属性进行微调,可以在对应属性滑块下的文字框内手动输入数值进行微调

 

对于新建的热点,可以指定热点的跳转场景和热点文字。在屏幕左上角有热点场景和热点文字两个选项,可分别设置热点的跳转场景和热点文字。

 

点击场景热点,弹出场景列表,选择想跳转的场景后,点击确认。

 

点击热点文字按钮,弹出热点文字输入框,在输入框内输入想要显示的热点文字,可实时预览。

注意,如果想让热点显示指定跳转场景的title,这输入文字框内留空即可;

 

保存。对热点编辑完成后,就是保存代码了。点击右侧工具栏下边的保存按钮,则会弹出热点代码预览

还可以再次修改热点代码。点击复制按钮,复制代码,然后粘贴到主文件tour.xml(或其他)的相应位置即可

 

这里的热点文字内容留空,所以热点文字显示的是跳转场景的title

 

如对已有热点进行编辑,只需要在热点名称栏输入热点名字(name),视角就会调整到待编辑的热点,右侧工具栏内也会显示热点已有的信息,热点属性的编辑方法与上同。

确定所编辑的热点后,在工具栏的右上角会显示一个齿轮图标,点击这个图标会显示“场景热点”和“热点文字”两个功能,可对热点场景和热点文字进行编辑;

还有一个小功能,在编辑栏的热点名称一侧有宽高值选项,勾上这个选项,这可以对热点宽度和高度进行编辑,如上图

这个功能并不常用,一般热点的尺寸可以通过大小(scale)属性来设置,所以放在最后。

 

下载地址

https://codeload.github.com/CiroLee/panos_editor_v1.3/zip/master

 

技术支持

微信扫一扫关注“棒棒糖科技”