Use the image widget to add both static image assets and animated GIFs to your designs. The following file types are supported: JPG, PNG, GIF, BMP, and SVG.
使用图像部件可以将静态图像和动态GIF添加到您的设计中。 Axure支持以下文件类型:JPG,PNG,GIF,BMP和SVG。
Adding Images to Your Designs添加图像到设计中
Blank Image Widgets from the Libraries Pane库窗格中的空白图像元件
Drag a blank image widget onto the canvas from the Libraries pane. Then, double-click the widget or right-click and select Import Image to search for an image file in your operating system's file browser.
将一个空白图像部件从库窗格拖到画布上。 然后,双击部件或右键单击并选择【导入图像】,即可在操作系统的文件浏览器中搜索要添加的图像文件。
When you load an image, the image widget will automatically resize to the original size of the image being imported. To prevent the image widget from resizing, select it and double-click one of its resize handles before importing an image file. The resize handles will change from yellow to white, which indicates that the Fit to Image feature has been toggled off.
加载图像时,图像部件将自动调整为要导入图像的原始尺寸。 要防止图像部件调整大小,请在导入图像文件之前选择它并双击其大小调整手柄之一。 调整大小手柄将从黄色变为白色,这表示适合图像功能已关闭。
You can enable auto-fit again at any time by double-clicking a resize handle or clicking the Fit to Image icon in the Style pane.你可以通过双击调整大小手柄或单击样式窗格中的适合图像来再次启用自动调整功能。
The Insert Menu插入菜单
Click the Insert menu at the top-left of the interface and select Image to browse for an image file in your computer's file browser. The selected image will be inserted into your design at the center of the canvas. 单击界面左上方的插入菜单,然后选择图像在计算机的文件浏览器中浏览图像文件。 选定的图像将被插入到设计画布的中央。 |
Loading Local Image Folders加载本地图像文件夹
You can add a local folder of images from your computer to the Libraries pane by clicking the Add Image Folder icon at the top-right of the pane. You can then drag images from the folder onto the canvas. 你可以通过单击窗格右上方的【添加图像文件夹】图标,将计算机的本地图像文件夹添加到“库”窗格。 然后,你可以将图像从文件夹拖到画布上。 Whenever the folder's contents change on your computer, they'll be updated automatically in Axure RP as well. 每当计算机上文件夹的内容更改时,它们的内容也会在Axure RP中自动更新。 Image folders are indicated by an image icon in the list of libraries. 图像文件夹由库列表中的图像图标指示。 |
Copy and Paste onto Canvas复制并粘贴到画布上
You can copy and paste images directly onto the Axure RP canvas from popular graphics editing, diagramming, and presentation tools.
你可以从流行的图形编辑,图表绘制和演示工具将图像直接复制和粘贴到Axure RP画布上。
Drag and Drop File onto Canvas将文件拖放到画布上
You can drag an image file from your computer's file browser and drop it onto the Axure RP canvas to create a new image widget with the selected image already loaded.
你可以将图像文件从计算机的文件浏览器中拖放到Axure RP画布上,以创建一个新的图像元件,其中所选图像已加载。
Image Fills on Shape Widgets形状元件上的图像填充
You can set the background of a shape widget to an image. Keep in mind, though, that the image editing options below are not available for image fills on shape widgets.
你可以将形状元件的背景设置为图像。 但是请记住,以下图像编辑选项不可用于形状元件上的图像填充。
Editing Images编辑图像
Color Adjustment颜色调整
You can adjust the color of images via the Color Adjust menu in the top section of the Style pane. Check the Adjust Color box and then use the sliders or the number fields below to change the image's hue, saturation, brightness, and contrast.
你可以通过样式窗格顶部的颜色调整菜单调整图像的颜色。 选中调整颜色框,然后使用滑块或下面的数字字段更改图像的色相,饱和度,亮度和对比度。
Click Reset to set the fields back to their default values, or uncheck Adjust Color to toggle the image back to its default levels without affecting your selection for each attribute.
单击重置将字段设置回其默认值,或取消选中调整颜色将图像切换回其默认级别,而不会影响你对每个属性的选择。
Cropping and Slicing裁剪和切片
You can slice or crop a selected image by right-clicking it and choosing either option in the context menu, or you can use the S and C keyboard shortcuts.
你可以通过右键单击所选图像并对其进行切割或裁剪,然后在上下文菜单中选择任一选项,也可以使用 S and C 键盘快捷键。
Tip提示
You can also customize the top toolbar to add Slice and Crop buttons to it.
你还可以自定义顶部的工具栏,以向其添加“切割”和“裁剪”按钮。
The slice tool separates the image into several parts, each of which becomes a new image widget. You can slice with a horizontal, vertical, or cross cut.
切片工具将图像分为几个部分,每个部分都成为一个新的图像元件。 你可以使用水平,垂直或交叉切割进行切片。
The crop tool contains several options:裁剪工具包含几个选项:
Crop: Removes all parts of the image outside the selection box
Cut: Removes the portion of the image inside the selection box and copies it to the clipboard
Copy: Copies the portion of the image inside the selection box and leaves the original image unchanged
Crop裁切: 删除选择框外图像的所有部分
Cut剪切: 删除选择框中的图像部分并将其复制到剪贴板
Copy复制: 复制选择框中的图像部分,并使原始图像保持不变
Flipping翻转
To flip an image either horizontally or vertically, right-click it and go to Transform Image → Flip Horizontal or Flip Vertical.
要水平或垂直翻转图像,请右键单击它,然后转到变换图像→水平翻转或垂直翻转。
Preserving Corners固定边角
You can keep the corners of an image from being distorted when the image is resized. This is useful when working with graphics that have corners that don't resize nicely, like rounded corners.
调整图像大小时,可以防止图像的角落变形。 当使用图形的圆角调整不佳时,这很有用。
Right-click an image widget and select Transform Image → Preserve Corners in the context menu. Triangle markers will appear at the top and left of the image to indicate the areas of the image that will not be resized with the rest of the widget. You can drag the triangle markers to resize the preserved areas 右键单击图像元件,然后在上下文菜单中选择`变换图像→固定边角。 三角形标记将出现在图像的顶部和左侧,以指示图像的其余部分将不会调整大小的区域。 您可以拖动三角形标记以调整保留区域的大小。
|
Rotating Images旋转图像
Use the Rotation field at the top of the Style pane to rotate selected images on the canvas. The field accepts positive and negative degree values with up to two decimal places. Positive values rotate images to the right, and negative values rotate images to the left.
使用样式窗格顶部的旋转字段来旋转画布上的选定图像。 该字段接受正和负的度值,最多两位小数。 正值将图像向右旋转,而负值将图像向左旋转。
Clearing Images清除图像
You can clear the image file from an image widget without deleting the widget itself. In the Style pane, click Image in the Fill section, and then click the red X at the top-right of the preview image. 你可以从图像部件清除图像文件,而无需删除元件本身。 在样式窗格中,单击填充部分中的图像,然后单击预览图像右上方的红色X。 |
Adding and Editing Text添加/编辑文本
You can add text to an image widget or edit its current text via any of the options below:
你可以通过以下选项将文本添加到图像部件或编辑部件文本:
Right-click the image and select Edit Text in the context menu
Hold CTRL (Windows) or CMD (Mac) and double-click the image to enter text-editing mode
Select the image and begin typing. (This option is only available if you have disabled the single-key shortcuts)
右键单击图像,然后在上下文菜单中选择编辑文本
按住CTRL(Windows)或CMD(Mac)并双击图像以进入文本编辑模式
选择图像并开始输入。 (仅当你禁用了单键快捷方式时,此选项才可用)
Optimizing Large Images优化最大图像
Large images can increase the size of your RP file and affect performance within Axure RP and in the web browser. Optimizing an image will decrease its file size and thus the size of the RP file. As a result, however, the image's quality may be decreased.
大图像会增加RP文件的大小,并影响Axure RP和Web浏览器中的性能。 优化图像将减小其文件大小,从而减小RP文件的大小。 但是,结果可能会降低图像质量。
When you import a large image into Axure RP, you'll be asked whether or not you want to optimize it. You can also optimize images already in the RP file by right-clicking and selecting Transform Image → Optimize Image in the context menu.当你将大图像导入Axure RP时,系统会询问你是否要对其进行优化。 你还可以通过右键单击并在上下文菜单中选择转换图像→优化图像来优化RP文件中已有的图像。 |
Tip提示
Optimizing a PNG will remove any transparency it may have, and optimizing an animated GIF will remove its animation.
优化PNG将删除其可能具有的任何透明度,而优化动画GIF将删除其动画。
Selection Groups选择组
You can create a relationship between a group of shape, line, image, and/or dynamic panel widgets in which only one widget at a time can be set to its selected state with the Set Selected/Checked action. (This is similar to the relationship between radio buttons in a radio group.)
你可以在一组形状,线条,图像或动态面板元件之间创建关系,其中通过“设置选择/选中”操作一次只能将一个元件设置为其选定状态。 (这类似于单选按钮组中单选按钮之间的关系。)
To learn more, check out the Selection Groups article.
要了解更多信息,请查看选择组文章。