利用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.动态面板第一层的内容

矩形的大小和动态面板的画定的区域一致。

1666266199305.jpg

2.动态面板第二层的内容

矩形的右侧超出动态面板的画定的区域。

1666266219845.jpg

3.浏览器显示结果

可以看到动态面板第二层的右侧未显示。

1666266234989.jpg

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


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


相关文章
|
10月前
|
前端开发 容器
Html利用Canvas绘制图形
Html利用Canvas绘制图形
92 0
|
移动开发 前端开发 HTML5
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
|
编解码 前端开发
html:canvas画布绘图简单入门-2
html:canvas画布绘图简单入门-2
html:canvas画布绘图简单入门-2
|
前端开发
html:canvas画布绘图简单入门-1
html:canvas画布绘图简单入门-1
html:canvas画布绘图简单入门-1
|
XML 移动开发 编解码
HTML5绘图方式Canvas和SVG的区别
HTML5绘图方式Canvas和SVG的区别
420 0
|
Web App开发 移动开发 前端开发
|
Web App开发 移动开发 JavaScript
|
Web App开发 移动开发 JavaScript
|
移动开发 前端开发 JavaScript