> 文档中心 > 利用Axure RP9 动态面板理解SVG ViewPort和ViewBox

利用Axure RP9 动态面板理解SVG ViewPort和ViewBox


1 ViewPort、ViewBox

ViewPort翻译为视窗,相当于电脑屏幕,能够显示内容的地方。
ViewBox翻译为视区,相当于截屏后再显示在电脑屏幕的整个区域上。

单纯地从字面理解不好理解,借助Axure RP9 动态面板是可以较为轻松地理解这两个名词。

2 动态面板

2.1 使用场景

最近学习快速原型工具Axure RP9的使用方法,在其默认元件库中的基本元件中有一个称为动态面板的元件。其功能相当强大,能够制作很多场景的原型。

  1. 多面板选择
  2. 列表翻页
  3. 轮播图
  4. 下拉菜单

总结就是涉及多层要显示的元素时,就要使用到动态面板。

2.2 定义

动态面板的定义为专门用于设计原型中的动态功能,它可以包含一个或多个状态,每个状态就是一个页面,在这里可以任意编辑,通过控制状态的切换或显示/隐藏来实现一些我们常见的交互效果。

据其定义,它也可以叫做多态面板或者多层面板。

2.3 呈现

动态面板只能看到它所在区域内的层级内容,当层级的内容出现在面板区域外,我们在浏览器中就看不到区域外的内容。举个例子:

  1. 动态面板第一层的内容
    矩形的大小和动态面板的画定的区域一致。
    在这里插入图片描述
  2. 动态面板第二层的内容
    矩形的右侧超出动态面板的画定的区域。
    在这里插入图片描述
  3. 浏览器显示结果
    可以看到动态面板第二层的右侧未显示。
    在这里插入图片描述

搞清楚动态面板的机理,再去理解SVG中的ViewBoxViewPort元素,应该较容易理解。

动态面板就是ViewPortViewBox的合体,其包含的两层面板相当于两张层叠的A4纸,第二张还向右侧偏移出去一部分。我们拿个固定位置(拥有自己的坐标系)的照相机拍照,恰好能够全部拍到第一张;此时保持相机位置不动(不改变坐标系),当拿掉第一张纸时,能够想象出,我们只能拍到第二张纸的一部分。