正文

Image Widgets

图片部件

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.

使用image小部件将静态图像资产和动态gif图像添加到您的设计中。支持以下文件类型:JPG、PNG、GIF、BMP和SVG。

1、Adding Images to Your Designs

添加图像到您的设计

1.1、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.

从“ Libraries ”窗格中将一个空白图像小部件拖到画布上。然后，双击小部件或右键单击并选择 Import Image 在操作系统的文件浏览器中搜索图像文件。

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.

加载图像时，图像小部件将自动调整为要导入的图像的原始大小。 要防止图像小部件调整大小，请选择它并在导入图像文件之前双击其中一个调整大小句柄。 调整大小的手柄将从黄色变为白色，这表明Fit to Image功能已经关闭。

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.

您可以在任何时候通过双击调整大小句柄或单击 Style 窗格中的 Fit to Image 图标来再次启用自动适合。

1.2、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.

点击界面左上角的 Insert 菜单，选择 Image ，在您的计算机文件浏览器中浏览图像文件。选定的图像将插入到您的设计在画布的中心。

1.3、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.

您可以通过单击窗格右上角的“** add Image folder ”图标，将计算机中的图像添加到“ Libraries**”窗格中。然后可以将图像从文件夹拖放到画布上。

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.

图像文件夹由库列表中的图像图标指示。

1.4、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画布上。

1.5、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画布上，以创建一个新的图像小部件，其中已经加载了选定的图像。

1.6、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.

可以将形状小部件的背景设置为图像。但是要记住，下面的图像编辑选项对于形状小部件上的图像填充是不可用的。

2、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.

您可以通过 Style 窗格顶部的颜色调整菜单来调整图像的颜色。检查 调整颜色 框，然后使用滑块或下面的数字字段来改变图像的色调、饱和度、亮度和对比度。

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.

单击 Reset 将字段设置回默认值，或取消选中 Adjust Color 以切换图像到默认级别，而不影响您对每个属性的选择。

2.1、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 和 C 快捷键。

Tip
提示

You can also customize the top toolbar to add Slice and Crop buttons to it.
您还可以自定义顶部工具栏来添加 Slice 和 裁剪 按钮。

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
  Copy: 复制选择框内的图像部分，并保持原始图像不变

2.2、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.

右键单击一个图像小部件，并选择 变换图像→在上下文菜单中保留角 。三角形标记将出现在图像的顶部和左侧，以指示不会随小部件的其余部分调整大小的图像区域。您可以拖动三角形标记来调整保留区域的大小。

Note
提示

You can't preserve corners on an empty image widget. Make sure to load an image file into the widget before trying this.
您无法在空图像小部件上保留角。在尝试此操作之前，请确保将图像文件加载到小部件中。

3、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.

请到「今天看啥」查看全文