摹客 Mockplus

摹客 Mockplus

让设计更快更简单

图片组件

图片组件可用于呈现jpg、png等格式的图片文件。

添加图片组件

从组件库中拖动图片组件到工作区,默认是没有图片内容。

1-图片组件-中文.png

编辑组件内容

点击工具栏中的“导入图片”按钮或双击图片组件,弹出择“导入图片”窗口。

2-图片组件-中文.png

导入图片支持以下获取图片资源的方式:

本地:从本地磁盘中选择图片文件加载

网络:通过URL地址下载图片

Flickr:接入图片分享网站Flickr,搜索站内资源加载

3-图片组件-中文.png

注意这里的“按照图片实际大小载入”选项,勾选时,组件的宽高以图片的实际尺寸为准,不勾选时,将会拉伸图片至组件尺寸。

4-图片组件-中文.png

当然也可以直接从本地拖拽或复制图片到工作区中。

5-图片组件-中文.png

设置属性

加载资源后,工具栏中新增几项图片处理工具,可对图片进行再次加工。

6-图片组件-中文.png

对图片进行裁切。

7-图片组件-中文.gif

将图片分割为多块。

8-图片组件-中文.gif

逆时针旋转图片。

9-图片组件-中文.gif

可在水平或垂直方向翻转图片。

9-图片组件-中文.gif

重要属性

可按固定形状显示图片,与形状组件类似。

11-图片组件-中文.png

通过属性面板也可以控制图片旋转和翻转。

通过填充模式可以控制图片显示方式,填充模式有以下五种:

适应:图片的宽高比例不变,等比例缩放图片适应组件大小。

填充:图片资源宽高比例不变,等比例缩放填充满组件区域,超出组件部分被裁切。

拉伸:拉伸图片资源适应组件的宽高。

平铺:图片资源的宽高不变,重复排列充满组件空间。

居中:图片资源宽高不变,始终位于图片组件中央。

 

 

相关阅读:

 


MockplusMockplus,100万产品经理和设计师的选择
免费下载Mockplus,开始你的设计!