图片

本文为设计器内图片控件使用说明，涵盖单张图、多图轮播、多图列表、Logo、二维码等类型，以及设置、遮罩、编辑与建议尺寸。

各图片控件区别

• 单张图片：仅展示单张图片。
• 多图轮播（纯图）：多张图轮播展示。若在该控件上层再放一个按钮等控件，切换轮播图时该上层控件仍始终显示（叠在同一位置）。
• 多图轮播（可加内容）：多张图轮播，每一页是独立内容区；例如仅在第一页放按钮，则第二页不会自动出现同一按钮（按钮在该页容器内）。
• 多图列表：与多图轮播主要为展示形态差异：多图轮播（纯图）常见为一次突出一图，多图列表则可一次展示多图。
• Logo 图片：属于单张图片的一种，用于上传网站 Logo。
• 二维码控件：可根据文本、链接、电话等生成二维码图片。

添加图片控件

在资源区单击 内容 > 图片，按需要选择图片类型与样式，在设计区单击即可添加。

设置图片控件

选中图片控件后，一般会默认展开编辑区；可通过面板上的按钮切换菜单，快速设置 样式、编辑、动效、排列。

• 样式：图片填充方式、边框、阴影等。
• 编辑：更换图片、美化图片、设置图片标题与链接等。
  说明

  • 图片标题：鼠标悬停图片上时显示的标题文案。
  • 图片链接：鼠标单击图片时跳转的地址。
• 动效：入场等动画效果。
• 排列：尺寸与位置。

切换图片样式

单击面板中对应按钮可切换图片的外观样式（以当前设计器版本为准）。

图片遮罩功能

• 作用：遮挡部分图像区域，只显示需要的可视区域。
• 适用范围：支持图片样式一（矩形图片控件）使用遮罩。
• 使用步骤
  1. 单击如下图所示的遮罩图标，进入遮罩编辑模式。

  

  2. 编辑过程中：
     • 在编辑区内单击，将图片作为编辑对象：区内拖拽可平移图片；选中编辑图片选项卡时，拖拽图片边框可缩放（比例与外层控件填充方式相关）。
     • 在编辑区内双击，将遮罩作为编辑对象：选中编辑遮罩选项卡时，可拖动遮罩上的移动标识调整位置，拖拽遮罩边框调整可见区域。

     

  3. 结束编辑：单击编辑区域外任意处或「完成」类按钮退出遮罩编辑。

图片编辑

• 作用：支持裁剪、翻转、旋转、涂鸦笔、图标、文字及画面调整等。
• 适用范围：图片控件、Logo、多图轮播、多图轮播（可加内容）、多图列表、导航容器等支持编辑的控件。

  

  

  

一键删除功能

选中图片控件后，单击工具栏中类似废纸篓的图标即可删除。

各类图片的建议尺寸表