环绕风景展示-可视化控件(WEB)
# FastWeb之环绕风景展示-可视化控件(WEB)
# 1. 说明
本示例使用egjs-view360全景显示库，通过导入全景的平面图片实现图像的圆柱形全景展示功能。以下以关联的Ug3DAngle控件为例进行说明。
通过本范例学习，可以掌握导入圆柱形全景组件的方式，从而实现引用的功能。
# 2. 设计明细
开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。
1：TUgLabel组件，控件名称为UgLabel01。
2：TUg3DAngle组件，控件名称为Ug3DAngle01。
3：TUgLabel组件，控件名称为UgLabel02。
UgWebRunFrame属性设置
Height：设置页面高度=600。Width：设置页面宽度=800。
2：Ug3DAngle属性设置
Align：设置对齐的方式，设置为alClient。
1：UgLabel01属性设置
Caption：设置标签显示的文字内容信息，设置为全景探秘 揭开隐藏于自然的谜题。Font：设置显示的字体信息，点击右侧的[√]打开字体设置界面，按照下面的样式进行设置。
3：UgLabel02属性设置
Anchors：设置锚定的标记位置，将akLeft与akTop设定为False，将akRight与akBottom设定为True。Caption：设置标签显示的文字内容信息，设置为漫步于此 感受自然之美。Font：设置显示的字体信息，点击右侧的[√]打开字体设置界面，按照下面的样式进行设置。
# 3. 脚本设计
点击脚本设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程序脚本无需引用单元。
# 3.1. 脚本初始设置
该程序脚本初始设置将全景图片地址加载至控件中并显示。
//JScript
Procedure ViewInit()
{
//设置全景图片的来源
Ug3DAngle01.Options.image = "library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg";
//设置项目的类型
Ug3DAngle01.Options.projectionType = pt_panorama;
}
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
}
{
ViewInit();
Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
Procedure ViewInit;
Begin
//设置全景图片的来源
Ug3DAngle01.Options.image := 'library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg';
//设置项目的类型
Ug3DAngle01.Options.projectionType := pt_panorama;
End;
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
end;
Begin
ViewInit;
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Make sure to add code blocks to your code group
# 4. 运行结果
使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。
界面中显示的全景图为圆柱形全景图，可通过鼠标拖动界面显示。