爱招飞帮助手册
目录

3D-AI控件

# FastWeb 3D-AI控件

  • 适用平台： WEB(桌面)

  此组中的控件为3D展示的图形与多媒体控件，以及与智慧识别相关的控件。

# 1. TUg3DAngle

  此控件用于展示环绕式全景图片或者球形的全景图片。通过初始参数的设置以及图片地址的设置可在网页页面上显示全景图片。

# 1.1. 属性

属性 说明
Options 设定显示的相关属性

# 1.1.1. Options

property Options: T3DAngleOptions;
1

  设定3D显示的相关选项。

# 1.1.1.1. cubemapconfig
property cubemapConfig: string;
1

  当projectionType属性设置为cubemap或者cubestrip时，此项生效，用于配置项目的布局设置。

# 1.1.1.2. fov
property fov: Integer;
1

  设定全景图片显示的视角。

# 1.1.1.3. fovRange
property fovRange: string
1

  设定全景图片可调整的视角的显示范围。,比如[30,70]。

# 1.1.1.4. gyroMode
property gyroMode: TgyroMode;
1

  设定全景陀螺仪的工作模式。

  • gm_none：不使用陀螺仪。
  • gm_VR：使用VR模式进行工作。
  • gm_yawPicth：使用航向模式进行工作。
# 1.1.1.5. gyroOption
property gyroOption: Boolean;
1

  设置是否在界面上显示陀螺仪设置的按钮选项。

# 1.1.1.6. image
property image: string;
1

  用于设定显示的全景图片的来源地址。此地址支持外链的地址，也支持本机的地址。请注意，如果在https下访问FastWeb的，引入的外链地址也必须以https开头，反之如果是在http下访问FastWeb的，则引入的外链地址是http，否则会出现跨域请求的问题导致无法访问。

# 1.1.1.7. pitch
property pitch: Integer;
1

  设定初始状态下显示的图像的俯仰角度。

# 1.1.1.8. pitchRange
property pitchRange: string;
1

  设定图像可调整显示的俯仰角度的范围。

# 1.1.1.9. projectionType
property projectionType: TprojectionType;
1

  设置全景图像的类型。可选的项目有以下类型。

  • pt_cubemap：设定为立方体贴图的全景模式。
  • pt_cubestrip：设定为Cubestrip的全景模式。Cubestrip 是一种由六个立方体面组合而成的单一图像格式。 它几乎与立方体贴图相同，但实现方式不同。 它旨在获得更好的性能和效率。 此外，它会自动检测并支持 EAC。
  • pt_equirectangular：等距柱状投影全景模式。此模式下使用的全景图片为2:1比例格式。通常由全景相机进行拍摄。
  • pt_panorama：圆柱投影的全景模式，此模式的图片通常来源于手机拍摄的全景图像。
  • pt_stereoequi：立体等距柱状投影全景模式。此模式下使用两张2:1比例格式的全景图片组成立体VR格式。
# 1.1.1.10. showPolePoint
property showPolePoint: Boolean;
1

  此项用于设置是否显示极点。

# 1.1.1.11. strreoFormat
property stereoFormat: TstereoFormat;
1

  设定等距柱状投影的内容格式。有以下选项可用。

  • 3dh：左右立体 360 等距柱状投影格式的常数值。
  • 3dv：顶部底部立体 360 等距柱状投影格式的常数值。
  • none：指定媒体的常量值不是立体格式。
# 1.1.1.12. touchDirection
property touchDirection: Integer;
1

  设定初始的触摸方向。

# 1.1.1.13. touchOption
property touchOption: Boolean;
1

  设定是否显示触摸设置的按钮。

# 1.1.1.14. useKeyboard
property useKeyboard: Boolean;
1

  设定是否使用键盘进行显示。

# 1.1.1.15. useZoom
property useZoom: Boolean;
1

  设定是否使用缩放的相关功能。

# 1.1.1.16. yaw
property yaw: Integer;
1

  设定图片显示的航向的角度。

# 1.1.1.17. yawRange
property yawRange: string;
1

  设定图片显示的航向的角度范围。

# 1.2. 方法

# 1.2.1. Init

procedure Init;
1

  此方法用于对控件进行初始化操作，在设置完成Options的相关选项后可调用此方法来加载显示。

# 2. TUg3DView

  此控件用于对商品或者场景进行动态幻灯片类型的展示。通过鼠标的拖动，切换照片显示的角度，获得近似于全景展示的效果。通过设置文件的目录，文件序号列表规则以及参数的相关设置后，可显示相应的展示图片场景。

# 2.1. 属性

属性 说明
Options 设置3D显示的相关选项

# 2.1.1. Options

property Options: T3DViewOptions
1

  此项目中包含了用于设置显示的选项。下面将进行详细介绍。

# 2.1.1.1. button_bottom
property button_bottom: Boolean;
1

  此项用于设置是否显示底部的向下提示按钮。

# 2.1.1.2. button_next
property button_next: Boolean;
1

  此项用于设置是否显示右侧的向后提示按钮。

# 2.1.1.3. button_prev
property button_prev: Boolean;
1

  此项用于设置是否显示左侧的向前提示按钮。

# 2.1.1.4. button_top
property button_top: Boolean;
1

  此项用于设置是否显示顶部的向上提示按钮。

# 2.1.1.5. data_amount
property data_amount: Double;
1

  设置用于展示的图片文件的数量。

# 2.1.1.6. data_amount_y
property data_amount_y: Double;
1

  设置用于y轴展示的图片文件的数量。

# 2.1.1.7. data_api_version
property data_api_version: string;
1

  设置使用api的版本号，默认为v7，一般不需要对其进行调整。

# 2.1.1.8. data_autoplay
property data_autoplay: Boolean;
1

  此项用于设置是否启用自动播放幻灯片的功能。

# 2.1.1.9. data_autoplay_behaviour
property data_autoplay_behavior: Tdata_autoplay_behavior;
1

  此项用于设置自动播放的性为。

  • spin_x：沿着x轴的方向排序进行播放。
  • spin_xy：先沿着x轴的方向，后沿着y轴的方向排序进行播放。
  • spin_yx：先沿着y轴的方向，后沿着x轴的方向排序进行播放。
  • spin_y：沿着y轴的方向排序进行播放。
# 2.1.1.10. data_autoplay_reverse
property data_autoplay_reverse: Boolean;
1

  此项用于设置是否启用自动反向播放幻灯片的功能。

# 2.1.1.11. data_bottom_circle
property data_bottom_circle: Boolean;
1

  此项用于设置是否显示底部的360全景提示环。

# 2.1.1.12. data_bottom_circle_offset
property data_bottom_circle_offset: Double;
1

  此项用于设置全景提示环的位置偏移量。当数值增大时，提示环上移。

# 2.1.1.13. data_box_shadow
property data_box_shadow: string;
1

  用于设定容器的边框css样式。例如：inset 0 0 100px #222。

# 2.1.1.14. data_control_reverse
property data_control_reverse: Boolean;
1

  设定是否反向控制全景图像的播放。

# 2.1.1.15. data_disable_drag
property data_disable_drag: Boolean;
1

  设定是否禁用拖动变换全景图像。

# 2.1.1.16. data_disable_pinch_zoom
property data_disable_pinch_zoom: Boolean;
1

  设定是否禁用手指捏合缩放的功能，此功能仅在触摸屏模式下可用。

# 2.1.1.17. data_disable_pointer_zoom
property data_disable_pointer_zoom: Boolean;
1

  设定是否禁用指针点击缩放的功能。

# 2.1.1.18. data_drag_speed
property data_drag_speed: Double;
1

  设定在拖动鼠标以播放全景幻灯片时每一帧播放的时间间隔，以ms为单位。

# 2.1.1.19. data_filename
property data_filename: string;
1

  设定显示的图片序列的名称，序号的部分使用{index}来代替。

# 2.1.1.20. data_filename_y
property data_filename_y: string;
1

  设定显示在y轴方向上的图片序列的名称，序号的部分使用{index}来代替。

# 2.1.1.21. data_folder
property data_folder: string;
1

  设定显示的图片序列所在的目录地址。

# 2.1.1.22. data_full_screen
property data_full_screen: Boolean;
1

  设定是否在界面上显示全屏提示的控制按钮。

property data_hide_360_logo: Boolean;
1

  设定是否在初始的加载完成状态下显示360全景的logo提示。

# 2.1.1.24. data_image_list
property data_image_list: TStrings;
1

  此项用于手动指定显示于图片列表中的图片项目以实现全景幻灯片方式的展示。

# 2.1.1.25. data_index_zero_base
property data_index_zero_base: Double;
1

  此项用于设置图片序列的编号数字中如果有包含前导零的，表示前导零的数量，默认值为0表示不设置。此项需根据序号中数字的位数来确定，比如编号规则是0001，则应设置当前选项为4。

# 2.1.1.26. data_keys
property data_keys: Boolean;
1

  此项用于设置是否使用键盘来控制全景幻灯片的播放。

# 2.1.1.27. data_lazyload
property data_lazyload: Boolean;
1

  设定是否启用延迟加载的模式。

# 2.1.1.28. lazy_load_selector
property data_lazyload_selector: string;
1

  设置延迟加载的选择器。

  默认情况下，延迟加载的功能并不包含在控件中。 有很好的库可以实现这一目标。 如果在配置中启用延迟加载，则需要添加一个额外的库，如lazysizes，yall.js（Yet Another Lazy Loader），lozad.js来处理它。

  要保存API调用，可以使用以下库来处理

<!---CDN链接到js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7--->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>

<!--CDN链接到js-cloudimage-360-view 1.1.0 + yall.js 3.1.1-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>

<!--CDN链接到js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
1
2
3
4
5
6
7
8
# 2.1.1.29. data_logo_src
property data_logo_src: string;
1

  设置logo图片的来源。可选择本地或者网络的图片来进行显示。

# 2.1.1.30. data_magnifier
property data_magnifier: Double;
1

  设置图片的放大倍率，默认选项为3。

# 2.1.1.31. data_maxscale
property data_max_scale: Double;
1

  设置全景图片支持的最大缩放倍率。

# 2.1.1.32. data_on_mouse_leave
property data_on_mouse_leave: string;
1

  设定当鼠标离开全景显示区域时调用的方法。可设置的项为resetZoom，即图片恢复原始的缩放倍率。默认为none。

# 2.1.1.33. data_pinch_zoom_factor
property data_pinch_zoom_factor: Double;
1

  设定使用双指捏合缩放时缩放的因数。

# 2.1.1.34. data_play_once
property data_play_once: Boolean;
1

  设定是否仅进行一次自动播放。

# 2.1.1.35. data_pointer_zoom_factor
property data_pointer_zoom_factor: Double;
1

  设定使用鼠标光标进行缩放操作时缩放的因数。

# 2.1.1.36. data_ratio
property data_ratio: Double;
1

  用于指定图片显示的宽高比，避免图片因为大小不统一出现跳页。

# 2.1.1.37. data_speed
property data_speed: Double;
1

  设定图片显示播放的帧的间隔时间，设定为ms。

# 2.1.1.38. data_spin_reverse
property data_spin_reverse: Boolean;
1

  设定是否在播放时反序号顺序播放图片。

# 2.1.1.39. data_stop_at_edges
property data_stop_at_edges: Boolean;
1

  设定是否取消图片幻灯片的循环播放功能。

# 2.1.1.40. data_to_start_pointer_zoom
property data_to_start_pointer_zoom: Tdata_to_start_pointer_zoom;
1

  设定启用光标缩放的方式，有以下选项。

  • none：不使用光标缩放。
  • click：使用点击以进行缩放。
  • scroll：使用滚轮以进行缩放。

# 2.2. 方法

# 2.2.1. Init

procedure Init;
1

  此方法用于对控件进行初始化操作，在设置完成Options中的相关选项后，可调用此方法来加载显示。

# 3. TUg3DVideo

  此组件可用于展示播放360°全景视频。

# 3.1. 属性

属性 说明
Options 设定显示的相关属性

# 3.1.1. Options

property Options: T3DAngleOptions;
1

  设定3D显示的相关选项。

# 3.1.1.1. cubemapconfig
property cubemapConfig: string;
1

  当projectionType属性设置为cubemap或者cubestrip时，此项生效，用于配置项目的布局设置。

# 3.1.1.2. fov
property fov: Integer;
1

  设定全景图片显示的视角。

# 3.1.1.3. fovRange
property fovRange: string
1

  设定全景图片可调整的视角的显示范围。,比如[30,70]。

# 3.1.1.4. gyroMode
property gyroMode: TgyroMode;
1

  设定全景陀螺仪的工作模式。

  • gm_none：不使用陀螺仪。
  • gm_VR：使用VR模式进行工作。
  • gm_yawPicth：使用航向模式进行工作。
# 3.1.1.5. gyroOption
property gyroOption: Boolean;
1

  设置是否在界面上显示陀螺仪设置的按钮选项。

# 3.1.1.6. pitch
property pitch: Integer;
1

  设定初始状态下显示的图像的俯仰角度。

# 3.1.1.7. pitchRange
property pitchRange: string;
1

  设定图像可调整显示的俯仰角度的范围。

# 3.1.1.8. projectionType
property projectionType: TprojectionType;
1

  设置全景图像的类型。可选的项目有以下类型。

  • pt_cubemap：设定为立方体贴图的全景模式。
  • pt_cubestrip：设定为Cubestrip的全景模式。Cubestrip 是一种由六个立方体面组合而成的单一图像格式。 它几乎与立方体贴图相同，但实现方式不同。 它旨在获得更好的性能和效率。 此外，它会自动检测并支持 EAC。
  • pt_equirectangular：等距柱状投影全景模式。此模式下使用的全景图片为2:1比例格式。通常由全景相机进行拍摄。
  • pt_panorama：圆柱投影的全景模式，此模式的图片通常来源于手机拍摄的全景图像。
  • pt_stereoequi：立体等距柱状投影全景模式。此模式下使用两张2:1比例格式的全景图片组成立体VR格式。
# 3.1.1.9. showPolePoint
property showPolePoint: Boolean;
1

  此项用于设置是否显示极点。

# 3.1.1.10. strreoFormat
property stereoFormat: TstereoFormat;
1

  设定等距柱状投影的内容格式。有以下选项可用。

  • 3dh：左右立体 360 等距柱状投影格式的常数值。
  • 3dv：顶部底部立体 360 等距柱状投影格式的常数值。
  • none：指定媒体的常量值不是立体格式。
# 3.1.1.11. touchDirection
property touchDirection: Integer;
1

  设定初始的触摸方向。

# 3.1.1.12. touchOption
property touchOption: Boolean;
1

  设定是否显示触摸设置的按钮。

# 3.1.1.13. useKeyboard
property useKeyboard: Boolean;
1

  设定是否使用键盘进行显示。

# 3.1.1.14. useZoom
property useZoom: Boolean;
1

  设定是否使用缩放的相关功能。

# 3.1.1.15. video
property video: string
1

  用于设定显示的全景视频的来源地址。此地址支持外链的地址，也支持本机的地址。请注意，如果在https下访问FastWeb的，引入的外链地址也必须以https开头，反之如果是在http下访问FastWeb的，则引入的外链地址是http，否则会出现跨域请求的问题导致无法访问。

  地址的格式示例见下：

<!-- mp4视频源地址引入-->
<source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4">  
<!--webm视频源地址引入-->
<source src="library/js/egjs-view360/examples/img/seven.webm" type="video/webm">
1
2
3
4
# 3.1.1.16. yaw
property yaw: Integer;
1

  设定图片显示的航向的角度。 3.1.1.15.

# 3.1.1.17. yawRange
property yawRange: string;
1

  设定图片显示的航向的角度范围。

# 3.2. 方法

# 3.2.1. Init

procedure Init;
1

  此方法用于对控件进行初始化操作，在设置完成Options的相关选项后可调用此方法来加载显示。

# 3.2.2. Play

procedure Play;
1

  开始进行播放全景视频。

# 3.2.3. Pause

procedure Pause;
1

  执行暂停播放全景视频。

# 3.2.4. setVideo

procedure setVideo;
1

  可执行替换视频播放器中的播放来源。

    //JScript
  Ug3DVideo01.Init;
  Ug3DVideo01.SetVideo("library/js/egjs-view360/examples/img/seven.mp4","{projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}");
  Ug3DVideo01.Play;
    1
    2
    3
    4
    //PasScript
  Ug3DVideo01.Init;
  Ug3DVideo01.SetVideo('library/js/egjs-view360/examples/img/seven.mp4','{projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}');
  Ug3DVideo01.Play;
    1
    2
    3
    4
    // Make sure to add code blocks to your code group

    # 4. TUgAlbumView

      此组件以相册的形式展示图片序列，在底部显示图册的缩略图，点击对应的缩略图可查看图片。

    # 4.1. 属性

    属性 说明
    Image 设置图片显示的列表
    Options 设置幻灯片的属性设置选项

    # 4.1.1. Images

    property Images: TStringList;
    1

      设置图片、视频显示的图片集合，格式显示如下。

    <!--图片支持的显示格式-->
<img src="library/js/fotorama/image/1.jpg">
<img src="library/js/fotorama/image/2.jpg">
<img src="library/js/fotorama/image/3.jpg">
<img src="library/js/fotorama/image/4.jpg">
<img src="library/js/fotorama/image/5.jpg">
<!--视频支持的显示格式-->
<a href="https://www.samplevideo.com/iframe/video1?autoplay=1" data-video="true">
<img src="library/js/fotorama/image/food5.jpg"></a>
    1
    2
    3
    4
    5
    6
    7
    8
    9

      其中src后的地址请替换为自定义的地址。此地址支持外链的地址，也支持本机的地址。请注意，如果在https下访问FastWeb的，引入的外链地址也必须以https开头，反之如果是在http下访问FastWeb的，则引入的外链地址是http，否则会出现跨域请求的问题导致无法访问。

    # 4.1.2. Options

    property Options: TAlbumViewOptions;
    1

      设置显示的相关参数。可用于设置的相关参数如下。

    # 4.1.2.1. data_allowfullscreen
    property data_allowfullscreen: Boolean;
    1

      设置是否将当前显示的内容以全屏的方式展示。

    # 4.1.2.2. data_arrows
    property data_arrows: Boolean;
    1

      设置是否在当前显示的内容中展示切换图片的箭头。

    # 4.1.2.3. data_autoplay
    property data_autoplay: string;
    1

      此项用于设定在自动播放模式下播放每张图片切换的时间间隔，以ms为单位，如果设置为none，则自动播放的模式被关闭。

    # 4.1.2.4. data_click
    property data_click: Boolean;
    1

      设置是否启用控件的点击切换图片的功能。

    # 4.1.2.5. data_clicktransition
    property data_clicktransition: Tdata_transition;
    1

      设置点击按钮时切换图片的样式。

    # 4.1.2.6. data_direction
    property data_direction: Tdata_direction;
    1

      设定照片集切换的方向。

    • rtl：从右向左切换。
    • ltr：从左向右切换。
    # 4.1.2.7. data_fit
    property data_fit: Tdata_fit;
    1

      选择图片在控件中的展示布局方式。

    • contain：将图片保持比例进行伸缩以适应布局显示。
    • cover：将图片进行截取，以适应默认的宽高比进行布局显示。
    • scaledown：当显示的图片分辨率比控件容器分辨率大时进行缩小以适应显示。
    • none：使用图片自己的分辨率来进行显示。如果大于容器则显示居中的部分。
    # 4.1.2.8. data_glimpse
    property data_glimpse: string;
    1

      设定以像素或者百分比表示的附近的帧图像的概览的大小。

    # 4.1.2.9. data_hash
    property data_hash: Boolean;
    1

      当启用此选项后，在图片进行切换时会更改页面的URL。

    # 4.1.2.10. data_height
    property data_height: string;
    1

      设定以像素或者百分比表示的展示容器的高度。

    # 4.1.2.11. data_keyboard
    property data_keyboard: Boolean;
    1

      设定是否启用键盘切换图片展示的功能。

    # 4.1.2.12. data_loop
    property data_loop: Boolean;
    1

      设定是否启用图片序列集合循环展示的功能。

    # 4.1.2.13. data_margin
    property data_margin: Integer;
    1

      设定以像素为单位的图片之间的水平边距。

    # 4.1.2.14. data_maxheigh
    property data_maxheigh: string;
    1

      设定以像素或者百分比表示的展示容器允许的最大高度。

    # 4.1.2.15. data_maxwidth
    property data_maxwidth: string;
    1

      设定以像素或者百分比表示的展示容器允许的最大宽度。

    # 4.1.2.16. data_minheight
    property data_minheight: string;
    1

      设定以像素或者百分比表示的展示容器允许的最小高度。

    # 4.1.2.17. data_minwidth
    property data_minwidth: string;
    1

      设定以像素或者百分比表示的展示容器允许的最小宽度。

    # 4.1.2.18. data_nav
    property data_nav: string;
    1

      设定图片导航栏的显示方式。

    • dots：显示为点状。
    • thumbs：显示缩略图。
    • false：不显示导航栏。
    # 4.1.2.19. data_navposition
    property data_navposition: string;
    1

      设定显示导航栏的位置。此项仅在data_nav不设置为false时有效。

    • bottom：显示于底部。
    • top：显示于顶部。
    # 4.1.2.20. data_navwidth
    property data_navwidth: string;
    1

      以像素或者百分比设定导航栏容器的宽度。

    # 4.1.2.21. data_raio
    property data_ratio: string;
    1

      设定宽高比，如果使用的宽度属性为百分比，则此处建议使用。

    # 4.1.2.22. data_shadows
    property data_shadows: Boolean;
    1

      设定是否显示阴影效果。

    # 4.1.2.23. data_shuffle
    property data_shuffle: Boolean;
    1

      设定是否在启动时随机打乱图片顺序进行显示。

    # 4.1.2.24. data_startindex
    property data_startindex: string;
    1

      设定图像序列的起始显示位置。图片是从0开始编号排序的。

    # 4.1.2.25. data_stopautoplayontouch
    property data_stopautoplayontouch: Boolean;
    1

      设定是否在用户点击、触摸操作控件时停止自动播放。

    # 4.1.2.26. data_swipe
    property data_swipe: Boolean;
    1

      设定是否在切换图片时启用滑动视觉效果。

    # 4.1.2.27. data_thumbborderwidth
    property data_thumbborderwidth: Integer;
    1

      设定显示缩略图导航栏时，提示边框的宽度。

    # 4.1.2.28. data_thumbfit
    property data_thumbfit: string;
    1

      设定缩略图在界面中的显示方式。

    • contain：将图片保持比例进行伸缩以适应布局显示。
    • cover：将图片进行截取，以适应默认的宽高比进行布局显示。
    • scaledown：当显示的图片分辨率比控件容器分辨率大时进行缩小以适应显示。
    • none：使用图片自己的分辨率来进行显示。如果大于容器则显示居中的部分。
    # 4.1.2.29. data_thumbheight
    property data_thumbheight: Integer;
    1

      设定缩略图区域显示的像素高度。

    # 4.1.2.30. data_thumbmarign
    property data_thumbmargin: Integer;
    1

      设定缩略图区域显示的像素边距。

    # 4.1.2.31. data_thumbwidth
    property data_thumbwidth: Integer;
    1

      设定缩略图区域显示的像素宽度。

    # 4.1.2.32. data_transition
    property data_transition: Tdata_transition;
    1

      设定图片切换的样式。

    • silde：图片滑动切换。
    • crossfade：交叉淡化叠加切换。
    • dissolve：交叉溶解切换。
    # 4.1.2.33. data_width
    property data_width: string;
    1

      设定控件显示区域的宽度。

    # 4.2. 方法

    # 4.2.1. Init

    procedure Init;
    1

      此方法用于对控件进行初始化操作，在设置完成Options的相关选项后可调用此方法来加载显示。

    # 4.2.2. Show

    procedure Show(const Value: string);
    1

      设定要显示的图片内容，有以下几种使用方式。

      //JScript
//显示序号为0的图片
UgAlbumView01.Show("0");

//显示下一张
UgAlbumView01.Show(">");

//显示上一张
UgAlbumView01.Show("<");

//显示最后一张
UgAlbumView01.Show(">>");

//设定一张图片显示的时长
UgAlbumView01.Show("{index:1,time:500}");
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      //PasScript
//显示序号为0的图片
UgAlbumView01.Show('0');

//显示下一张
UgAlbumView01.Show('>');

//显示上一张
UgAlbumView01.Show('<');

//显示最后一张
UgAlbumView01.Show('>>');

//设定一张图片显示的时长
UgAlbumView01.Show('{index:1,time:500}');
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      // Make sure to add code blocks to your code group

      # 4.2.3. First

      procedure First;
      1

        调用此方法后，可用于显示序列中的第一张图片。

      # 4.2.4. Next

      procedure Next;
      1

        调用此方法后，可用于显示图片序列中的下一张图片。

      # 4.2.5. Previous

      procedure Previous;
      1

        调用此方法后，可用于显示图片序列中的上一张图片。

      # 4.2.6. Last

      procedure Last;
      1

        调用此方法后，可用于显示图片序列中的最后一张图片。

      # 4.2.7. StartAutoplay

      procedure StartAutoplay;
      1

        调用此方法后，可开始进行自动播放。

      # 4.2.8. StopAutoplay

      procedure StopAutoplay;
      1

        调用此方法后，可停止自动播放的过程。

      # 4.2.9. RequestFullScreen

      procedure RequestFullScreen;
      1

        调用此方法后，可将控件进行全屏展示。

      # 4.2.10. CancelFullScreen

      procedure CancelFullScreen;
      1

        调用此方法后，可取消控件的全屏显示。

      # 4.2.11. PlayVideo

      procedure PlayVideo;
      1

        图片序列中如果正在展示视频类型的对象，调用此方法可开始进行视频播放。

      # 4.2.12. StopVideo

      procedure StopVideo;
      1

        图片序列中如果当前正在播放视频，调用此方法可停止视频的播放。

      # 4.2.13. Resize

      procedure Resize(const Value: string);
      1

        调用此方法可重新调整大小。使用的方法如下：

        //JScript
//width 与height中的数值可以使用数值或者百分比来进行表示
UgAlbumView01.Resize("{width: 500,height: 333}");
        1
        2
        3
        //PasScript
//width 与height中的数值可以使用数值或者百分比来进行表示
UgAlbumView01.Resize('{width: 500,height: 333}');
        1
        2
        3
        // Make sure to add code blocks to your code group

        # 4.2.14. SetOptions

        procedure SetOptions(const Value: string);
        1

          调用此方法可修改参数信息。使用的方法如下。

          //JScript
//可修改的参数属性均来源于Options属性中，去掉属性名称前的'data_'标识符就可引入至此作为属性名称来使用。
UgAlbumView01.SetOptions("{nav: false,arrows: false}");
          1
          2
          3
          //PasScript
//可修改的参数属性均来源于Options属性中，去掉属性名称前的'data_'标识符就可引入至此作为属性名称来使用。
UgAlbumView01.SetOptions('{nav: false,arrows: false}');
          1
          2
          3
          // Make sure to add code blocks to your code group

          # 4.2.15. Load

          procedure Load(const Value: string);
          1

            调用此方法可加载选择的图片为新的图片序列。使用的方式如下。

            //JScript
UgAlbumView01.Load("[{img: 'library/js/fotorama/image/food1.jpg', thumb: 'library/js/fotorama/image/food1.jpg'}," + 
"{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}]");
            1
            2
            3
            //PasScript
UgAlbumView01.Load('[{img: ''library/js/fotorama/image/food1.jpg'', thumb: ''library/js/fotorama/image/food1.jpg''},' + 
'{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}]');
            1
            2
            3
            // Make sure to add code blocks to your code group

            # 4.2.16. Push

            procedure Push(const Value: string);
            1

              调用此方法将选择的图片加入当前的图片序列中，使用的方式如下。

              //JScript
//下述方法可将图片以及对应的缩略图加入至图片序列。
UgAlbumView01.Push("{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}");
              1
              2
              3
              //PasScript
//下述方法可将图片以及对应的缩略图加入至图片序列。
UgAlbumView01.Push('{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}');
              1
              2
              3
              // Make sure to add code blocks to your code group

              # 4.2.17. Pop

              procedure Pop;
              1

                调用此方法将最后一张图片移除出当前序列。

              # 4.2.18. Shift

              procedure Shift;
              1

                调用此方法将第一张图片移除出当前序列。

              # 4.2.19. UnShift

              procedure Unshift(const Value: string);
              1

                调用此方法将选择的图片插入至图片序列中。使用的方式如下。

                //JScript
UgAlbumView01.Unshift("{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}");
                1
                2
                //PasScript
UgAlbumView01.Unshift('{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}');
                1
                2
                // Make sure to add code blocks to your code group

                # 4.2.20. Reverse

                procedure Reverse;
                1

                  将图片显示进行反向排序。

                # 4.2.21. Shuffle

                procedure Shuffle;
                1

                  将图片显示的顺序打乱后重新进行排序显示。

                # 5. TUgImageClassifier

                  此控件为图片分类识别组件，将图片传递给控件，可通过识别来区分当前图片所属的分类类型。此控件需要在https模式访问FastWeb的情况下才可使用，

                # 5.1. 属性

                属性 说明
                Image 设定要识别的图形图像

                # 5.1.1. Image

                property Image: TUgImage;
                1

                  设置要用于识别的图形图像的内容。当图形图像发生变化时，会触发控件的图形识别的功能。

                # 5.2. 事件

                # 5.2.1. OnResult事件

                procedure UgImageClassifier01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
                1

                  设置当控件识别有结果需要输出时触发事件。

                  以下为示例，标示如何使用此事件输出结果信息。

                  //JScript
function UgImageClassifier01OnResult(sender,alabel,aconfidence)
{
  UgMemo01.Lines.Add("Classifiy："+alabel);
  UgMemo01.Lines.Add("Recognition："+aconfidence);
}
                  1
                  2
                  3
                  4
                  5
                  6
                  //PasScript
procedure UgImageClassifier01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgMemo01.Lines.Add('Classifiy：'+alabel);
  UgMemo01.Lines.Add('Recognition：'+aconfidence);
end;
                  1
                  2
                  3
                  4
                  5
                  6
                  // Make sure to add code blocks to your code group

                  # 5.3. 方法

                  # 5.3.1. Init

                  procedure Init;
                  1

                    设置对控件进行初始化操作。

                  # 6. TUgObjectDetect

                    此组件用于设置物体检测，输入图片后，反馈检测的结果。此控件需要在https模式访问FastWeb的情况下才可使用。

                  # 6.1. 属性

                  属性 说明
                  Image 设定要识别的图形图像

                  # 6.1.1. Image

                  property Image: TUgImage;
                  1

                    设置要用于识别的图形图像的内容。当图形图像发生变化时，会触发控件的图形识别的功能。

                  # 6.2. 事件

                  # 6.2.1. OnResult事件

                  procedure UgObjectDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
                  1

                    设置当控件识别有结果需要输出时触发事件。

                    以下为示例，标示如何使用此事件输出结果信息。

                    //JScript
function UgObjectDetect01OnResult(sender,alabel,aconfidence)
{
  UgMemo01.Lines.Add("Objection："+alabel);
  UgMemo01.Lines.Add("Recognition："+aconfidence);
}
                    1
                    2
                    3
                    4
                    5
                    6
                    //PasScript
procedure UgObjectDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgMemo01.Lines.Add('Objection：'+alabel);
  UgMemo01.Lines.Add('Recognition：'+aconfidence);
end;
                    1
                    2
                    3
                    4
                    5
                    6
                    // Make sure to add code blocks to your code group

                    # 6.3. 方法

                    # 6.3.1. Init

                    procedure Init;
                    1

                      设置对控件进行初始化操作。

                    # 7. TUgVideoDetect

                      此组件可通过摄像头获取到的视频流来分析检测的物体。此组件需要在https模式访问FastWeb的情况下才可使用。

                    # 7.1. 事件

                    # 7.1.1. OnResult事件

                    procedure UgVideoDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
                    1

                      设置当检测识别到物体后触发事件，用于反馈识别的结果。

                      //JScript
function UgVideoDetect01OnResult(sender,alabel,aconfidence)
{
  UgMemo01.Lines.Add("Video Result："+alabel);
  UgMemo01.Lines.Add("Recognition："+aconfidence);
}
                      1
                      2
                      3
                      4
                      5
                      6
                      //PasScript
procedure UgVideoDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgMemo01.Lines.Add('Video Result：'+alabel);
  UgMemo01.Lines.Add('Recognition：'+aconfidence);
end;
                      1
                      2
                      3
                      4
                      5
                      6
                      // Make sure to add code blocks to your code group

                      # 7.2. 方法

                      # 7.2.1. Init

                      procedure Init;
                      1

                        设置对控件进行初始化操作，初始化后相机会被打开以开始识别。

                      多媒体控件
                      IsoBean控件

                      ← IsoBean控件→

                      Copyright © 2021-2025 爱招飞IsoFace | ALL Rights Reserved