6.3 自由块组件布局

SaCa DataViz的自由布局通过添加一种新的布局元素(简称“自由块“)来实现。使用自由块可以让布局显得灵活多变,且更有效地利用页面空间。可以将它摆放到图册页的任意位置,例如下图所示,名为“条形图”的图表位于自由块中:

./img/184

要使用该功能,需要先从左上角“资源”处拖拽“自由块”到图册页中:

./img/185

此时自由块还没有内容,显示空白,可以将图表、图片等其他资源拖放到自由块中。每个自由块只能显示一个资源,再次拖入会替换先前的资源。

可以任意拖动自由块以改变位置,或者拖动边缘区域以调整大小。多个自由块可以重叠摆放。

新拖入的自由块的大小为固定值(300px * 300px),放到图册页中时会转换为相对于图册大小的百分比。当图册适应页面大小时,自由块的大小也会相应变化。

6.3.1 同时操作多个自由块

这个功能同样适用于边框组件。 在按住Ctrl键的同时,点击鼠标左键,就能够同时选中多个自由块。如下图所示,在已选中的多个自由块外围,出现绿色虚线框,表示当前选中的范围。

./img/186

目前选中多个自由块的功能包括:

  1. 拖动绿色虚线框,可以同时移动已选中的多个自由块。
  2. 多选后,工具栏上多出六个按钮,见上图红框部分。从左到右依次为顶端对齐、底端对齐、左对齐、右对齐、横向分布、纵向分布。

6.3.2 复制、粘贴

选中一个自由块(或边框),在其上方找到下拉按钮(如下图红框所示),点击后出现下拉菜单:

./img/187

可在菜单中选择“复制”,即可复制当前自由块的大小和内容。之后可按快速键Ctrl+V进行粘贴。

【注】特殊情况:如果自由块中是图表,在粘贴到同一图册页中时,会自动清除新自由块中的内容。目的是保持一个图表在一个图册页中至多使用一次的规则。粘贴到其他页时,图表正常显示。

6.3.3 快速置顶置底

自由块和边框组件有图层的概念(参见图层章节)。使用本功能可以便捷地让某一个自由块、边框置于顶层或底层。 使用方法是从自由块的下拉菜单中进行选择:

./img/188

6.3.4 快捷键支持

在操作自由块(边框)时,可使用以下快捷键:

  • Ctrl+C:复制选中的自由块或边框
  • Ctrl+V:粘贴已复制的自由块或边框
  • Ctrl+D:删除选中的自由块或边框
  • Ctrl+方向键上:置于图层顶部
  • Ctrl+方向键下:置于图层底部
  • Shift+B:临时显示或隐藏自由块的边框线。另外在dataviz-web/common/config.js中提供了全局配置,默认为显示:

./img/189

results matching ""

    No results matching ""

    results matching ""

      No results matching ""