设计器操作指南-图片控件

本文为设计器内图片控件的使用指南。图片中包括单张图片控件、多图轮播（纯图）控件、多图轮播（可加内容）控件、多图列表控件、logo图片控件、二维码控件。

各图片控件区别

• 单张图片：仅添加一张图片。
• 多图轮播（纯图）：以轮播形式，展示多张图片。当您在此控件上放置一个按钮，实际上是将一个控件放置在另一个控件上层，不论您切换到哪一张图都会显示上面有个按钮。
• 多图轮播（可加内容）：以轮播形式，展示多张图片。每一页内容可单独编辑，比如您在第一页中放置一个按钮，实际上是将按钮放进了容器内，第二页不会自动显示这个按钮。
• 多图列表：多图轮播与多图列表主要为图片展示形式上的区别。多图轮播（纯图）一页展示一图，而多图列表一页展示多图。
• logo图片：单张图片的一种。您可使用此控件上传网站logo。
• 二维码控件：可生成文本、链接、电话的二维码图片。

添加图片控件

单击资源区的内容 > 图片，根据需要选择图片种类及样式，在设计区中单击，即可添加成功。

设置图片控件

在选中该图片组件后，单击设置或者图片，即可在快速设置面板中，设置图片的样式、数据、动效、排列。

• 样式：可设置图片的填充方式、边框样式及阴影样式。
• 数据：可更换图片、美化图片、设置图片标题、设置图片链接。
  说明 设置图片标题作用：当鼠标停在该图片时，显示此标题名称。 设置图片链接作用：当鼠标单击该图片时，可跳转到此链接地址。
• 动效：可设置图片的动画效果。
• 排列：可根据需要调整尺寸和位置。

快捷更换图片功能

单击下图所示按钮可一键更换图片。

切换图片样式

单击下图所示按钮可切换图片样式，可切换图片样式。

图片遮罩功能

• 作用：图片遮罩功能可实现遮挡部分图片区域，仅显示特定区域的图像内容。
• 使用说明：支持图片样式一（矩形图片控件）使用图片遮罩功能。
• 使用步骤：
  1. 单击下图所示遮罩icon，可进入遮罩编辑模式。
  2. 编辑遮罩时：
     • 在编辑区域单击，将图片做为编辑对象。在编辑区域内部拖拽，可移动图片位置；当选中编辑图片tab时，拖拽图片的边框可放大/缩小图片，比例关系继承自外层控件的填充方式；
     • 在编辑区域双击，将遮罩做为编辑对象。当选中编辑遮罩tab时，点击右上角的拖动标识，可拖动遮罩位置；拖拽遮罩的边框可自由调整图片遮罩显示区域。
  3. 结束编辑遮罩：单击编辑区域以外任意区域或“完成”按钮即可退出编辑模式，完成遮罩编辑。

图片编辑

• 作用：可裁剪、翻转、旋转、涂鸦笔、图标、文字、调整图片。
• 使用说明：支持编辑图片的控件有图片控件、Logo控件、多图轮播控件、多图轮播（可加内容）控件、多图列表控件、导航容器控件。
  • 图片控件、Logo控件可在选中控件后，点击下图所示icon可编辑图片。
  • 多图轮播控件、多图轮播（可加内容）控件、多图列表控件、导航容器控件可在更换图片时编辑图片，如下图所示。

锁定位置功能

选中图片控件时，单击像锁一样的图标按钮，可锁定当前位置。

一键删除功能

选中图片控件时，单击像废纸篓一样的图标按钮，可删除此控件。