.

新增图形组件

小常发表于:2019年12月10日 17:05:27更新于:2019年12月10日 17:05:45

一、应用场景

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

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


二、组件用法

基本用法

(一)箭头组件

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

0015def5ce628a7eaff17ae06885b48


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

0015def5d35af85ea7ad05cc4cbc9a4


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

0015def5d61a36431fc5b72cd5208d3


(二)圆角矩形组件

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

0015def5ebb2d5eed85b3d1fd7e2726


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

0015def5ed459493a4d3a399b1d245b


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

0015def5ed493a77a22d1a72a9721aa 

(三)对话框组件

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

0015def5f37d61416ecb979a57db0d2 

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

0015def5f486d7f337130cda1a6af4f

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

0015def5f52332a7dc5661ef4fbd740      

(四)连接线组件

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

0015def5f811d48480b427ab3a57e46 

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

0015def5f8bde822fbf7a1d9055dcef 

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

曲线折角类型;

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

0015def5f8c0b1f3ab3baa34d1f1064