FastWeb之全景汽车内饰-可视化控件(WEB)

1. 说明

  本示例使用egjs-view360全景显示库，通过导入全景的平面图片实现图片的全景展示功能。本示例将使用Ug3DAngle来实现全景图片展示的相关功能。

  通过本范例学习，可以掌握全景图片的引入方式，从而实现引用全景图片的相关功能。

2. 设计明细

  开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。

  1：TUgImage组件，控件名称为UgImage01。

  2：TUgLabel组件，控件名称为UgLabel01。

  3：TUg3DAngle组件，控件名称为Ug3DAngle01。

• UgWebRunFrame属性设置

  • Height：设置页面高度=600。
  • Width：设置页面宽度=800。

• 1：UgImage01属性设置

  • Align：设置控件的对齐方式，设置为alClient。
  • Picture：设置控件使用的图片，点击右侧[√]打开图片编辑器，选择图片上传。
  • Stretch：设置图片是否根据控件进行拉伸操作，设置为True。

• 2：UgLabel01属性设置

  • Alignment：设置文字内容的对齐方式，设置为taCenter。
  • Anchors：设置固定的相对锚点，其中将akLeft、akTop与akRight设置为True，akBottom设置为False。
  • Autosize：设置控件尺寸是否根据文字内容长度自动变化，此处设置为False。
  • Caption：设置显示的文字内容，设置为出奇不意的设计，实实在在的享受。。
  • Font：设置显示的字体，点击右侧的[√]打开字体设置。

  

3. 脚本设计

  点击脚本设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程序脚本不需要引用单元。

3.1. 脚本初始设置

  该程序脚本初始设置用于传递显示的全景图片源。

//JScript
function ViewInit()
{
  Ug3DAngle01.Options.image = "library/js/egjs-view360/examples/img/equi-car-inside.jpg";
  Ug3DAngle01.Options.projectionType = pt_equirectangular;
}

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

{
  ViewInit();
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}

//PasScript
Procedure ViewInit;
Begin
  Ug3DAngle01.Options.image := 'library/js/egjs-view360/examples/img/equi-car-inside.jpg';
  Ug3DAngle01.Options.projectionType := pt_equirectangular;
End;

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;
End.

// Make sure to add code blocks to your code group

4. 运行结果

  使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  在窗口中可显示汽车内饰的全景图片。