页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

v9_自助仪表盘_5
v9_自助仪表盘_5

+【自助仪表盘】优化“固定大小”布局

...

背景介绍

之前的版本,固定大小布局的设置较简单,结合产品的使用,我们对其进行优化,V9及之后版本对画布区域显示进行优化,支持设置缩放方式。之前的版本,固定大小布局的设置较简单,结合产品的使用,我们对其进行优化,V9及之后版本对画布区域显示进行优化,支持设置缩放方式及图形渲染方式。

功能简介

1、画布区域与其他区域使用不同背景图加以区分。

...

2、支持设置画布缩放方式,有四种:等比缩放宽度铺满、等比缩放高度铺满、全屏铺满、不缩放。

Image RemovedImage Added

四种缩放方式详细说明如下:

Image Removed
缩放方式
效果

等比缩放宽度铺满

定义:

宽度铺满全屏,高度按比列自动缩放。

说明:

  • 当高度小于屏幕,则垂直居中显示,出现上下两边留白。
  • 当高度大于屏幕,出现垂直滚动条。

Image RemovedImage Added

  等比缩放高度铺满

定义:

高度铺满整屏,宽度按比列自动缩放。高度铺满全屏,宽度按比列自动缩放。

说明:

  • 当宽度小于屏幕,则水平居中显示,出现左右两边留白。
  • 当宽度大于屏幕,出现水平滚动条。


Image RemovedImage Added

全屏铺满

定义:

不保持高宽比例,按当前屏幕大小显示全部内容。

不缩放

定义:

保持画布原先的大小。

Image Added

3、增加“图形渲染器”设置项,设置图形渲染方式。两种渲染方式:

  • SVG:一种使用XML描述2D图像的语言。文本渲染能力强,刷新能力弱。适用于大区域渲染程序,比如高保真图形、带有某些特效的静态图像。
  • Canvas:HTML5新增的DOM,提供了像素级图形编程接口。文本渲染能力弱,刷新能力强。适用于图像密集型编程。比如高性能图形、复杂场景的实时动画。

Image Added

注意事项

目前手机端暂不支持缩放。

详情参考

关于组件的固定大小布局,详情请参考 固定大小模式:大屏型仪表盘

...