FastWeb之家具3D展示-可视化控件

1. 说明

  js-cloudimage-360view是一个简单且互动性强的库，可用于虚拟展示产品的相关功能。其原理是通过图片序列的排序，在界面中以幻灯片的方式展示，点击不同的视角呈现不同的图片页面。以下将使用此库制作的可视化控件TUg3DView来实现全景图片的相关功能。

  通过本范例学习，可以掌握在示例中引入3D展示的相关功能。

2. 设计明细

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

  1：TUgContainerPanel组件，控件名称为UgContainerPanel02。

  2：TUgContainerPanel组件，控件名称为UgContainerPanel01。

  3：TUg3DView组件，控件名称为Ug3DView01。

  4：TUgContainerPanel组件，控件名称为UgContainerPanel03。

  5：TUgContainerPanel组件，控件名称为UgContainerPanel04。

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

  7：TUgLabel组件，控件名称为UgLabel02。

  8：TUgLabel组件，控件名称为UgLabel03。

• UgWebRunFrame属性设置

  • Height：设置页面高度=600。
  • Width：设置页面宽度=800。
  • Alignmentontrol：设置此控件中的子控件的布局对齐的模式，设置为uniAlignmentClient。
  • Layout：设置控件的布局方式，设置为vbox。

• 1：UgContainerPanel02属性设置

  • Layout：设置子控件的布局模式，设置为hbox。
  • LayoutConfig：设置布局的相关设置，Flex设置为1，Width设置为100%。

• 5：UgContainerPanel04属性设置

  • LayoutConfig：设置布局的相关设置，Flex设置为5，Width设置为100%。

• 2：UgContainerPanel01属性设置

  • LayoutConfig：设置布局的相关设置，Flex设置为2，Height设置为100%。

• 3：Ug3DView01属性设置

  • LayoutConfig：设置布局的相关设置，Flex设置为5，Height设置为100%。

• 4：UgContainerPanel03属性设置

  • LayoutConfig：设置布局的相关设置，Flex设置为2，Height设置为100%。

• 6：UgLabel01属性设置

  • Caption：设置显示的文本内容，设置为美式家具。
  • Font：设置显示的字体，点击右侧的[√]，打开字体设置对话框，按照下图的方式进行设置。

  

• 7：UgLabel02属性设置

  • AutoSize：设置控件是否跟随文本变化尺寸大小，设置为False。
  • Caption：设置显示的文本内容，设置为美式家具是殖民地风格家具中最典型的代表。是美式家具的典型之一。作为欧洲曾经最大的殖民地，美式家具融汇了欧洲各国的风格，从而创造出了一种全新的家居风格。。

• 8：UgLabel03属性设置

  • Caption：设置显示的文本内容，设置为以下图形可使用鼠标左右滑动。

3. 程序设计

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

3.1. 程序初始设置

  该程式程序初始设置用来指定项目的相关设置。

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

  ViewInit();
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;

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

Begin
  ViewInit;
End.

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

  设置显示的初始化。

//JScript
function ViewInit()
{
  //设置图片序列的名称，包含了命名规则{index}
  Ug3DView01.Options.data_filename = "chair_{index}.jpg";
  //设置图片序列的地址目录
  Ug3DView01.Options.data_folder = "library/js/js-cloudimage-360-view/demo/chair/";
  //设置显示的图片数量
  Ug3DView01.Options.data_amount = 30;
  //设置图片的放大倍数
  Ug3DView01.Options.data_magnifier = 3;
  Ug3DView01.Init;
}

//PasScript
Procedure ViewInit;
Begin
  //设置图片序列的名称，包含了命名规则{index}
  Ug3DView01.Options.data_filename := 'chair_{index}.jpg';
  //设置图片序列的地址目录
  Ug3DView01.Options.data_folder := 'library/js/js-cloudimage-360-view/demo/chair/';
  //设置显示的图片数量
  Ug3DView01.Options.data_amount := 30;
  //设置图片的放大倍数
  Ug3DView01.Options.data_magnifier := 3;
  Ug3DView01.Init;
End;

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

4. 运行结果

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

  点击3D展示的图片，使用鼠标拖动以显示旋转样式的图片。