一、应用场景

图形组件主要用于制作交互课件等培训指示类H5，包含常用的箭头、圆角矩形、对话框、连接线这4个基本矢量图形。

其中箭头组件包含箭头大小编辑、箭头尾部长度、宽度编辑调整功能；圆角矩形、对话框组件的圆角大小编辑，形状大小编辑功能；连接线的方向、粗细、线条样式、起始端、锚点添加等样式调整。 

二、组件用法

基本用法

（一）箭头组件

1、鼠标移动到图形组件位置，会出现更多组件，单击箭头组件，添加一个箭头到页面中。  

2、选中箭头组件，会看到组件上有2个蓝点，2个橙色点，点击蓝色点可以拖动调整箭头的长度跟方向；分别点击橙色点，可以分别调整箭头大小和箭头矩形部分的宽度，如下图动图所示：

3、选中组件，右侧面板可以修改该组件的描边颜色、描边粗细、样式、填充色。

（二）圆角矩形组件

1、单击圆角矩形组件，添加到页面中。      

2、选中组件，会看到组件上4个蓝点，1个橙色点，点击蓝色点可以拖动调整矩形的大小跟长宽比；点击橙色点，可以调整圆角矩形的圆角角度。如下图动图所示：

3、选中组件，右侧面板可以修改该组件的描边颜色、描边粗细、样式、填充色。

（三）对话框组件

1、单击对话框组件，添加到页面中。

2、选中组件，会看到组件上多个蓝点，3个橙色点，点击蓝色点可以拖动调整对话框的大小跟长宽比；点击橙色点，可以调整圆角矩形的圆角角度。如下图动图所示：

3、选中组件，右侧面板可以修改该组件的描边颜色、描边粗细、样式、填充色。

（四）连接线组件

1、单击连接线组件，添加到页面中。

2、选中组件，双击，会看到组件上有2个拉伸标志，鼠标放在任意一个标志上，标志颜色会变成橙色，鼠标按住选中的点拖动调整箭头长度跟方向，如下图动图所示：

3、选中组件，右侧面板可以修改该组件的线条颜色、粗细、样式；

曲线折角类型；

连接线两端的头部、尾部标记类型，标记尺寸。