Axure RP 8 交互原型第3章.pptxVIP

第3章 图像元件 微课版 可以在【元件库】面板中的默认元件库和流程图元件库中分别找到图像元件，然后将图像元件从【元件库】拖到页面中。与矩形元件相比，图像元件也有一个黄色的小三角，但没有灰色的小圆点，这表示图像元件无法转换成其他形状，如图3-1 所示。 第3章 图像元件 3.1 置入图像 3.1.1 认识图像元件 图 3-1 图像元件的外观 在Axure RP 中置入图像的方法有3 种。 1. 使用图像元件置入图像 从【元件库】中将图像元件拖曳到页面中，然后执行下列任意一种操作。 􀂾 双击该图像元件。 􀂾 右击该元件，从弹出的快捷键菜单中执行【导入图片】命令。 􀂾 选择图像元件后，在【检视】→【样式】子面板中单击【导入】按钮。 第3章 图像元件 3.1 置入图像 3.1.2 置入图像的方法 2. 将图像直接拖曳至页面中 还可以在资源管理器窗口中选择图片，使用鼠标将其拖曳到Axure RP 页面 中，使用此方法可以在Axure RP 中同时导入多幅图片。 3. 使用【粘贴】命令 从其他程序中复制图像或者使用抓图软件抓图后，在Axure RP 中执行【编辑】→【粘贴】 （【Ctrl+V】）命令也可以获取图像。 第3章 图像元件 3.1 置入图像 3.1.2 置入图像的方法 从外部程序复制图形，或者从Axure RP 页面复制图形后，都可以在Axure RP 页面上右击鼠标，从弹出的快捷菜单中执行【特殊粘贴】→【粘贴为图片】命令，将矢量图变成位图。 第3章 图像元件 3.1 置入图像 3.1.3 将图形粘贴为图像 如果要将Axure RP 页面中的图形转换为图像，可以右击该图形，从弹出的快捷菜单中执行【转成图片】命令。 第3章 图像元件 3.1 置入图像 3.1.4 将图形转为图像 该功能可以控制导入的图像是按其原始大小显示还是按照用户设置的大小来显示。在【检视】→【样式】子面板中可以找到【适合图像】按钮。 下面练习【适合图像】工具的用法。首先从【元件库】面板中拖动一个图像元件到页面中，然后调整到合适的大小。双击该图像元件导入一幅尺寸大于图像元件的图像，此时图像元件会自动变大。改变图像尺寸后，在【样式】子面板中单击【适合图像】按钮，则图像又会变成刚导入时的大小。 第3章 图像元件 3.2 编辑图像 3.2.1 适合图像 该功能可以在拉伸图像大小时，限定拉伸的范围。执行该命令的方法有两种。 􀂾 在【检视】→【样式】子面板中单击【固定边角】按钮。 􀂾 右击图像，从弹出的快捷菜单中执行【固定边角】命令。 第3章 图像元件 3.2 编辑图像 3.2.2 固定边角 执行【固定边角】命令后，图像左侧和顶部位置分别出现两个红色的小三角控制点，拖动这些控制点可以设置固定边角的范围，如图3-2 所示。 第3章 图像元件 3.2 编辑图像 3.2.2 固定边角 图 3-2 调整固定边角范围 调整好图像边角固定的范围后，再对图像进行缩放，可以使固定边角范围的图像基本不变，固定边角范围之外的区域会被拉伸，如图3-3 所示。 第3章 图像元件 3.2 编辑图像 3.2.2 固定边角 图 3-3 改变图像大小 该功能可以对图像进行裁剪。执行该命令的方法有3 种。 􀂾 在【检视】→【样式】子面板中单击【裁剪图片】按钮。 􀂾 右击图像，从弹出的快捷菜单中执行【裁剪图片】（【Ctrl+7】）命令。 􀂾 在主工具栏中也可以找到【裁剪】（【Ctrl+7】）按钮。 第3章 图像元件 3.2 编辑图像 3.2.3 裁剪图像 默认状态下，执行【裁剪图片】后，图像上会出现一个矩形框，同时右上方出现一行灰底的文本菜单命令。矩形框就是裁剪图像的范围，也叫裁剪框，可使用鼠标调整裁剪范围；右上方的文本菜单命令可以控制裁剪的方式，裁剪完毕双击裁剪范围，如图3-4 所示。 第3章 图像元件 3.2 编辑图像 3.2.3 裁剪图像 图 3-4 执行裁剪图片命令后的初始状态 该功能可以将图片横向或者纵向切割，也可以同时对图片进行横向和纵向切 割。执行该命令的方法有3 种。 􀂾 在【检视】→【样式】子面板中单击切割图片按钮。 􀂾 右击图像，从弹出的快捷菜单中执行【切割图片】（【Ctrl+6】）命令。 􀂾 在主工具栏中也可以找到【切割】（【Ctrl+6】）按钮。 执行切割图片命令后，鼠标指针会变成标志，同时根据选择的切割方式显示切割的辅助线，如图3-5 所示。 第3章 图像元件 3.2 编辑图像 3.2.4 切割图像 第3章 图像元件 3.2 编辑图像 3.2.4 切割图像 图 3-5 切割时的状态 对图片进行圆角化的方法有两种。 􀂾 使用鼠标拖动图片左上角的黄色小三角标志，如图3-6 所示。 􀂾 在【检视】→【样式】子面板中输入圆角半径的大小，如图3-7 所示。 第3章 图像元件