图片元件 #

使用图像元件将静态图像资产和 GIF 动画添加到你的设计中。支持以下文件类型。JPG、PNG、GIF、BMP 和 SVG。

在你的设计中添加图片 #

从元件库中添加一个空白图像元件 #

libraries(元件库) 面板中拖一个空白的图像元件到画布上。然后,双击该元件或右击并选择 Import Image ,在你的操作系统的文件浏览器中搜索一个图像文件。

当你加载一个图像时,图像元件将自动调整到正在导入的图像的原始尺寸。要防止图像小部件的大小被更改,请选择图片,然后在双击其调整大小的手柄。 调整大小的手柄将从黄色变为白色,这表明图像的调整大小功能已经关闭。

你可以在任何时候通过双击调整大小的手柄或点击 Style 面板中的 Fit to Image 图标再次启用自动适应大小。

插入菜单 #

点击界面左上方的 Insert 菜单,选择 Image ,在电脑的文件浏览器中浏览图像文件。选定的图像将被插入到画布的中心。

加载本地图像文件夹 #

你可以通过点击面板右上方的 Add Image Folder 图标,将电脑中的一个本地图片文件夹添加到 libraries(元件库) 面板中。然后你可以把文件夹中的图像拖到画布上。

每当该文件夹的内容在你的电脑上发生变化时,它们也会在 Axure RP 中自动更新。

图像文件夹在库的列表中以图像图标显示。

复制并粘贴到画布上 #

你可以从其它工具中直接复制和粘贴图像到 Axure RP 画布上。

把文件拖到画布上 #

你可以从电脑的文件浏览器中拖动一个图像文件,并将其放到 Axure RP 画布上,以创建一个新的图像元件。

形状元件上的图像填充 #

你可以将形状小部件的背景设置为图像。

编辑图像 #

颜色调整 #

你可以通过 Style 面板顶部的颜色调整菜单来调整图像的颜色。勾选 Adjust Color ,然后使用滑块或下面的输入框来改变图像的色调、饱和度、亮度和对比度。

点击 Reset ,将字段设置回其默认值,或者取消选中 Adjust Color ,将图像切换回其默认水平,而不影响你对每个属性的选择。

裁剪和切片 #

你可以通过右键单击选定的图像并在上下文菜单中选择其中一个选项来进行切片或裁剪,或者你可以使用 S 和 C 来调出切片或裁剪工具

切片工具将图像分成几个部分,每个部分都成为一个新的图像元件。你可以用水平、垂直或交叉切割的方式进行切割。

裁剪工具包含几个选项。

  • Crop 裁剪: 移除选择框外的所有图像部分
  • Cut 剪切: 移除选择框内的图像部分,并将其复制到剪贴板上。
  • Copy 复制: 复制选择框内的图像部分,并保留原图像不动。

翻转 #

要水平或垂直翻转图像,请右键单击它,然后转到 Transform Image → Flip HorizontalFlip Vertical

保存圆角 #

你可以保持图像的边角在图像被调整大小时不被扭曲。这在处理那些边角不能很好地调整大小的图形时很有用,比如圆角的图形。

右键单击一个图像元件,在上下文菜单中选择 Transform Image 图像变换 → Preserve Corners 保留圆角 。三角形标记将出现在图像的顶部和左侧,以表明图像的区域,这些区域将不会与元件的其他部分一起被调整大小。你可以拖动三角形标记来调整保留区域的大小。

注意

你不能在一个空的图像元件上保留圆角。

旋转的图像 #

使用 Style 面板顶部的 Rotation 字段来旋转画布上的选定图像。该字段接受正负度值,最多可有两位小数。正值将图像向右旋转,负值将图像向左旋转。

清理图像 #

你可以清除图像Widgets(元件)的图像文件,而不删除Widgets(元件)本身。在 Style 面板中,点击 Fill 部分的 Image ,然后点击预览图像右上方的红色 X

添加和编辑文本 #

你可以通过以下任何一个选项向图像 Widgets(元件)添加文本或编辑其当前文本。

  • 右键单击图像,在上下文菜单中选择 Edit Text
  • 按住 CTRL(Windows)或 CMD(Mac)并双击图像,进入文本编辑模式。
  • 选择图像并开始输入

优化大型图片 #

大图像会增加你的 RP 文件的大小,并影响 Axure RP 内和浏览器的性能。优化图像将减少其文件大小,从而减少 RP 文件的大小。然而,结果是图像的质量可能会下降。

当你将一张大图片导入 Axure RP 时,你会被问及是否要对其进行优化。你也可以通过右键单击并在上下文菜单中选择 Transform Image 图像变换 → Optimize Image 图片压缩 ,来优化 RP 文件中已有的图像。

注意

优化 PNG 将删除它可能具有的任何透明度,优化 GIF 动画将删除其动画。