SAP 电商云 Spartacus UI 里的 spare part 3D 模型展示，使用的控件来自 SAP UI5 sap.ui.vk 下的控件。

sap.ui.vk 库为应用程序中 2D 和 3D 模型的可视化和操作提供了控件。

应用程序使用 sap.ui.vk 命名空间。所有其他命名空间（sap.ui.vk.dvl、sap.ui.vk.threejs、sap.ui.svg）都是特定于特定实现的，应被视为私有 API。

使用传统 DVL 或 ThreeJs 渲染引擎启用 3D 查看。

3D 渲染引擎的选择是使用 sap.ui.vk.ContentResource 对象及其参数 sourceType 完成的。

要使用旧版 DVL 渲染引擎，请将 sourceType 参数设置为 vds。

要使用 ThreeJs 渲染引擎，请将 sourceType 参数设置为 vds4。

旧版 DVL 渲染引擎已弃用，将在即将发布的版本中删除。

许多新功能不适用于旧版 DVL 渲染引擎。例如，抽屉工具栏中可用的大多数工具仅适用于 ThreeJs 渲染。

Native Viewport

Native Viewport 控件 ( sap.ui.vk.NativeViewport ) 为加载到 Viewer 应用程序中的 2D 图像提供渲染画布。

Native Viewport 控件 (sap.ui.vk.NativeViewport) 使用标准 HTML 和 CSS 将浏览器本机支持的图像文件加载到查看区域。标准 VIT 平移和缩放手势支持增强了加载图像的查看。

sap.ui.vk.NativeViewport 控件可以占据全部或部分用户界面。

Scene Tree

sap.ui.vk.SceneTree 控件呈现给定场景中节点的分层视图。

Viewport 控件的主要功能是为所有或部分加载的场景提供渲染表面。视口可以占据用户界面的全部或部分。

View Gallery

sap.ui.vk.ViewGallery 控件替换了 sap.ui.vk.StepNavigation 控件，该控件支持导航和激活包含在单个 3D 场景中的过程和步骤。 sap.ui.vk.StepNavigation 控件已弃用，因为它仅与 DVL 渲染引擎一起使用。

Viewer

此控件旨在帮助应用程序开发人员通过连接、配置和呈现基本 Visualization Toolkit 控件作为单个复合控件，在其应用程序中包含简单的 3D 可视化功能。

Viewport 可以连接到 ViewStateManager 对象以处理场景中节点的选择和可见性状态。这意味着当在场景中选择一个节点时，该节点将被突出显示。此外，如果视口连接到场景树控件，则在视口中选择节点将突出显示场景树中的关联项。

当视口连接到场景树，或者创建 DrawerToolbar 并启用显示/隐藏按钮时，可以更改节点的可见性状态。可以使用场景树功能或抽屉工具栏按钮在视口中隐藏或显示节点。

动态创建 viewer port 的代码：

private addViewport(): Observable<void> {return new Observable((subscriber) => {sap.ui.require(['sap/ui/vk/ViewManager','sap/ui/vk/Viewport','sap/ui/vk/ViewStateManager','sap/ui/vk/AnimationPlayer','sap/ui/vk/ContentConnector','sap/ui/vk/DrawerToolbar',],(sap_ui_vk_ViewManager: any,sap_ui_vk_Viewport: any,sap_ui_vk_ViewStateManager: any,sap_ui_vk_AnimationPlayer: any,sap_ui_vk_ContentConnector: any,sap_ui_vk_DrawerToolbar: any) => {const core: Core = this.getCore();const uiArea: UIArea = core.getUIArea(this.elementRef.nativeElement);if (uiArea) {const oldViewport = uiArea.getContent()[0] as Viewport;this.destroyViewportAssociations(oldViewport);uiArea.destroyContent();}this.viewport = new sap_ui_vk_Viewport({ visible: false });this.viewport.placeAt(this.elementRef.nativeElement);this.contentConnector = new sap_ui_vk_ContentConnector();this.contentConnector.attachContentChangesStarted(this.onContentChangesStarted,this);this.contentConnector.attachContentChangesFinished(this.onContentChangesFinished,this);this.contentConnector.attachContentLoadingFinished(this.onContentLoadingFinished,this);this.viewStateManager = new sap_ui_vk_ViewStateManager({contentConnector: this.contentConnector,});this.viewport.setContentConnector(this.contentConnector);this.viewport.setViewStateManager(this.viewStateManager);this.animationPlayer = new sap_ui_vk_AnimationPlayer();this.animationPlayer.setViewStateManager(this.viewStateManager);this.animationPlayer.attachViewActivated(this.onViewActivated, this);this.animationPlayer.attachTimeChanged(this.onTimeChanged, this);this.viewManager = new sap_ui_vk_ViewManager({contentConnector: this.contentConnector,animationPlayer: this.animationPlayer,});this.viewStateManager.setViewManager(this.viewManager);this.viewStateManager.attachSelectionChanged(this.onSelectionChanged,this);this.viewStateManager.attachOutliningChanged(this.onOutliningChanged,this);this.drawerToolbar = new sap_ui_vk_DrawerToolbar({viewport: this.viewport,visible: false,});this.viewport.addDependent(this.drawerToolbar);subscriber.next();subscriber.complete();});});}

最终生成的 view port 效果如下：

SAP UI5 sap.ui.vk 命名空间内的控件介绍相关推荐

SAP UI5 初学者教程之二十三 - 列表控件的排序 Sort 和分组 Group 试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 XML 视图里 label 和 text 控件文本对齐问题
如下图所示,我直接将 SAP UI5 Label 和 Text 控件放在一起,最后的结果不令人满意: <Label text="Refresh Count:" labelFo ...
excel vba 使用mschart_VBA专题108：使用VBA操控Excel界面之在功能区中添加内置控件...
学习Excel技术,关注微信公众号: excelperfect 本文重点讲解如何在功能区中添加不同类型的内置控件. 添加普通按钮和切换按钮按下面的步骤来添加普通按钮和切换按钮(例如,拼写和删除线控件 ...
HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
ASP.NET Atlas简单控件介绍——Sys.Component基类与Sys.UI.Control基类
作者:Dflying Chen (http://dflying.cnblogs.com/) 本系列有三篇文章: ASP.NET Atlas简单控件介绍--Sys.Component基类与Sys.UI. ...
QT tableview内置控件
为什么需要内置控件 tableview 默认的内置控件是QLineEdit,但是实际使用时,我们常常会有特殊需求,例如对QLineEdit有字数限制,性别有固定的选项等等,因此我们需要自定义table ...
第31讲 UI组件之 Gallery画廊控件
第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...
iOS开发UI篇—UIScrollView控件介绍
iOS开发UI篇-UIScrollView控件介绍一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 ...
Excel 2010 VBA 入门 138 添加选项卡和内置控件
目录题码功能区简介使用Excel选项自定义功能区题在功能区中添加一个选项卡,并在选项卡中添加内置控件码使用Excel选项中的[自定义功能区]添加选项卡和内置控件. 步骤1 选择&qu ...

SAP UI5 sap.ui.vk 命名空间内的控件介绍

Native Viewport

Scene Tree

View Gallery

Viewer

SAP UI5 sap.ui.vk 命名空间内的控件介绍相关推荐

最新文章

热门文章